自定義顫振小部件形狀

Question

我正在嘗試在Flutter中構建以下布局。

我想要實現兩件事：

• 渲染繪制對角線的背景（我猜通過BoxDecoration）
• 讓粉紅色的容器夾在對角線邊的兒童 - 即如果文字對於一條線太大，它應該換成新的線。

有任何想法嗎？

Answer 1

有多種方法可以做到這一點。 一種方法是使用CustomPainter將其用作背景並讓它繪制粉紅色+圖片。

另一種方法是使用堆棧，如下所示：

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

您可以按照慣例布置文本，然后將圖片右對齊並定義一個ClipPath ，可以根據需要剪切它。

要進行文本換行，將其放在ConstrainedBox或SizedBox中 ，並確保將其設置為wrap（我認為是softwrap屬性）。

Answer 2

這是我的代碼：

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

對於小部件Pic：

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;
}