Flutter Row布局如何实现左侧放复选框和记住密码、右侧放忘记密码？

使用Flutter内置的Spacer组件即可实现需求，Spacer会自动填充Row布局内的剩余可用空间，无需手动设置固定尺寸，可自适应不同屏幕宽度。

修改后代码： #

Row(
  children: [
    Checkbox(
      value: isChecked,
      onChanged: (bool? value) {
        setState(() {
          isChecked = value!;
        });
      },
    ),
    const Text(
      'Remember Password',
    ),
    // 新增Spacer填充剩余空间
    const Spacer(),
    const Text(
      'Forgot Password',
    ),
  ],
)

补充可选方案 #

你也可以选择用Expanded包裹右侧的「Forgot Password」文本，同时设置文本右对齐，效果一致：

Row(
  children: [
    Checkbox(
      value: isChecked,
      onChanged: (bool? value) {
        setState(() {
          isChecked = value!;
        });
      },
    ),
    const Text(
      'Remember Password',
    ),
    Expanded(
      child: const Text(
        'Forgot Password',
        textAlign: TextAlign.right,
      ),
    ),
  ],
)

两种方案都能实现目标布局，优先推荐Spacer方案，逻辑更直观、代码更简洁。

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