Flutter中消除Row内图片与文本间间距的问题求助

我是一名移动端开发新手，在Flutter代码中遇到图片与文本之间出现多余间距的问题，尝试过YouTube及网上的多种方案仍未解决，期望实现文本向左靠近图片的效果。

我的代码如下：

class listBerita extends StatelessWidget {
  const listBerita({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Column(
        children: [
          Container(
              width: 336,
              height: 80,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Image.network(
                      "https://loremflickr.com/320/240",
                      height: 80,
                      width: 80,
                    ),
                    Padding(
                        padding: const EdgeInsets.all(5),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Kategori",
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w700,
                                color: Colors.blue,
                              ),
                            ),
                            SizedBox(height: 10),
                            Text(
                              "Lorem ipsum dolor sit.",
                              style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                            SizedBox(height: 5),
                            Text(
                              "Author • 23 Mei 2023",
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ],
                        )),
                  ])),
        ],
      ),
    );
  }
}

期望效果：图片右侧的文本紧贴图片边缘，无多余空隙，整体布局紧凑，文本左对齐贴近图片。

问题分析与解决方案 #

问题核心在于Row的mainAxisAlignment: MainAxisAlignment.spaceBetween属性，这个配置会让子组件分别靠向容器左右两端，直接导致图片和文本列之间出现大间距。同时微调内边距和图片填充方式，能让布局更贴合预期：

• 调整Row主轴对齐方式：移除MainAxisAlignment.spaceBetween（默认就是MainAxisAlignment.start），让图片和文本列靠左紧凑排列。
• 优化文本列内边距：将Padding的EdgeInsets.all(5)改为EdgeInsets.only(left: 8, top:5, bottom:5, right:5)，减少左侧冗余间距，让文本更贴近图片。
• 完善图片填充：给Image添加fit: BoxFit.cover，确保图片完全填满80x80容器，避免图片自身留白。

修改后的完整代码 #

class listBerita extends StatelessWidget {
  const listBerita({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Column(
        children: [
          Container(
              width: 336,
              height: 80,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Row(
                  children: [
                    Image.network(
                      "https://loremflickr.com/320/240",
                      height: 80,
                      width: 80,
                      fit: BoxFit.cover,
                    ),
                    Padding(
                        padding: const EdgeInsets.only(left: 8, top:5, bottom:5, right:5),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Kategori",
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w700,
                                color: Colors.blue,
                              ),
                            ),
                            SizedBox(height: 10),
                            Text(
                              "Lorem ipsum dolor sit.",
                              style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                            SizedBox(height: 5),
                            Text(
                              "Author • 23 Mei 2023",
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ],
                        )),
                  ])),
        ],
      ),
    );
  }
}

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