我有一个包含三行的列:
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print('card of course clicked');
},
child: Card(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.circular(8.0)),
child: Container(
height: 144,
child: Row(children: [
Padding(
padding: EdgeInsets.all(16.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
child: Image.network(_model._schoolThumb))),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Align(
alignment: Alignment.center,
child: Text(_model._schoolName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18)),
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey[700]),
Container(width: 8),
Text(_model._guides,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400)),
],
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.attach_money, color: Colors.grey[700]),
Container(width: 8),
Text(_model._priceFrom,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400))
],
)
],
)
]),
),
),
);
}
结果,我开始对齐三行。
如何将第一个 Text()
居中对齐?为文本赋予属性并在 Expanded
、Container
、Stack
中包装没有帮助,或者我做错了。提前致谢!
编辑
附上整个build()
方法
最佳答案
问题:
默认情况下,Column
的width
设置为最宽的child
小部件的width
列
。
解决方案:
您需要使用 Expanded
或 Flexible
包装您的 Column
。
如下所示。
Expanded(
child: Column(
children: <Widget>[
...
],
),
)
或
Flexible(
child: Column(
children: <Widget>[
...
],
),
)
然后需要使用 Align
或 Center
小部件将对齐方式设置为您的子小部件,在您的例子中是 Text
小部件。
如下所示:
Align(
alignment: Alignment.center,
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
或
Center(
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
关于在列中 flutter 不同的对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56475512/