TextField 文本输入框组件

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//    文本编辑控制器，监听文本输入内容的变化
    final TextEditingController controller = TextEditingController();
    controller.addListener(() {
      print('你输入的内容 ${controller.text}');
    });
    return MaterialApp(
      title: "TextField 文本框组件",
      home: Scaffold(
        appBar: AppBar(
          title: Text("TextField 文本框组件"),
        ),
        body: Center(
          child: TextField(
//            绑定 controller
            controller: controller,
//            最大长度，设置此项后会让TextField右下角有一个输入数量的统计字符串
            maxLength: 30,
//            最大行数
            maxLines: 2,
//            是否自动更正
            autocorrect: true,
//            是否自动对焦
            autofocus: true,
//            是否是密码
            obscureText: false,
//            文本对齐方式
            textAlign: TextAlign.center,
//            文本样式
            style: TextStyle(
              fontSize: 26.0,
              color: Colors.green,
            ),
            onChanged: (text) {
              print("文本修改时回调 $text");
            },
            onSubmitted: (text) {
              print("文本提交时的回调 $text");
            },
//            是否启用
            enabled: true,
//            添加装饰效果
            decoration: InputDecoration(
//              添加填充色
                fillColor: Colors.grey.shade200,
                filled: true,
                helperText: "用户名",
//                左侧图标
                prefixIcon: Icon(Icons.person),
//                右侧文本提示
                suffixText: "用户名"),
          ),
        ),
      ),
    );
  }
}