Flutter基础（控制器）

第1步：找个遥控器（创建控制器）​

// 就像买新遥控器要装电池
TextEditingController myController = TextEditingController();

​​第2步：连上你的玩具（绑定到组件）​​

TextField(
  controller: myController, // 把遥控器绑到输入框
  decoration: InputDecoration(labelText: "写点东西..."),
)

​​第3步：用遥控器控制（操作组件）​​

// 比如点按钮时获取输入框文字
onPressed: () {
  String text = myController.text; // 读取内容
  print("你写了：$text");
  
  myController.clear(); // 清空输入框（就像按复位键）
}

​​第4步：不用时关掉（避免卡顿）​​

// 就像玩具玩完要关电源
@override
void dispose() {
  myController.dispose(); // 关闭控制器
  super.dispose();
}

完整代码例子

import 'package:flutter/material.dart';

void main() {
  // 启动应用，根组件为 MyApp
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // 创建 Material 风格应用框架
    return MaterialApp(
      title: '控制器示例',
      home: Scaffold(
        appBar: AppBar(title: const Text('文本控制器演示')),
        body: const Center(child: TextEditorDemo()), // 主页面内容
      ),
    );
  }
}

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

  @override
  State<TextEditorDemo> createState() => _TextEditorDemoState();
}

class _TextEditorDemoState extends State<TextEditorDemo> {
  // 1. 创建控制器实例
  final TextEditingController _controller = TextEditingController();
  String _displayText = ""; // 存储显示文本

  @override
  void initState() {
    super.initState();
    // 2. 监听输入变化（可选）
    _controller.addListener(() {
      print("实时输入: ${_controller.text}"); // 控制台打印输入内容[6](@ref)
    });
  }

  @override
  void dispose() {
    // 5. 销毁控制器（必须！避免内存泄漏）
    _controller.dispose(); // 释放控制器资源[1,6](@ref)
    super.dispose();
  }

  void _updateText() {
    // 3. 使用控制器获取输入内容
    setState(() {
      _displayText = _controller.text; // 更新显示文本
    });
  }

  void _clearText() {
    // 4. 使用控制器清空输入
    _controller.clear(); // 清空文本框内容[1](@ref)
    setState(() => _displayText = "");
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 文本输入框绑定控制器
          TextField(
            controller: _controller, // 绑定控制器到输入框[5](@ref)
            decoration: const InputDecoration(
              labelText: "输入内容",
              border: OutlineInputBorder(),
              suffixIcon: Icon(Icons.edit),
            ),
            onSubmitted: (value) => _updateText(), // 键盘提交时触发
          ),
          const SizedBox(height: 20),
          // 显示控制器获取的文本
          Text(
            "当前内容: $_displayText",
            style: const TextStyle(fontSize: 18, color: Colors.blue),
          ),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              // 更新文本按钮
              ElevatedButton(
                onPressed: _updateText, // 点击时更新显示文本
                child: const Text("显示内容"),
              ),
              // 清空按钮
              ElevatedButton(
                onPressed: _clearText, // 点击时清空文本[1](@ref)
                style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                child: const Text("清空"),
              ),
            ],
          ),
        ],
      ),
    );
  }
}