我正在尝试在Flutter中构建以下布局。
我希望实现两件事:
有什么想法吗?
答案 0 :(得分:4)
有多种方法可以做到这一点。一种方法是使用CustomPainter将其用作背景并让它绘制粉红色+图片。
另一种方法是使用堆栈,如下所示:
container (with pink background)
-> stack
-> picture, clipped
-> text, etc
您按照惯例布局文字,然后将图片右侧对齐,并定义ClipPath,根据需要剪切它。
要进行文本换行,请将其放在ConstrainedBox或SizedBox内,并确保将其设置为换行(我认为是softwrap属性)。
答案 1 :(得分: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;
}