谁能帮我调整 flutter 中的布局?
Can anyone help me out in aligning the layout in flutter?
以下是布局错误的截图:
正如您在上面看到的,一行中的一列将其他 children 向下推。
我已从行中删除该列,并且布局按预期显示。但是,我需要将该列作为行的一部分。
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")
],
)
);
}
}
而不是用 Expanded
包装你的 Column
,这将占用尽可能多的 space 使用 Flexible
,还将你的其他小部件包装在 [=11= 中] 这样您就可以轻松地布置它们:
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")
],
),
],
),
),
],
)
);
}
}
以下是布局错误的截图:
正如您在上面看到的,一行中的一列将其他 children 向下推。
我已从行中删除该列,并且布局按预期显示。但是,我需要将该列作为行的一部分。
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")
],
)
);
}
}
而不是用 Expanded
包装你的 Column
,这将占用尽可能多的 space 使用 Flexible
,还将你的其他小部件包装在 [=11= 中] 这样您就可以轻松地布置它们:
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")
],
),
],
),
),
],
)
);
}
}