我需要像这样格式化文本,我尝试过这样的事情,但是问题是,如果没有数据,整个对齐方式就会崩溃。我尝试过spaceBetween和spaceEvenly,但是没有任何变化。我在整个对齐方式中做了什么容器向左移,我在将spacemEvenly对齐到行中并对齐居中]
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Colors.orangeAccent[100],
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 0,
child:Padding(
padding: EdgeInsets.only(top:10),
child: Text(
"Name :",
softWrap: true,
style: TextStyle(
fontSize: 15,
color: Colors.black87,
fontWeight: FontWeight.bold,
),
),
),
),
Expanded(
flex: 0,
child:Padding(
padding: EdgeInsets.only(top:10),
child: Text(
name_rec != null ? name_rec : '',
softWrap: true,
style: TextStyle(
fontSize: 14,
color: Colors.black87,
),
),
),
),
],
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 0,
child:Padding(
padding: EdgeInsets.only(top:10),
child: Text(
"Address:",
softWrap: true,
style: TextStyle(
fontSize: 15,
color: Colors.black87,
fontWeight: FontWeight.bold,
),
),
),
),
Expanded(
flex: 0,
child:Padding(
padding: EdgeInsets.only(top:10),
child: Text(
address_rec != null ? address_rec : '',
softWrap: true,
style: TextStyle(
fontSize: 14,
color: Colors.black87,
),
),
),
),
],
),
),
),
将小部件的flex
更新为1
。尽管添加了Expanded
,但尚未指示其子级必须占用或不占用的剩余空间。
请参见下面的示例。 Container
小部件的添加仅是为了控制或限制扩展到两端(水平)的小部件的宽度。
main.dart
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
width: 450, // Depending on the screen your targetting
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Colors.blueAccent[100],
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 0,
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"Title:",
softWrap: true,
style: TextStyle(
fontSize: 15,
color: Colors.black87,
fontWeight: FontWeight.bold,
),
),
),
),
Expanded(
flex: 1, // Update flex
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"",
softWrap: true,
style: TextStyle(
fontSize: 14,
color: Colors.black87,
),
),
),
),
],
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Colors.yellowAccent[100],
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 0,
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"Name:",
softWrap: true,
style: TextStyle(
fontSize: 15,
color: Colors.black87,
fontWeight: FontWeight.bold,
),
),
),
),
Expanded(
flex: 1,
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"Juan dela Cruz",
softWrap: true,
style: TextStyle(
fontSize: 14,
color: Colors.black87,
),
),
),
),
],
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Colors.redAccent[100],
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 0,
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"Address:",
softWrap: true,
style: TextStyle(
fontSize: 15,
color: Colors.black87,
fontWeight: FontWeight.bold,
),
),
),
),
Expanded(
flex: 1,
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"Metro Manila",
softWrap: true,
style: TextStyle(
fontSize: 14,
color: Colors.black87,
),
),
),
),
],
),
),
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}