Flutter实现文本与TextField同行布局及可编辑文本需求

针对你需要实现「文本与TextField同行且自动换行」的需求，以下是两种可行的解决方案：

方案一：用RichText嵌入TextField（实时行内输入） #

通过RichText的WidgetSpan把TextField作为文本的一部分嵌入，这样输入框会跟随文本自动换行，同时解决布局错误问题，还能保持文本基线对齐：

RichText(
  text: TextSpan(
    // 继承当前上下文的默认文本样式
    style: DefaultTextStyle.of(context).style,
    children: [
      const TextSpan(text: 'I '),
      WidgetSpan(
        // 对齐文本基线，避免输入框与文本错位
        alignment: PlaceholderAlignment.baseline,
        baseline: TextBaseline.alphabetic,
        child: SizedBox(
          // 设置输入框默认宽度，也可用IntrinsicWidth自适应内容
          width: 120,
          child: TextField(
            decoration: InputDecoration(
              border: UnderlineInputBorder(),
              isDense: true, // 压缩输入框高度，贴合文本
              contentPadding: EdgeInsets.symmetric(vertical: 2),
              hintText: 'Name',
              hintStyle: TextStyle(color: Colors.grey),
            ),
          ),
        ),
      ),
      const TextSpan(text: ' hereby says this. Here the text will come and it will cover up to 10 or more lines and will have textfields in the middle somewhere like in the example.'),
    ],
  ),
)

关键优化点：

• WidgetSpan让TextField完全融入文本流，自动跟随换行
• 配置alignment和baseline保证输入框与文本垂直对齐
• 用isDense和contentPadding缩小输入框高度，模拟下划线输入的视觉效果

方案二：长按编辑占位符（非实时输入，排版更整洁） #

如果不需要实时行内输入，可采用「静态文本+长按编辑」的方案，避免输入框破坏文本排版：

// 状态变量存储用户输入的姓名
String userName = '';

GestureDetector(
  onLongPress: () async {
    // 弹出编辑对话框
    final newName = await showDialog<String>(
      context: context,
      builder: (context) {
        final controller = TextEditingController(text: userName);
        return AlertDialog(
          title: const Text('编辑姓名'),
          content: TextField(
            controller: controller,
            decoration: const InputDecoration(hintText: '请输入姓名'),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('取消'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, controller.text),
              child: const Text('保存'),
            ),
          ],
        );
      },
    );
    // 更新姓名状态
    if (newName != null) {
      setState(() => userName = newName);
    }
  },
  child: RichText(
    text: TextSpan(
      style: DefaultTextStyle.of(context).style,
      children: [
        const TextSpan(text: 'I '),
        TextSpan(
          // 显示占位符或已输入的姓名
          text: userName.isEmpty ? '___________' : userName,
          style: const TextStyle(
            decoration: TextDecoration.underline,
            color: Colors.blue,
            fontWeight: FontWeight.w500,
          ),
        ),
        const TextSpan(text: ' hereby says this. Here the text will come and it will cover up to 10 or more lines and will have editable fields in the middle somewhere like in the example.'),
      ],
    ),
  ),
)

适用场景：

• 文本以展示为主，仅需偶尔修改姓名、日期等字段
• 追求更整洁的排版，避免输入框干扰文本阅读

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