有值時更改 TextField 的顏色邊框

Question

我在下面有一個 TextField 代碼。

                 TextField(
                    ...
                    controller: controller,
                    decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white)),
                      //change to blue
                      focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.red, width: 5)),
                      hintText: '',
                    ),
                    keyboardType: TextInputType.number,
                    onChanged: (text) {
                      if (text != "") {
                       //change 'borderSide' from 'Colors.white' to 'Colors.blue'
                      } 
                    },
                  ),
                ),
                Container(
                    ...
                    color: Colors.red, 
                    //change to blue
                 ),

當用戶輸入一個值時，TextField 的邊框會改變顏色樣式。

I want to change a border borderSide of TextField from Colors.white to Colors.blue OR color of Container from Colors.red to Colors.blue when TextField has value (text != "") .

我怎樣才能做到這一點？

Answer 1

您可以向主小部件的 state 添加可變color ，以保存Container的顏色和TextField的邊框：

Color _color = Colors.red;

然后，您可以在文本更改時切換其值（ onChanged ）：

TextField(
                    controller: controller,
                    decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white)),
                      focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: _color, width: 5)),
                      hintText: '',
                    ),
                    keyboardType: TextInputType.number,
                    onChanged: (text) {
                      setState(() {
                        if (text.length > 0) {
                          _color = Colors.blue;
                        } else {
                          _color = Colors.red;
                        }
                      });
                    },
                  ),
                ),
                Container(height: 300, color: _color),