Flutter开发中如何在Text组件内添加TextField组件？

Flutter 原生的 Text 组件不支持直接嵌套其他组件，要实现类似填空题的文本+输入框行内混排效果，推荐使用 RichText 搭配 WidgetSpan 实现，该方案可以让输入框和文本自然融入同一行文本流：

核心实现代码 #

import 'package:flutter/material.dart';

class FillInBlankDemo extends StatelessWidget {
  const FillInBlankDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: RichText(
          text: TextSpan(
            style: const TextStyle(fontSize: 16, color: Colors.black87),
            children: [
              // 前面的文本
              const TextSpan(text: "我想要在"),
              // 嵌入的输入框
              WidgetSpan(
                alignment: PlaceholderAlignment.middle,
                child: SizedBox(
                  width: 70,
                  height: 28,
                  child: TextField(
                    style: const TextStyle(fontSize: 16),
                    decoration: const InputDecoration(
                      isDense: true,
                      contentPadding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
                      border: UnderlineInputBorder(),
                    ),
                  ),
                ),
              ),
              const TextSpan(text: "组件中添加"),
              WidgetSpan(
                alignment: PlaceholderAlignment.middle,
                child: SizedBox(
                  width: 70,
                  height: 28,
                  child: TextField(
                    style: const TextStyle(fontSize: 16),
                    decoration: const InputDecoration(
                      isDense: true,
                      contentPadding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
                      border: UnderlineInputBorder(),
                    ),
                  ),
                ),
              ),
              const TextSpan(text: "组件，实现行内填空效果。"),
            ],
          ),
        ),
      ),
    );
  }
}

关键配置说明 #

• PlaceholderAlignment.middle 可以保证输入框和相邻文本垂直居中对齐，避免出现上下错位
• 外层的 SizedBox 用于控制填空区域的宽度，可根据实际业务需要调整尺寸
• InputDecoration 中设置 isDense: true 可以压缩输入框的默认内边距，让输入框高度和文本高度更匹配

如果需要支持多行自动换行的多填空场景，可以使用 Wrap 组件拼接文本和输入框：

Wrap(
  crossAxisAlignment: WrapCrossAlignment.center,
  spacing: 4,
  children: const [
    Text("I want to "),
    SizedBox(
      width: 80,
      height: 28,
      child: TextField(
        decoration: InputDecoration(isDense: true, border: UnderlineInputBorder()),
      ),
    ),
    Text(" textfield in a text widget."),
  ],
)

内容的提问来源于stack exchange，提问作者malozyali - Yalçın