Flutter基础组件: TextFiled

TextFiled

TextFiled的简单使用

class _MyHomeApp extends StatefulWidget {
  const _MyHomeApp({Key? key}) : super(key: key);

  @override
  State<_MyHomeApp> createState() => _MyHomeAppState();
}

class _MyHomeAppState extends State<_MyHomeApp> {
  String userName = '';
  String password = "";
  // 绑定在textFiled上, 用于获取textFiled输入的文本
  final TextEditingController _userNameController = TextEditingController();

  // 绑定在textFiled上, 用于获取textFiled输入的文本
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("设置"),
          centerTitle: true,
        ),
        body: Column(
          children: [
            TextField(
              autofocus: true,
              controller: _userNameController,
              decoration: const InputDecoration(
                labelText: '用户名',
                hintText: '手机号/邮箱',
                prefixIcon: Icon(Icons.person),
              ),
            ),
            TextField(
              controller: _passwordController,
              decoration: const InputDecoration(
                  labelText: '密码',
                  hintText: '请输入密码',
                  prefixIcon: Icon(Icons.lock)),
                  obscureText: true,
            ),
            Text('账号:::$userName'),
            Text('密码:::$password'),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    userName = _userNameController.text;
                    password = _passwordController.text;
                  });
                },
                child: const Text('登录'))
          ],
          crossAxisAlignment: CrossAxisAlignment.center,
        ));
  }
}

效果

自定义TextFiled样式

隐藏icon

不设置prefixIcon即可

设置label的样式

• 隐藏label, 不设置labelText即可
• 修改labelText样式, 在decoration里设置

labelStyle: TextStyle(color: Colors.green),

设置输入内容的样式

TextField(
   style: const TextStyle(color: Colors.red),
)

修改下划线的效果, 在decoration里设置样式

// 未获得焦点下划线设为灰色
enabledBorder: UnderlineInputBorder(
  borderSide: BorderSide(color: Colors.grey),
),
//获得焦点下划线设为蓝色
focusedBorder: UnderlineInputBorder(
  borderSide: BorderSide(color: Colors.red),
),

Form表单

在flutter里, Form表单的TextFiled是TextFormFiled组件

class _MyHomeAppState extends State<_MyHomeApp> {
  String userName = '';
  String password = "";

  // 绑定在textFiled上, 用于获取textFiled输入的文本
  final TextEditingController _userNameController = TextEditingController();

  // 绑定在textFiled上, 用于获取textFiled输入的文本
  final TextEditingController _passwordController = TextEditingController();

  // form的key, 用于获取state, 获取state以后校验规则
  final GlobalKey _globalKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("设置"),
          centerTitle: true,
        ),
        body: Form(
            key: _globalKey,
            autovalidateMode: AutovalidateMode.onUserInteraction,
            child: Column(
              children: [
                TextFormField(
                  autofocus: true,
                  controller: _userNameController,
                  decoration: const InputDecoration(
                    labelText: '用户名',
                    hintText: '手机号/邮箱',
                    prefixIcon: Icon(Icons.person),
                  ),
                  validator: (v) {
                    return v!.trim().isNotEmpty ? null : "用户名不能为空";
                  },
                ),
                TextFormField(
                  controller: _passwordController,
                  decoration: const InputDecoration(
                      labelText: '密码',
                      hintText: '请输入密码',
                      prefixIcon: Icon(Icons.lock)),
                  obscureText: true,
                  validator: (v) {
                    return v!.trim().length > 5 ? null : "密码不能少于6位";
                  },
                ),
                Text('账号:::$userName'),
                Text('密码:::$password'),
                ElevatedButton(
                    onPressed: () {
                      setState(() {
                        if ((_globalKey.currentState as FormState).validate()) {
                          userName = _userNameController.text;
                          password = _passwordController.text;
                        }
                      });
                    },
                    child: const Text('登录'))
              ],
              crossAxisAlignment: CrossAxisAlignment.center,
            )));
  }
}

form