Flutter Widget 进阶指南：处理 onChanged 回调并使用 TextEditingController

2024-01-13 04:16:35

引言

在上一篇中，我们了解了常用的Widget。这一篇，我们从实际案例出发，来深入学习下Widget。

处理 onChanged 回调

onChanged回调函数是Flutter中一个非常有用的工具，它允许我们监听文本字段或其他控件的更改。当用户在文本字段中输入内容时，onChanged回调函数就会被触发，我们可以利用这个回调函数来更新UI或执行其他操作。

例如，我们可以使用onChanged回调函数来实现一个简单的计数器。当用户点击按钮时，计数器会增加1。

import 'package:flutter/material.dart';

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

提供一个TextEditingController

TextEditingController是一个Flutter类，它允许我们控制文本字段中的文本。我们可以使用TextEditingController来设置文本字段的初始值，也可以使用它来获取用户输入的内容。

例如，我们可以使用TextEditingController来实现一个简单的文本编辑器。

import 'package:flutter/material.dart';

class TextEditorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _textController,
            ),
            Text(
              _textController.text,
            ),
          ],
        ),
      ),
    );
  }
}