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

Question

我需要旋转卡片中的文字。我想获得的是：

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

这是我目前的情况：

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,
              ),
            ),
          ),
        ),

      ],
    ),
  ),
);
}

这是它的样子：

提前致谢

Answer 1

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

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

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

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

Chop child view so it doesn't exceed the parent view

dart

flutter

flutter-layout