TextField的屬性

裝飾器 InputDecoration

border的三種值

• InputBorder.none 沒有邊框
• OutlineInputBorder 線框
• UnderlineInputBorder 底邊線，默認的

小技巧

當輸入框的默認線框無法滿足時卓舵，可以使用Container容器自定義邊框南用。這時候可以將裝飾器設(shè)置為InputDecoration.collapsed(hintText: 'hint')表示禁用裝飾線

以登錄為例????????????

1.定義的變量

final phoneTf = TextEditingController();
final pwdTf = TextEditingController();
bool showPhoneClear = false;
bool showPwdClear = false;
final FocusNode phoneFocusNode = FocusNode();
final FocusNode pwdFocusNode = FocusNode();

TextEditingController帶初始值

TextEditingController.fromValue(TextEditingValue(text: '手機號'));

2.輸入手機號

Container(
                    margin: const EdgeInsets.symmetric(horizontal: 15),
                    child: TextField(
                      //關(guān)聯(lián)焦點變量，處理輸入框失去焦點
                      focusNode: phoneFocusNode,
                      //關(guān)聯(lián)輸入框變量
                      controller: phoneTf,
                      //鍵盤類型
                      keyboardType: TextInputType.number,
                      //輸入校驗
                      inputFormatters: [
                        //設(shè)置只允許輸入數(shù)字
                        FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
                      ],
                      //最大字符數(shù)
                      maxLength: 11,
                      //輸入框獲取焦點的時候
                      onTap: () {
                        setState(() {
                          showPhoneClear = true;
                          showPwdClear = false;
                        });
                      },
                      //編輯完成掏湾，點擊鍵盤的完成按鈕裹虫，
                      onEditingComplete: () {
                        print('onEditingComplete');
                        //手機號輸入框失去焦點
                        phoneFocusNode.unfocus();
                        setState(() {
                          showPhoneClear = false;
                        });
                      },
                      //裝飾器
                      decoration: InputDecoration(
                        //手機號圖標
                        prefixIcon: const Icon(Icons.phone_android,size: 25, color: Colors.pinkAccent,),
                        //提示文字
                        hintText: '請輸入手機號',
                        //邊框
                        border: const OutlineInputBorder(
                          //圓角
                          borderRadius: BorderRadius.all(Radius.circular(15)),
                        ),
                        //后面清除按鈕和事件
                        suffixIcon: Visibility(
                          visible: showPhoneClear,
                          child: GestureDetector(
                            onTap: () {
                              phoneTf.clear();
                              print('jj');
                            },
                            //清除按鈕
                            child: const Icon(Icons.clear),
                          ),
                        ),
                      ),
                    ),
                  ),

3.輸入密碼

Container(
                    margin: const EdgeInsets.symmetric(horizontal: 15),
                    child: TextField(
                      focusNode: pwdFocusNode,
                      controller: pwdTf,
                      maxLength: 32,
                      obscureText: true,
                      //這個鍵盤兼容密碼密碼輸入字符
                      keyboardType: TextInputType.emailAddress,
                      onTap: () {
                        setState(() {
                          showPhoneClear = false;
                          showPwdClear = true;
                        });
                      },
                      onEditingComplete: () {
                        pwdFocusNode.unfocus();
                        setState(() {
                          showPwdClear = false;
                        });
                      },
                      decoration: InputDecoration(
                        prefixIcon: const Icon(Icons.lock,size: 25, color: Colors.pinkAccent),
                        hintText: '請輸入密碼',
                        suffixIcon: Visibility(
                          visible: showPwdClear,
                          child: GestureDetector(
                            onTap: () {
                              pwdTf.clear();
                              print('jj');
                            },
                            child: const Icon(Icons.clear),
                          ),
                        ),
                      ),
                    ),
                  ),

WX20220419-140214.png

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子融击，初學(xué)Flutter 筑公，文章會根據(jù)學(xué)習(xí)進度不定時更新，請多多指教~~