Flutter TextField组件使用

输入框组件，用于在应用程序中输入用户名、密码等。

1.maxLength

用于设置输入框可以输入的最大字符长度，并在输入框的右下角有当前输入的长度与最大长度的对比现实。

2.maxLines

设置允许展现的最大行数

3.obscureText

设置是否隐藏输入的内容，该属性常用于密码输入框。

4.enableInteractiveSelection

用于设置长按是否出现剪切、复制、粘贴菜单。

5.textCapitalization

设置输入字符的大小写

dart 复制代码

TextField(textCapitalization: TextCapitalization.characters,)

6.decoration

用于设置输入框的修饰。

InputDecoration属性	说明
icon	设置输入框左侧显示图标
labelText	设置输入框描述信息。当输入框获取焦点时默认会浮动到上方
helperText	设置输入框辅助信息，位于输入框下方
errorText	设置输入框中内容输入错误时的错误提示信息
hintText	输入框内的提示信息
prefixIcon	前缀图标
prefixText	前缀文本
suffixText	后缀文本
suffixIcon	后缀图标

dart 复制代码

  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,
        primarySwatch: Colors.green,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("标题栏")),
        body: TextField(
          decoration: InputDecoration(
            icon: Icon(Icons.account_box_rounded),
            labelText: "账号",
            helperText: "用户名只能是字母、数字和下划线",
            hintText: "请输入用户名",
            prefixIcon:Icon(Icons.access_alarm),
            prefixText: "0011",
          ),
        ),
      ),
    );
  }

7.inputFormatters

限制输入框的输入内容。

输入框内a-z且不超过11位

dart 复制代码

 inputFormatters: [
            FilteringTextInputFormatter(RegExp("[a-z]"), allow: true),
            LengthLimitingTextInputFormatter(11)
          ]

8.controller

用于获取输入框中的内容

下面，一个例子，点击确定，获取输入框中的内容，显示在text上。

dart 复制代码

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,
        primarySwatch: Colors.green,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyState();
  }
}

class MyState extends State {
  String info = "初始值";

  TextEditingController textEditingController = TextEditingController();

  void getValue() {
    setState(() {

      info = textEditingController.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("controller")),
      body: Column(
        children: [
          TextField(controller: textEditingController),
          Text(info),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {

          getValue();
        },
        child: Text("确定"),
      ),
    );
  }
}