簡體   English   中英

當 flutter 中使用多個文本字段時,如何在文本字段集中時更改 label 文本顏色

[英]How to change the label text color when text filed is focused when more than one textfield used in flutter

我的要求是我有 2 個文本字段小部件,當我單擊第一個文本字段小部件時,我需要將 label 文本顏色匹配更改為 cursor 和邊框顏色。 當我單擊第二個文本字段時,以同樣的方式,預期相同的行為。 如何實現這一點。

以下是我迄今為止嘗試過的代碼:

Padding(
              padding: const EdgeInsets.only(left: 32.0, right: 32.0),
              child: TextField(
                cursorColor: Color(0xFFD9A506),
                decoration: new InputDecoration(
                  labelText: 'Username',
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                          color: Color(0xFFD9A506), style: BorderStyle.solid)),
                  enabledBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xFF919191)),
                  ),
                  labelStyle: new TextStyle(color: Color(0xFF919191)),
                ),
                onChanged: (value) {
                  userName = value;
                  setState(() {
                    if (!userName.isEmpty && !password.isEmpty) {
                      isTextFiledFocus = true;
                    } else {
                      isTextFiledFocus = false;
                    }
                  });
                },
              ),
            ),
            Padding(
              padding:
                  const EdgeInsets.only(top: 38.0, left: 32.0, right: 32.0),
              child: TextField(
                  cursorColor: Color(0xFFD9A506),
                  obscureText: isHidePassword,
                  enableSuggestions: false,
                  autocorrect: false,
                  decoration: new InputDecoration(
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(
                            color: Color(0xFFD9A506),
                            style: BorderStyle.solid)),
                    labelText: 'Password',
                    suffixIcon: IconButton(
                        //eye icon
                        color: Color(0xFF919191),
                        onPressed: () {
                          //for keyboard to hide
                          FocusScopeNode currentFocus = FocusScope.of(context);
                          if (!currentFocus.hasPrimaryFocus) {
                            currentFocus.unfocus();
                          }
                          //for keyboard to hide
                          setState(() {
                            isHidePassword = !isHidePassword;
                          });
                        },
                        icon: Icon(isHidePassword
                            ? Icons.visibility
                            : Icons.visibility_off)), //eye icon
                    enabledBorder: const UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xFF919191)),
                    ),
                    labelStyle: new TextStyle(color: Color(0xFF919191)),
                  ),
                  onChanged: (value) {
                    password = value;
                    setState(() {
                      if (!userName.isEmpty && !password.isEmpty) {
                        isTextFiledFocus = true;
                      } else {
                        isTextFiledFocus = false;
                      }
                    });
                  }),
            ),

您可以將FocusNode與偵聽器一起使用來更改 label 顏色。 我們只需要在焦點改變時更新 UI。 您也可以用同樣的方法更改 label 文本。

  final FocusNode focusNode1 = FocusNode();
  final FocusNode focusNode2 = FocusNode();

  @override
  void initState() {
    super.initState();
    focusNode1.addListener(() {
      setState(() {});
    });

    focusNode2.addListener(() {
      setState(() {});
    });
  }

並在TextFiled上分配 focuse 節點

TextField(
 cursorColor: Color(0xFFD9A506),
 focusNode: focusNode1,
 decoration: InputDecoration(
  labelStyle: TextStyle(
      color: focusNode1.hasFocus
          ? Color(0xFFD9A506)
          : Color(0xFF919191)),
  labelText: "UserName",

對下一個TextFiled執行相同的操作。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM