https://istack.dev59.com/w5mLQ.webp
就像我们看到的大图中有一个小圆形图像。如何按照图片中的方式排列文本。
https://istack.dev59.com/w5mLQ.webp
就像我们看到的大图中有一个小圆形图像。如何按照图片中的方式排列文本。
Widget build(BuildContext context) {
return new Container(
height: 150.0,
margin: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
gradient: new LinearGradient(colors: [Colors.yellow[700], Colors.redAccent],
begin: Alignment.centerLeft, end: Alignment.centerRight, tileMode: TileMode.clamp)),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
child: new CircleAvatar(radius: 35.0, backgroundImage: NetworkImage('https://wallpapercave.com/wp/wp2365076.jpg'),)
),
new Expanded(child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('New York', style: new TextStyle(fontSize: 20.0, color: Colors.white70, fontWeight: FontWeight.bold),),
new SizedBox(height: 8.0,),
new Text('Sunny', style: new TextStyle(fontSize: 12.0, color: Colors.white70),),
new SizedBox(height: 10.0,),
new Row(children: <Widget>[
new Column(children: <Widget>[
new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
new Text('Popularity', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
],),
new Column(children: <Widget>[
new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
new Text('Like', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
],),
new Column(children: <Widget>[
new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
new Text('Followed', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
],)
],)
],)),
new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text('12°', style: new TextStyle(fontSize: 30.0, color: Colors.white70),),
new Text('Ranking', style: new TextStyle(fontSize: 14.0, color: Colors.white70),),
],))
],),
);
}
要实现您所需求的功能需要使用几个小部件,以下是我解决问题的方法(可能需要微调以适应您的确切需求,但应该能让您开始):
首先从背景开始(我相信您称之为全貌)。要实现这一点,您可以使用 Container
小部件来绘制矩形,并使用设置 decoration
属性的 BoxDecoration
小部件来设置背景图片。
接下来,将 Container
小部件的 child
属性设置为包含循环图像的 Row
小部件和包含文本元素的 Column
小部件。
整个过程可能会看起来像这样:
new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/card_background.png'),
fit: BoxFit.cover,
),
),
child: new Row(
children: <Widget>[
new CircleAvatar(
backgroundImage: new AssetImage('assets/images/avatar.png')
),
new Column(
children: <Widget>[
new Text('David Borg'),
new Text('Title: Flying Wing'),
],
),
],
),
)
如果您想要这个功能,代码会非常简短:
body: Column(
children: <Widget>[
ClipPath(
clipper: MyClipper(),
child: Container(
height: 350,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Color.fromRGBO(16, 27, 117, 0.5),
Color.fromRGBO(16, 27, 117, 0.5),
]),
image: DecorationImage(
image: AssetImage(
"assets/images/points_removed.png",
),
),
),
child: Align(
alignment: Alignment(-0.8, -0.6),
child: Image.asset(
"assets/images/hamburger_icon.png",
width: 30,
height: 20,
),
),
),
),
],
),
(可选)裁剪背景的代码
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0, size.height - 80);
path.quadraticBezierTo(
size.width / 2, size.height, size.width, size.height - 80);
path.lineTo(size.width, 0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}