Flutter 零基础入门（三十二）：TextField 输入框 —— 表单与用户输入必学

LarryLan

发布于 2026-01-29 12:47:22

2170

TextField 输入框 —— 表单与用户输入必学

到目前为止，你写的页面大多是：

展示文本
展示列表
点击按钮

但一个真正的 App，一定离不开：

输入账号密码
搜索内容
填写表单
编辑信息

📌 这些能力，都从 TextField 开始。

一、什么是 TextField？

一句话理解：

TextField = 让用户输入文字的组件

它是 Flutter 中最重要的交互组件之一。

二、最简单的 TextField

TextField()

运行后你会看到：

一个输入框
可以点击并输入文字
自动弹出键盘

📌 但这只是“能用”，还远远不够。

三、给输入框加提示（hintText）

1️⃣ 使用 InputDecoration

TextField(
  decoration: InputDecoration(
    hintText: '请输入用户名',
  ),
)

📌 hintText 的作用：

提示用户要输入什么
输入后自动消失

2️⃣ 加上边框（常见）

TextField(
  decoration: InputDecoration(
    hintText: '请输入用户名',
    border: OutlineInputBorder(),
  ),
)

这就是你最常见到的输入框样式。

四、获取用户输入内容（非常重要）

光能输入还不够，我们必须拿到输入的内容。

五、TextEditingController（核心）

1️⃣ 定义 Controller

TextEditingController _controller = TextEditingController();

📌 通常定义在 State 中。

2️⃣ 绑定到 TextField

TextField(
  controller: _controller,
  decoration: InputDecoration(
    hintText: '请输入内容',
    border: OutlineInputBorder(),
  ),
)

3️⃣ 获取输入内容

print(_controller.text);

📌 至此，你已经完成：

用户输入 → 程序读取

六、一个完整示例：输入 + 按钮

class InputDemo extends StatefulWidget {
  @override
  _InputDemoState createState() => _InputDemoState();
}

class _InputDemoState extends State<InputDemo> {
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('输入示例')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: '请输入内容',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                print(_controller.text);
              },
              child: Text('获取输入'),
            ),
          ],
        ),
      ),
    );
  }
}

📌 这是 登录 / 搜索 / 编辑页的基础模板。

七、常见输入类型设置

1️⃣ 密码输入

TextField(
  obscureText: true,
  decoration: InputDecoration(
    hintText: '请输入密码',
    border: OutlineInputBorder(),
  ),
)

2️⃣ 数字键盘

TextField(
  keyboardType: TextInputType.number,
)

3️⃣ 多行输入

TextField(
  maxLines: 4,
)

八、监听输入变化（onChanged）

TextField(
  onChanged: (value) {
    print(value);
  },
)

📌 区别：

方式	用途
controller	主动获取
onChanged	实时监听

九、多个输入框（表单雏形）

Column(
  children: [
    TextField(
      decoration: InputDecoration(hintText: '用户名'),
    ),
    SizedBox(height: 12),
    TextField(
      obscureText: true,
      decoration: InputDecoration(hintText: '密码'),
    ),
  ],
)

📌 到这里，你已经能写 登录页面结构 了。

十、一定要记得释放 Controller（重要）

在 StatefulWidget 中：

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

📌 原因：

Controller 是资源，需要手动释放

十一、新手最常踩的坑

❌ 忘记加 padding，输入框贴边 ❌ 多个输入框共用一个 controller ❌ 不释放 controller ❌ 在 build 中创建 controller ❌ TextField 放 Column 里溢出不滚动

十二、本篇你真正掌握了什么？

你已经学会：

TextField 的基本使用
输入框样式设置
获取用户输入
Controller 的正确用法
表单页面的基础结构

📌 从这一篇开始：

你写的已经是“可交互 App 页面”

十三、一句话总结

TextField 是交互的起点 Controller 是输入的桥梁

🔜 下一篇预告

《Flutter 零基础入门（三十三）：表单组件 Form —— 校验与提交》

下一篇我们将学习：

Form 组件
表单校验
登录页完整流程

🚀 真正进入“业务页面开发”阶段

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-01-26，如有侵权请联系 cloudcommunity@tencent.com 删除

textfield

本文分享自 Larry的Hub 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度