如果图像看起来与示例相同,我想将右侧的列间隔开,但我已经尝试了所有3个spaceBetween,spaceEvenly和spaceAround,但似乎都不起作用。
这是我为项目写的代码
Widget foodItemCard(BuildContext context, FoodItem prod) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10), color: Colors.white),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 10, left: 10, bottom: 10),
child: Image(
image: AssetImage(prod.imageAddress),
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(prod.prodName),
sauceItemList(context, prod.sauceItems),
Text('${prod.prodPrice} VND')
],
),
),
],
),
),
);
}
Widget sauceItemList(BuildContext context, List<SauceItem> items) {
return Column(
children: List.generate(
items.length,
(index) => Row(
children: [
Container(
height: 15,
width: 15,
decoration: BoxDecoration(
shape: BoxShape.circle, color: Color(items[index].color)),
),
const SizedBox(
width: 10,
),
Text(
items[index].prodName,
style: TextStyle(color: Color(items[index].color)),
)
],
)),
);
}
2条答案
按热度按时间drnojrws1#
您必须使用
Expanded
或Flexible
小部件,让小部件根据flex值占用空间。完整代码:-
输出:-
lf5gs5x22#
食物项目卡片中的行会改变其主轴对齐以进行相应调整。例如,要使它居中,请尝试下面的代码
}
---输出为x1c 0d1x