Flutter GridView布局异常求助：图片、样式与对齐失效

以下是针对你提出的4个问题的修复代码及对应的解决说明：

修改后的完整代码 #

Scaffold(
  backgroundColor: Color(0xFFf8f9f8),
  body: SafeArea(
    child: GridView.count(
      primary: false,
      padding: const EdgeInsets.all(20),
      childAspectRatio: (itemWidth / itemHeight),
      crossAxisSpacing: 10,
      mainAxisSpacing: 20,
      crossAxisCount: 2,
      children: productsList,
    ),
  ),
);

for (var product in products) {
  late String image;
  if (product["image"] == null) {
    image = backend + "/pm" + "/assets/images/null.png";
  } else {
    image = backend + "/pm" + product["image"];
  }
  productsList.add(
    Container(
      width: double.infinity, // 确保容器占满网格项宽度
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        color: Colors.white, // 将背景色移到decoration中
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: double.infinity,
            height: 120, // 固定图片容器高度，可按需调整
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15.0),
                topRight: Radius.circular(15),
              ),
            ),
            clipBehavior: Clip.hardEdge, // 开启裁剪，让图片适配圆角
            child: Image.network(
              image,
              fit: BoxFit.cover, // 让图片填充容器，遵循设置的尺寸
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  product["name"],
                  style: TextStyle(color: Colors.black),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween, // 让两个子组件左右分布
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            product["selling"].toString(),
                            style: TextStyle(
                              color: color_bluepurple,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(15)),
                              color: Color(0xFFf8f9f8),
                            ),
                            padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4), // 添加内边距避免文字贴边
                            child: Text(
                              product["quantity"].toString() + " Packs",
                              style: TextStyle(color: Colors.grey),
                            ),
                          )
                        ],
                      ),
                    ),
                    SizedBox(width: 8), // 添加间距避免按钮与文字拥挤
                    GestureDetector(
                      onTap: () {
                        print("Product pressed");
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(15)),
                          color: Color(0xFFf5f4fe),
                          border: Border.all(
                            color: Color(0xFFc0b8f4),
                            width: 1,
                          ),
                        ),
                        padding: EdgeInsets.all(8), // 添加内边距让图标不贴边
                        child: Icon(Icons.open_in_browser, color: color_bluepurple),
                      ),
                    )
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    ),
  );
}

各问题修复说明 #

• 问题1：图片不遵循设置的尺寸
  给Image.network添加fit: BoxFit.cover，让图片填充父容器；同时给图片的父Container设置固定宽高（如width: double.infinity, height: 120），强制图片按容器尺寸显示，避免自动拉伸或缩小。

• 问题2：图片圆角未生效
  给图片的父Container添加clipBehavior: Clip.hardEdge，开启裁剪功能，这样图片会被容器的圆角裁剪，不会溢出显示。

• 问题3：网格项主容器背景色未生效
  将主Container的color: Colors.white移到BoxDecoration的color属性中，因为当Container同时设置decoration和单独的color时，单独的color会被decoration覆盖，无法生效。

• 问题4：产品名称及价格未左对齐

  1. 给主Container添加width: double.infinity，确保容器占满网格项的宽度，让内部Column的crossAxisAlignment: CrossAxisAlignment.start能真正让子组件左对齐。
  2. 将Row中的第一个Column用Expanded包裹，让它占据Row的剩余空间，避免和右侧按钮挤在一起；同时给Row添加mainAxisAlignment: MainAxisAlignment.spaceBetween，让左右组件分布更合理。

内容的提问来源于stack exchange，提问作者Kyle Andrew