我有一个具有动态高度项的ListView。每个项都是一个包含3个元素的Row:文本、列、列。ListView的外观如下所示:
下面是我的物品小部件的代码:
class ItemWidget extends StatelessWidget {
final ItemViewModel model;
const ItemWidget({Key key, @required this.model}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(width: 16),
Text(
model.typeLabel,
),
SizedBox(width: 8),
Expanded(
flex: 6,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(height: 4),
Text(
'Volume:',
textAlign: TextAlign.end,
),
SizedBox(height: 2),
Text(
model.volume,
textAlign: TextAlign.end,
),
SizedBox(height: 4),
Text(
'Filled:',
textAlign: TextAlign.end,
),
SizedBox(height: 2),
Text(
model.filled,
textAlign: TextAlign.end,
),
SizedBox(height: 4)
],
),
),
SizedBox(width: 16),
Expanded(
flex: 6,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(height: 4),
Text(
'Price:',
textAlign: TextAlign.end,
),
SizedBox(height: 2),
Text(
model.price,
textAlign: TextAlign.end,
),
SizedBox(height: 4),
Text(
'Total:',
textAlign: TextAlign.end,
),
SizedBox(height: 2),
Text(
model.total,
textAlign: TextAlign.end,
),
SizedBox(height: 4),
Text(
'Fee:',
textAlign: TextAlign.end,
),
SizedBox(height: 2),
Text(
model.fee,
textAlign: TextAlign.end,
),
SizedBox(height: 4),
],
)),
SizedBox(width: 16),
],
);
}
}
我希望我的Column小部件总是顶部对齐,就像行的crossAxisAlignment为CrossAxisAlignment.start
时一样。同时,文本应该居中,就像行的crossAxisAlignment为CrossAxisAlignment.center
时一样。下面是我想要的:
如何实现这一目标?
谢谢你的帮助。
4条答案
按热度按时间1aaf6o9v1#
我的理解是否正确:您有3个元素的行,并且希望第一个元素居中,另外两个元素靠上对齐?
我认为您的主要误解是,列不会自动拉伸到整个高度,因此它们的内容可能是顶部对齐的,但它们本身在行中是居中对齐的。
This是关于这个主题的一个非常好的指南,理解它非常重要。
用
Align()
小部件 Package 中间元素可能可以解决您的直接问题。vmdwslir2#
答案是:Row小部件不能为其子级使用不同的crossAxisAlignment类型。
但是我为我的布局找到了另一个解决方案,在根目录下使用
Stack
widget。结果是:
x6492ojm3#
不确定这是否可行。2如果布局像图中所示的那样简单,我会简单地添加一些空行,这样中间和右边的列就有相同的长度。3这是一个很糟糕的解决方法,但总比什么都没有好; -)
nzrxty8p4#
我又发现了这个问题-我面对这个问题...
您也可以使用相反的小部件(Row-〉Column Column-〉Row)作为 Package 器,并在那里指定'MainAxisAlignment.start'。