自定义扑小部件形状 | TrapeziumClipper

本文介绍了自定义扑小部件形状的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I'm attempting to build the following layout in Flutter.

我希望实现两件事:

渲染一个绘制对角线的背景(我猜是通过BoxDecoration)
在对角线上放置粉红色的容器夹子级-即，如果文本对于一行而言太大，则应换行到新行.

有什么想法吗?

推荐答案

这是我的代码:

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:

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

这篇关于自定义扑小部件形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！