自定义颤振小部件形状答案

【问题标题】：Custom flutter widget shape自定义颤振小部件形状
【发布时间】：2018-09-13 10:36:12
【问题描述】：

我正在尝试在 Flutter 中构建以下布局。

我希望实现两件事：

渲染一个绘制对角边的背景（我猜是通过 BoxDecoration）
让粉色容器沿对角线剪辑子级 - 即，如果文本对于一行来说太大，它应该换行。

有什么想法吗？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

这是我的代码：

Stack(
  children: <Widget>[
    Pic(),
    Info(),
  ],
)

对于小部件图片：

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      alignment: Alignment.centerRight,
      fit: BoxFit.fitHeight,
      image: NetworkImage(
          'https://media.sproutsocial.com/uploads/2014/02/Facebook-Campaign-Article-Main-Image2.png'),
    ),
  ),
)

对于小部件信息：

ClipPath(
  clipper: TrapeziumClipper(),
  child: Container(
    color: Colors.white,
    padding: EdgeInsets.all(8.0),
    width: MediaQuery.of(context).size.width * 3/5,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width * 6/15
          ),
          child: Text(
            'Testing clipping with soft wrap',
            softWrap: true,
            style: Theme.of(context).textTheme.title,
          ),
        ),
      ],
    ),
  ),
)

对于 TrapeziumClipper：

class TrapeziumClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width * 2/3, 0.0);
    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
  }
  @override
  bool shouldReclip(TrapeziumClipper oldClipper) => false;
}

【讨论】：

【解决方案2】：

有多种方法可以做到这一点。一种是使用 CustomPainter 将其用作背景并让它绘制粉色 + 图片。

另一种方法是使用堆栈，如下所示：

container (with pink background)
  -> stack
     -> picture, clipped
     -> text, etc

您可以按照通常的方式布置文本，并将图片向右对齐并定义一个 ClipPath 以根据需要对其进行剪辑。

要使文本换行，请将其放在 ConstrainedBox 或 SizedBox 中，并确保将其设置为换行（我相信是 softwrap 属性）。

【讨论】：