Flutter中如何让Container占据最小宽度？

我在Flutter中自定义BottomNavigationBar时遇到了布局问题，现有实现代码如下：

bottomNavigationBar: Container(
  margin: const EdgeInsets.fromLTRB(25, 0, 25, 25),
  padding: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(50),
    color: const Color.fromARGB(255, 25, 30, 32),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(
        child: Container(
          padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(50),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Icon(Icons.home_filled),
              Text("Home"),
            ],
          ),
        ),
      ),
      const Padding(
        padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
        child: Icon(Icons.document_scanner, color: Colors.white),
      ),
      const Padding(
        padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
        child: Icon(Icons.person, color: Colors.white),
      ),
    ],
  ),
);

当前代码的Container会占满父组件宽度，内部Row也会占据全部可用空间。我想要实现的效果是：Container自适应内容的最小宽度，不占满整个可用宽度，同时组件之间没有多余空隙。尝试过设置Row的mainAxisSize为MainAxisSize.min、移除Expanded，都没达到预期。

移除Expanded后，选中的Home项宽度收缩，但导航栏整体仍有多余空隙，组件间间距不符合需求；预期效果是导航栏整体宽度贴合内容，选中项与其他图标之间紧凑排列，无多余空隙。

解决方法 #

针对问题核心调整布局参数，修改后的完整代码如下：

bottomNavigationBar: Container(
  margin: const EdgeInsets.fromLTRB(25, 0, 25, 25),
  padding: const EdgeInsets.all(8),
  alignment: Alignment.center, // 让Container自适应内容宽度并居中内部Row
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(50),
    color: const Color.fromARGB(255, 25, 30, 32),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min, // 保持Row自适应内容宽度
    mainAxisAlignment: MainAxisAlignment.center, // 替换spaceBetween避免强制分散
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Container( // 移除Expanded，保留自身内容宽度
        padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(50),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(Icons.home_filled),
            Text("Home"),
          ],
        ),
      ),
      const SizedBox(width: 20), // 手动控制组件间距，替代spaceBetween的空隙
      const Padding(
        padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
        child: Icon(Icons.document_scanner, color: Colors.white),
      ),
      const SizedBox(width: 20),
      const Padding(
        padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
        child: Icon(Icons.person, color: Colors.white),
      ),
    ],
  ),
);

关键调整说明 #

• 添加alignment: Alignment.center：让Container不再填充父组件宽度，而是由内部Row的宽度决定，同时将导航栏居中显示在底部区域
• 移除Expanded：避免Home项被强制拉伸，保持其自身内容的宽度
• 替换mainAxisAlignment: MainAxisAlignment.spaceBetween为MainAxisAlignment.center，并通过SizedBox手动设置组件间距，确保整体布局紧凑，无多余空隙

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