切碎子视图，使其不超过父视图答案

【问题标题】：Chop child view so it doesn't exceed the parent view切碎子视图，使其不超过父视图
【发布时间】：2018-12-07 14:40:14
【问题描述】：

我需要旋转卡片内的文字。我想得到的是：

但我不知道如何用颤振来做到这一点。我面临的问题是文本视图超过了卡片。

这是我目前所拥有的：

Widget cardDetails(String title, String imgPath) {
return Material(
  elevation: 8.0,
  borderRadius: BorderRadius.circular(15.0),
  child: Container(
    height: 135.0,
    width: 135.0,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0), color: Colors.white),
    child: Stack(
      alignment: Alignment.topLeft,
      children: <Widget>[
        Transform.rotate(
          angle: -pi / 4,
          child: Container(
            height: 15.0,
            width: 55.0,
            alignment: Alignment.topCenter,
            color: const Color(0xFFFFd77B),
            child: Text(
              title,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 12.0,
              ),
            ),
          ),
        ),

      ],
    ),
  ),
);
}

这是它的样子：

提前致谢

【问题讨论】：

这篇文章与我想做的事无关:(

标签： dart flutter flutter-layout

【解决方案1】：

制作横幅最简单的方法是使用Banner widget。但是，它仍然在您正在使用的项目范围之外进行绘制，不幸的是，它的可配置性几乎没有（并且不能处理较长的文本之类的事情）。

要修复边界外的绘画，您需要做的就是在卡片小部件下方添加一个 ClipRect，这应该可以修复横幅小部件的溢出或您对旋转框所做的事情。

根据您需要横幅的可配置性，您可以重新实现Banner widget - 使用 TextPainter 您可以计算出文本的长度并根据需要自动调整大小（并删除阴影...)

【讨论】：

非常感谢！我已经使用 ClipRect 小部件解决了这个问题。