Flutter自定义Checkbox组件复选框无法右对齐问题求助

问题原因 #

你的Row组件默认会包裹子元素的总宽度，没有撑满父容器的可用宽度，所以依赖剩余空间分配的MainAxisAlignment.spaceBetween、Spacer、Align等配置都不会生效。

解决方案1：强制Row撑满父容器宽度 #

给Row外层套一个宽度为double.infinity的SizedBox，让Row占满可用宽度后，spaceBetween就能正常生效，修改后代码如下：

@override
Widget build(BuildContext context) {
 return Padding(
  padding: const EdgeInsets.all(16.0),
  child: SizedBox(
    width: double.infinity,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(widget.label, style: Theme.of(context).textTheme.headline4),
        Checkbox(
          activeColor: LightSeaGreen,
          checkColor: White,
          value: _checkbox,
          onChanged: (value) {
            setState(() {
              _checkbox = !_checkbox;
            });
            widget.onChanged(value);
          },
        ),
      ],
    ),
  ),
);

解决方案2：给文本组件包裹Expanded #

直接给Text组件套一层Expanded，让文本区域自动占满Row内除Checkbox外的所有剩余空间，也能实现复选框右对齐效果，代码如下：

@override
Widget build(BuildContext context) {
 return Padding(
  padding: const EdgeInsets.all(16.0),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(child: Text(widget.label, style: Theme.of(context).textTheme.headline4)),
      Checkbox(
        activeColor: LightSeaGreen,
        checkColor: White,
        value: _checkbox,
        onChanged: (value) {
          setState(() {
            _checkbox = !_checkbox;
          });
          widget.onChanged(value);
        },
      ),
    ],
  ),
);

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