class ScheduleListItem extends StatelessWidget {
ScheduleListItem({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 300,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black26, offset: Offset(0, 5), blurRadius: 5)
]),
margin: EdgeInsets.all(7),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
width: 15,
decoration: BoxDecoration(
color: Colors.red,
borderRadius:
BorderRadius.horizontal(left: Radius.circular(10))),
),
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween ,
children: <Widget>[Text("Data"), Text("Data")],
),
Row(
children: <Widget>[Text("Data"), Text("Data")],
),
Row(
children: <Widget>[Text("Data"), Text("Data")],
)
],
)
],
),
);
}
}
你需要将你的Column
包裹在Expanded
然后你可以使用Spacer
属性,它占用了剩余的空间。
Expanded(
child: Column(
children: <Widget>[
Row(children: <Widget>[Text("Data"), Spacer(), Text("Data")]),
Row(children: <Widget>[Text("Data"), Spacer(), Text("Data")]),
Row(children: <Widget>[Text("Data"), Spacer(), Text("Data")])
],
),
)
如果你在flex
有一个以上的Spacer
,你也可以在Spacer
中使用Row/Column
告诉你如何划分剩余区域的占用率
我假设您想将两个Text
小部件分开放置一行。如果是这样,您的列不会占据整个水平空间。你可以简单地将它包装成一个Expanded
小部件,如下所示:
Expanded(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text("Data"), Text("Data")],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text("Data"), Text("Data")],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text("Data"), Text("Data")],
)
],
),
)
这将产生此输出: