如何让ElevatedButton内的Row组件尽可能紧凑？

要让Row组件尽可能紧凑，核心是修改Row的布局行为，同时优化加载指示器的显示效果，具体修改如下：

修改后的代码 #

ElevatedButton(
  child: waitingForTheUpdateToComplete
      ? Row(
          mainAxisSize: MainAxisSize.min, // 关键：让Row仅包裹子元素，不占满宽度
          children: [
            SizedBox(
              child: CircularProgressIndicator(
                color: Colors.white,
                strokeWidth: 2,
              ),
              width: 16, // 调整尺寸，确保指示器正常显示
              height: 16,
            ),
            SizedBox(width: 8), // 添加间距，优化视觉体验
            Text('$sValue  ${widget.unit ?? ''}'),
          ],
        )
      : Text('$sValue  ${widget.unit ?? ''}'),
  onPressed: () => edit(context),
);

关键修改说明 #

• mainAxisSize: MainAxisSize.min：Row组件默认的mainAxisSize是MainAxisSize.max，会自动占满父组件的可用宽度。设置为min后，Row只会根据子元素的总宽度来调整自身宽度，实现紧凑布局。
• 调整CircularProgressIndicator的容器尺寸：原代码中宽高设为5会导致加载指示器显示不全，调整为16左右能保证指示器清晰可见，同时不会占用过多空间。
• 添加子元素间距：在指示器和文本之间加入SizedBox(width: 8)，避免元素拥挤，提升界面美观度。

内容的提问来源于stack exchange，提问作者Stéphane de Luca