无法在Row组件中嵌套FormBuilderCheckbox的问题求助

你遇到的问题是因为直接在FormBuilder的child中使用Row组件，导致布局约束冲突——Row是水平无边界的布局组件，而FormBuilder对其子组件有特定的尺寸约束，两者叠加就会触发运行时错误。而且你的需求完全不需要把复选框和条款文本拆成两个独立组件，正确的做法是把可点击的条款文本整合到FormBuilderCheckbox的title属性里。

修正后的代码 #

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:url_launcher/url_launcher.dart';

class HauntedHouse extends StatefulWidget {
  @override
  _HauntedHouseState createState() => _HauntedHouseState();
}

class _HauntedHouseState extends State<HauntedHouse> {
  final _formKey = GlobalKey<FormBuilderState>();

  // 封装条款跳转方法，代码更清晰
  Future<void> _launchTermsUrl() async {
    final url = Uri.parse('https://www.youtube.com/');
    if (!await launchUrl(url)) {
      throw '无法打开链接 $url';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Haunted House'),
        centerTitle: true,
        backgroundColor: Colors.blue[400],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormBuilder(
          key: _formKey,
          onChanged: () {
            _formKey.currentState!.save();
            debugPrint(_formKey.currentState!.value.toString());
          },
          autovalidateMode: AutovalidateMode.disabled,
          skipDisabled: true,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              FormBuilderCheckbox(
                name: 't_and_c',
                // 将可点击文本作为复选框的title
                title: InkWell(
                  child: const Text(
                    '我已阅读并同意条款与条件',
                    style: TextStyle(color: Colors.blue),
                  ),
                  onTap: _launchTermsUrl,
                ),
                validator: (value) {
                  if (value == false) {
                    return '请同意条款与条件';
                  }
                  return null;
                },
              ),
              // 可以添加其他表单字段
            ],
          ),
        ),
      ),
    );
  }
}

关键修改点说明 #

• 整合可点击文本到复选框标题：把InkWell直接放在FormBuilderCheckbox的title属性中，既保留了复选框的勾选功能，又实现了点击文本跳转的需求，避免了Row带来的布局冲突。
• 添加布局约束：用Padding和Column包裹FormBuilder的子组件，让表单内容有合适的边距，同时Column的垂直布局符合FormBuilder的约束要求。
• 封装跳转方法：把链接跳转逻辑抽成单独的方法，代码更易维护，还能处理跳转失败的情况。
• 添加验证器：给复选框加上验证，确保用户必须勾选才能提交表单，符合条款勾选的常见需求。

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