我正在尝试在Flutter中构建以下布局 .
我想要实现两件事:
渲染绘制对角边的背景(我猜通过BoxDecoration)
粉红色的容器夹子沿着对角线侧面 - 即如果文字对于一条线来说太大,它应该换成新的线条 .
有任何想法吗?
有多种方法可以做到这一点 . 一种方法是使用CustomPainter将其用作背景并让它绘制粉红色图片 .
另一种方法是使用堆栈,如下所示:
container (with pink background) -> stack -> picture, clipped -> text, etc
你'd lay out the text however you normally would, and you' d将图片右对齐并定义一个ClipPath,可以根据需要剪切它 .
要使文本换行,将其放在ConstrainedBox或SizedBox中,并确保将其设置为换行(我认为是softwrap属性) .
这是我的代码:
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; }
2 回答
有多种方法可以做到这一点 . 一种方法是使用CustomPainter将其用作背景并让它绘制粉红色图片 .
另一种方法是使用堆栈,如下所示:
你'd lay out the text however you normally would, and you' d将图片右对齐并定义一个ClipPath,可以根据需要剪切它 .
要使文本换行,将其放在ConstrainedBox或SizedBox中,并确保将其设置为换行(我认为是softwrap属性) .
这是我的代码:
对于小部件Pic:
对于小部件信息:
对于TrapeziumClipper: