flutter 编辑框TextEditingController功能示例

这是一段演示使用一个TextEditingController来管理文本内容的flutter Windows程序示例。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextField Example',
      home: Scaffold(
        appBar: AppBar(title: Text('TextField Example')),
        body: Center(
          child: MyForm(),
        ),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final TextEditingController _controller = TextEditingController();
  String _submittedText = ''; // 用于存储提交后的文本

  @override
  void dispose() {
    // 清理控制器
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              hintText: 'Enter your text',
              labelText: 'Text Field',
              border: OutlineInputBorder(),
            ),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              // 获取文本字段的内容并更新状态
              setState(() {
                _submittedText = _controller.text;
              });
            },
            child: Text('Submit'),
          ),
          // 显示提交后的文本内容
          Text(
            'Submitted text: $_submittedText',
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
    );
  }
}

以下是对这段代码的分析：

一、整体结构
这段代码是一个使用 Flutter 框架构建的简单应用程序。主要包含一个输入文本框（TextField）和一个提交按钮（ElevatedButton），用于获取用户输入的文本并显示提交后的内容。

二、代码详细分析

1. import ‘package:flutter/material.dart’;
   导入 Flutter 的 Material 设计风格的库，以便使用 Flutter 提供的各种 UI 组件和功能。

2. void main() { runApp(MyApp()); }
   main函数是应用程序的入口点。这里调用了runApp函数并传入一个MyApp实例，启动了 Flutter 应用程序。

3. class MyApp extends StatelessWidget {… }
   MyApp类是应用程序的根组件，继承自StatelessWidget，表示它是一个无状态的组件。
   build方法构建了应用程序的用户界面，返回一个MaterialApp实例。
   MaterialApp设置了应用程序的标题为’TextField Example’，并定义了应用的首页为一个包含 AppBar和Center的Scaffold。
   AppBar显示了应用程序的标题，这里是’TextField Example’。
   Center将其子组件居中显示，子组件是MyForm。

4. class MyForm extends StatefulWidget {… }
   MyForm类是一个有状态的组件，继承自StatefulWidget。它的目的是创建一个可以管理状态的表单。

5. class _MyFormState extends State {… }
   _MyFormState是MyForm的状态类，用于管理MyForm的状态。
   final TextEditingController _controller = TextEditingController();创建了一个文本编辑控制器，用于控制TextField的文本输入。
   String _submittedText = ‘’;用于存储用户提交后的文本内容。
   dispose方法在组件被销毁时被调用，这里用于清理文本编辑控制器，以避免内存泄漏。
   build方法构建了MyForm的用户界面。
   Padding为其子组件添加内边距。
   Column布局将其子组件垂直排列。
   TextField接收用户输入，通过controller属性与_controller关联，使用InputDecoration设置输入提示 和标签等样式。
   SizedBox(height: 20)在TextField和ElevatedButton之间添加了一个固定高度的间隔。
   ElevatedButton是一个带有凸起效果的按钮，当点击时调用onPressed的回调函数。
   在回调函数中，通过setState方法更新状态，将_controller中的文本赋值给_submittedText。
   Text(‘Submitted text: $_submittedText’)用于显示提交后的文本内容。

三、总结
这段代码实现了一个简单的 Flutter 应用，允许用户在文本框中输入文本，并通过点击按钮提交，然后在界面上显示提交后的文本内容。它展示了 Flutter 中状态管理和用户界面构建的基本方法。