Flutter布局问题：如何让文本居左、CheckBox居右并拉开间距

嘿，我来帮你搞定这个布局小问题～你现在的情况是Row里的文本和CheckBox虽然分别靠左、靠右，但中间挤得太近，没有足够的空隙。这里有几个简单有效的解决办法：

方法1：用MainAxisAlignment.spaceBetween #

这是最直接的方式，让Row的子元素分别贴紧左右两端，中间自动填充最大间距：

var _valueC = false;

void onChecked(bool value) {
  setState(() {
    _valueC = value;
    print('value: $value');
  });
}

Card(
  child: Container(
    // 给Container加左右内边距，避免内容贴Card边缘
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween, // 关键配置
      children: [
        Text("你的目标文本内容"),
        Checkbox(
          value: _valueC,
          onChanged: onChecked,
        ),
      ],
    ),
  ),
)

方法2：用Expanded包裹文本 #

如果你的文本可能较长需要换行，用Expanded包裹文本组件，它会占据CheckBox以外的所有可用空间，自然把CheckBox推到最右侧：

Card(
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    child: Row(
      children: [
        Expanded(
          child: Text("你的目标文本内容，即使很长也会自动换行，不会挤到CheckBox"),
        ),
        Checkbox(
          value: _valueC,
          onChanged: onChecked,
        ),
      ],
    ),
  ),
)

方法3：添加Spacer组件 #

如果需要更灵活的空间控制，在文本和CheckBox之间插入Spacer，它会自动填充两者之间的剩余空间：

Card(
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    child: Row(
      children: [
        Text("你的目标文本内容"),
        Spacer(), // 自动填充中间空隙
        Checkbox(
          value: _valueC,
          onChanged: onChecked,
        ),
      ],
    ),
  ),
)

这三种方法都能满足你的需求，你可以根据文本长度、布局灵活性来选择最合适的方式～另外给Container添加左右内边距是为了让整体布局更美观，避免内容紧贴Card的边缘哦。

内容的提问来源于stack exchange，提问作者Hasan A Yousef