Flutter实现Checkbox与文本同行布局及多child排列问题

要让Checkbox与文本同行显示，只需将Checkbox和目标文本用Row组件包裹，替换原Column中单独的Text组件即可。修改后的完整代码如下：

child: Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(25.0),
    boxShadow: [
      BoxShadow(color: Colors.grey[500], blurRadius: 3.0, spreadRadius: 1.0),
    ],
  ),
  width: data.size.width * 0.26,
  height: data.size.width * 0.26 * 1.2,
  padding: EdgeInsets.all(data.size.width * 0.02),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      // 用Row包裹Checkbox和文本，实现同行显示
      Row(
        crossAxisAlignment: CrossAxisAlignment.center, // 垂直方向居中对齐
        children: [
          Checkbox(
            checkColor: Colors.white,
            value: isChecked,
            onChanged: (bool value) {
              setState(() {
                isChecked = value;
              });
            },
          ),
          Text(
            'Title Here',
            style: TextStyle(color: Colors.black87, fontSize: data.size.width * 0.02, fontWeight: FontWeight.bold),
          ),
        ],
      ),
      AvatarLetter(
        size: 100,
        backgroundColor: getBackColor(),
        textColor: Colors.white,
        fontSize: 40,
        upperCase: true,
        numberLetters: 3,
        letterType: LetterType.Circular,
        text: this.type,
        backgroundColorHex: null,
        textColorHex: null,
      ),
      Text(
        this.Type ?? '',
        textAlign: TextAlign.center,
        style: TextStyle(color: Colors.black87, fontSize: data.size.width * 0.02, fontWeight: FontWeight.bold),
      ),
      Text(
        DateFormat('dd MMMM yyyy').format(DateTime.parse(this.inspectDetails.testDate)).toString(),
        style: TextStyle(
          color: Colors.grey[400],
          fontSize: data.size.width * 0.02,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

关键说明 #

• Row是Flutter实现水平排列组件的标准容器，能直接让Checkbox和文本处于同一行
• crossAxisAlignment: CrossAxisAlignment.center可确保Checkbox与文本在垂直方向居中对齐，避免视觉错位
• 保留原Column的mainAxisAlignment: MainAxisAlignment.spaceBetween，维持其他组件的垂直分布逻辑

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