Flutter Column垂直空间分配：价格置于商品名下方、ADD按钮定位商品图底部居中

问题根因 #

• 价格错位的核心是布局结构拆分错误：现有布局把商品名和右侧商品图片放在同一个水平Row里，Row的高度会被高度更高的图片撑满，而价格组件被放到了整个Row的外部，等Row渲染完成后才会绘制价格，导致价格的垂直位置被推到Row的底部，和商品名的间距被图片高度拉开。这和Column设置的mainAxisAlignment.start没有关联——这个属性只控制Column直接子节点的垂直排布规则，管不到子节点内部的结构错位。
• ADD按钮位置不对的原因是Stack的默认对齐规则：Stack默认按Alignment.topStart摆放子元素，也就是所有子组件默认靠左上角贴齐，当前ADD按钮没设置对齐属性，自然就飘在图片左上角，落不到底部居中的位置。

修改要点 #

• 把左侧的商品名、价格文本打包成独立的小Column，作为外层Row的第一个子节点，替换原来单独放商品名Text的写法。让价格作为这个小Column的第二个子节点，紧跟商品名渲染，就能实现价格紧贴商品名正下方的效果。
• 删掉原来放在Row外部的价格组件，避免重复渲染。
• 给包裹图片和ADD按钮的Stack加上alignment: Alignment.bottomCenter，ADD按钮就会自动对齐到图片区域的底部居中位置，不需要额外嵌套Positioned组件。
• 保持外层Row的crossAxisAlignment: CrossAxisAlignment.start设置，让左侧文本块和右侧图片都从Row顶部开始对齐，避免文本块被自动垂直居中。

调整后的核心代码参考 #

ListView.builder(
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  itemBuilder: (ctx, i) => restaurantItems[i].quantity <= 0
      ? const Center()
      : Padding(
          padding: const EdgeInsets.only(left: 15, bottom: 8, top: 1),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 10, top: 10),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 左侧文本块：商品名+价格
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          '${restaurantItems[i].name}',
                          style: const TextStyle(
                              fontSize: 17,
                              color: kTextColor,
                              fontWeight: FontWeight.w700),
                        ),
                        const SizedBox(height: 6),
                        Text(
                          '₹${restaurantItems[i].price}',
                          style: const TextStyle(
                              fontSize: 15,
                              color: kTextColor,
                              fontWeight: FontWeight.w400),
                        ),
                      ],
                    ),
                    // 右侧图片+ADD按钮块
                    Padding(
                      padding: const EdgeInsets.only(right: 20),
                      child: Stack(
                        alignment: Alignment.bottomCenter,
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child: Image.network(
                              restaurantItems[i].imageUrl,
                              height: size.width * 0.28,
                              width: size.width * 0.26,
                              fit: BoxFit.cover,
                            ),
                          ),
                          Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.black87,
                            ),
                            child: Padding(
                              padding: const EdgeInsets.only(
                                  left: 9, top: 3, right: 5, bottom: 3),
                              child: InkWell(
                                splashColor: Colors.white,
                                onTap: () {
                                  print(restaurantItems[i].name);
                                  cart.addItem(
                                    restaurantItems[i].id,
                                    restaurantItems[i].name,
                                    restaurantItems[i].price,
                                    restaurant,
                                  );
                                },
                                child: const Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Text(
                                      'ADD',
                                      style: TextStyle(
                                        color: Colors.white,
                                      ),
                                    ),
                                    Icon(
                                      Icons.add,
                                      color: Colors.white,
                                      size: 17,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
  itemCount: restaurantItems.length,
)

内容的提问来源于stack exchange，提问作者mustafa zaki