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("設(shè)置"),
          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

不設(shè)置prefixIcon即可

設(shè)置label的樣式

• 隱藏label, 不設(shè)置labelText即可
• 修改labelText樣式, 在decoration里設(shè)置

labelStyle: TextStyle(color: Colors.green),

設(shè)置輸入內(nèi)容的樣式

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

修改下劃線的效果, 在decoration里設(shè)置樣式

// 未獲得焦點下劃線設(shè)為灰色
enabledBorder: UnderlineInputBorder(
  borderSide: BorderSide(color: Colors.grey),
),
//獲得焦點下劃線設(shè)為藍色
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以后校驗規(guī)則
  final GlobalKey _globalKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("設(shè)置"),
          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