使用控制器读取输入框

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 24 课，共 34 课。

onChanged 会监听每个字母。通常，你只想在按下按钮时获取文本，比如按下“添加”或“发送”按钮。为此，给输入框添加一个控制器：

final TextEditingController _controller = TextEditingController();

TextField(controller: _controller)

控制器保存在 State 中，和其他变量放在一起。它是 final，因为控制器始终不变，只有其中的文本会变化。_controller.text 是输入框当前保存的内容，_controller.clear() 会清空它。

void _send() {
  print(_controller.text);
  _controller.clear();
}

屏幕销毁时，也应该销毁控制器。dispose 就是用来做这件事的：State 销毁时，Flutter 会调用它。

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

挑战

中等

在 State 中添加一个 final TextEditingController _controller，并通过 controller: 将它传给输入框。
让 _add 将输入框中的文本显示为 Last added: Buy milk，然后清空输入框。
添加理论部分介绍的 dispose 方法。

亲手试试

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _last = 'nothing';

  void _add() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tasks')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'New task',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 12),
            ElevatedButton(onPressed: _add, child: const Text('Add')),
            const SizedBox(height: 24),
            Text('Last added: $_last', style: const TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}