下面是布局错误的屏幕截图:
如上所示,一行中的一列正在将其他子项向下推。
我已从行中删除该列,并且布局按预期显示。但是,我需要将该列作为行的一部分。
class TitleSection extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
padding: EdgeInsets.all(32),
child: Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Kratos",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20
)),
Text("The God Of War",
style: TextStyle(
color: Colors.grey[500]
),
),
],
),
),
Icon(
Icons.star,
color: Colors.red,
),
Text("143")
],
)
);
}
}
答案 0 :(得分:0)
与其将Column
用Expanded
包装,而使用Flexible
会占用尽可能多的空间,还可以将其他小部件包装在Column
内,以便您轻松放置他们出来:
class TitleSection extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(32),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Kratos",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20
)),
Text("The God Of War",
style: TextStyle(
color: Colors.grey[500]
),
),
],
),
),
Flexible(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.star,
color: Colors.red,
),
Text("143")
],
),
],
),
),
],
)
);
}
}