如何禁用 ElevatedButton？

Question

我希望按钮在字段中输入 10 个字符之前处于非活动状态。当输入 10 个字符时，该按钮处于活动状态。当它不活动时，它是灰色的，当它活动时，它是蓝色的。我怎样才能做到这一点？ 这是带有按钮的输入代码：

      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Padding(
              padding: EdgeInsets.fromLTRB(
                  20, MediaQuery.of(context).size.height * 0, 20, 0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextField(
                    onChanged: (String value) {
                      setState(() {
                        _showIcon = value.isNotEmpty;
                      });
                    },
                    controller: _inputController,
                    decoration: InputDecoration(
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.black, width: 2.0),
                      ),
                      hintText: "(1201) 565-0123 ",
                      hintStyle: TextStyle(color: Colors.grey, fontSize: 15),
                      helperText: 'Enter your phone number',
                      helperStyle: TextStyle(color: Colors.grey, fontSize: 15),
                      suffixIcon: _showIcon
                          ? IconButton(
                        onPressed: () {
                          setState(() {
                            _inputController.clear();
                            _showIcon = false;
                          });
                        },
                        icon: const Icon(Icons.close, color: Colors.grey),
                      ) : null,
                    ),
                    keyboardType: TextInputType.number,
                    inputFormatters: [maskFormatter],
                  ),
                 Row(
                   mainAxisAlignment: MainAxisAlignment.end,
                   children: [
                     ElevatedButton(
                         onPressed: () {
                           
                         },
                         child: const Icon(Icons.arrow_forward_rounded, size: 25),
                       style: ElevatedButton.styleFrom(
                           shape: CircleBorder(),
                           padding: EdgeInsets.all(15)
                       )
                     ),
                   ],
                 )
                ],
              ),
            ),
          ),
        );
      }
    }

Answer 1

您可以调用setState（（）{}）; on on Changed更新UI，或在_InputController上添加侦听器。

ElevatedButton(
    onPressed:
        _inputController.text.length < 10 ? null : () {},
...

传递开启：null将提供禁用状态。

更新UI可以完成

TextField(
  onChanged: (String value) {
    setState(() {});
  },
....)

或

late final TextEditingController _inputController;

@override
void initState() {
  super.initState();
  _inputController = TextEditingController()
    ..addListener(() {
      setState(() {});
    });
}

Answer 2

使用类似类似的变量，然后将null传递到OnPress函数将禁用该按钮。

bool isEnabled=false;
void callbackfunction(){
   // add your logic here.
}
....
....
 TextField(
                onChanged: (String value) {
                  if (value.length == 10){
                       setState(()=> isEnabled = true;)
                  }
                  else{
                      isEnabled=false;
                  }
                  setState(() {
                    _showIcon = value.isNotEmpty;
                  });
                },
....
  Row(
               mainAxisAlignment: MainAxisAlignment.end,
               children: [
                 ElevatedButton(
                     onPressed: isEnabled ? callbackfunction : null,
                     child: const Icon(Icons.arrow_forward_rounded, size: 25),
                   style: ElevatedButton.styleFrom(
                       color: isEnabled ? Colors.blue : Colors.grey,
                       shape: CircleBorder(),
                       padding: EdgeInsets.all(15)
                   )
                 ),
               ],
             )
            ],
          ),

PS请检查我刚刚为您提供概念的语法。