Flutter输入框及表单

封面图 • 2025-10-26 • Flutter

在 Flutter 中，输入框（Input Field）和表单（Form）是构建用户交互界面的重要部分。下面我将详细介绍如何在 Flutter 中使用 `TextField`、`TextFormField` 和 `Form` 组件来创建输入框及处理表单数据。

---

## 一、基本输入框：`TextField`

`TextField` 是一个简单的文本输入组件，适用于不需要验证或复杂逻辑的场景。

### 示例代码：

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 输入框示例')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            decoration: InputDecoration(
              labelText: '请输入内容',
              border: OutlineInputBorder(),
            ),
          ),
        ),
      ),
    );
  }
}
```

### 属性说明：
- `decoration`: 设置输入框的样式（如边框、提示文字等）
- `onChanged`: 当输入内容变化时触发
- `onSubmitted`: 当用户按下键盘上的“完成”按钮时触发

---

## 二、表单控件：`TextFormField`

`TextFormField` 是 `TextField` 的增强版本，专为表单设计，支持 **验证** 和 **自动保存状态**。

### 示例代码：

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 表单示例')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(labelText: '用户名'),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return '请输入用户名';
                    }
                    return null;
                  },
                ),
                SizedBox(height: 16),
                TextFormField(
                  decoration: InputDecoration(labelText: '密码'),
                  obscureText: true,
                  validator: (value) {
                    if (value == null || value.length < 6) {
                      return '密码至少6位';
                    }
                    return null;
                  },
                ),
                SizedBox(height: 24),
                ElevatedButton(
                  onPressed: () {
                    // 提交表单
                    final form = GlobalKey<FormState>();
                    if (form.currentState!.validate()) {
                      // 验证通过，可以提交数据
                      print("表单验证通过！");
                    }
                  },
                  child: Text('提交'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
```

### 关键点：

- 使用 `Form` 包裹多个 `TextFormField`
- 每个 `TextFormField` 可以设置 `validator` 进行验证
- 使用 `GlobalKey<FormState>()` 来访问表单状态
- `validate()` 方法用于触发表单验证

---

## 三、表单提交与数据获取

你可以通过 `FormState` 获取所有字段的值：

```dart
final _formKey = GlobalKey<FormState>();

// 在按钮点击事件中
if (_formKey.currentState!.validate()) {
  _formKey.currentState!.save(); // 保存表单数据
  // 获取数据
  String username = _usernameController.text;
  String password = _passwordController.text;
  print('用户名: $username, 密码: $password');
}
```

如果使用 `TextEditingController` 来控制输入内容：

```dart
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();

TextFormField(
  controller: _usernameController,
  ...
)
```

---

## 四、常见用法总结

| 组件 | 功能 | 是否支持验证 |
|------|------|----------------|
| `TextField` | 简单文本输入 | ❌ |
| `TextFormField` | 带验证的表单输入 | ✅ |
| `Form` | 包裹多个表单字段 | ✅ |
| `GlobalKey<FormState>` | 控制表单状态 | ✅ |

---

## 五、扩展功能建议

- **自动填充**：使用 `AutofillGroup` 或 `TextEditingValue`
- **多行输入**：使用 `TextFormField(maxLines: 3)`
- **数字输入**：使用 `keyboardType: TextInputType.number`
- **下拉选择**：使用 `DropdownButton`
- **复选框/单选按钮**：使用 `Checkbox` / `Radio`

---

如果你有具体的表单需求（例如注册页面、登录页面、动态表单等），我可以为你提供更详细的实现方案。欢迎继续提问！