我正在创建一个类似Instagram配置文件的屏幕,但MainaxisAlignment.SpaceEqually不起作用。如果行不在任何其他行或列中,但在本例中没有,那么它工作得很好。
我怎么解决这个问题?请帮忙。
Container(
margin: EdgeInsets.all(15.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.only(
right: 10.0,
),
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new CachedNetworkImageProvider(
profile.dp,
scale: 100.0,
),
),
),
),
Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Text(
profile.postcount.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('posts'),
],
),
Column(
children: <Widget>[
Text(
profile.followers.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('followers'),
],
),
Column(
children: <Widget>[
Text(
profile.followings.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('following'),
],
),
],
),
new RaisedButton(
child: Text('Edit Profile'),
onPressed: () {},
),
],
)
],
)
],
)),
期望:
现实:
最佳答案
Widget _buildRow() {
return Container(
padding: const EdgeInsets.all(16),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 40,
backgroundImage: AssetImage("your_image_asset"),
),
SizedBox(width: 12),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Text("2", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Gold", style: TextStyle(color: Colors.grey)),
],
),
Column(
children: <Widget>[
Text("22", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Silver", style: TextStyle(color: Colors.grey)),
],
),
Column(
children: <Widget>[
Text("5464", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Reputation", style: TextStyle(color: Colors.grey)),
],
),
],
),
OutlineButton(onPressed: () {}, child: Text("CopsOnRoad (Edit Profile)")),
],
),
),
],
),
);
}