如何在Flutter TextField中实现三星笔记App的checkbox功能？

要实现类似三星笔记里在输入框中嵌入可交互Checkbox的效果，你可以通过富文本编辑+自定义文本控制器的方式来实现，以下是具体步骤和示例：

核心思路 #

利用Flutter的EditableText（TextField的底层组件）配合TextSpan嵌入WidgetSpan来渲染Checkbox，同时通过自定义控制器管理文本内容和Checkbox的选中状态，实现点击切换。

1. 定义Checkbox状态管理类 #

先创建一个类来存储每个Checkbox的选中状态和对应文本：

class CheckboxItem {
  bool isChecked;
  String text;

  CheckboxItem({required this.isChecked, required this.text});
}

2. 自定义富文本编辑控制器 #

创建继承自TextEditingController的控制器，负责生成包含Checkbox的TextSpan并处理状态更新：

class CheckboxTextController extends TextEditingController {
  final List<CheckboxItem> items = [];

  @override
  TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {
    final children = <InlineSpan>[];
    for (var i = 0; i < items.length; i++) {
      final item = items[i];
      children.add(
        WidgetSpan(
          child: GestureDetector(
            onTap: () {
              items[i].isChecked = !items[i].isChecked;
              notifyListeners();
            },
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Checkbox(
                  value: item.isChecked,
                  onChanged: (val) {
                    items[i].isChecked = val ?? false;
                    notifyListeners();
                  },
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ),
                Text(item.text, style: style),
              ],
            ),
          ),
        ),
      );
      if (i != items.length - 1) {
        children.add(const TextSpan(text: '\n'));
      }
    }
    return TextSpan(style: style, children: children);
  }

  void addCheckboxItem(String text) {
    items.add(CheckboxItem(isChecked: false, text: text));
    notifyListeners();
  }
}

3. 构建UI界面 #

使用EditableText渲染富文本内容，配合自定义控制器和添加按钮：

class CheckboxTextFieldDemo extends StatefulWidget {
  const CheckboxTextFieldDemo({super.key});

  @override
  State<CheckboxTextFieldDemo> createState() => _CheckboxTextFieldDemoState();
}

class _CheckboxTextFieldDemoState extends State<CheckboxTextFieldDemo> {
  final _controller = CheckboxTextController();
  final _textController = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    _textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("三星笔记风格Checkbox输入")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 带Checkbox的可编辑区域
            Container(
              padding: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(4),
              ),
              child: EditableText(
                controller: _controller,
                focusNode: FocusNode(),
                style: const TextStyle(fontSize: 16),
                cursorColor: Colors.blue,
                backgroundCursorColor: Colors.grey,
              ),
            ),
            const SizedBox(height: 16),
            // 添加待办项的输入栏
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _textController,
                    decoration: const InputDecoration(hintText: "输入待办内容"),
                  ),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: () {
                    if (_textController.text.isNotEmpty) {
                      _controller.addCheckboxItem(_textController.text);
                      _textController.clear();
                    }
                  },
                  child: const Text("添加待办"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

4. 优化与替代方案 #

• 样式适配：可以自定义Checkbox的大小、填充色，匹配三星笔记的视觉风格；
• 第三方库捷径：如果需要更复杂的富文本编辑能力，推荐使用flutter_quill或rich_text_editor，这类库内置了Checkbox组件，集成效率更高；
• 交互优化：可添加手势或快捷键快速插入Checkbox，提升操作流畅度。

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