如何禁用 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)
                       )
                     ),
                   ],
                 )
                ],
              ),
            ),
          ),
        );
      }
    }

- userName

Answer 1

您可以在onChanged上调用setState(() {});来更新UI，或者在_inputController上添加监听器。

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

当传递 onPressed:null 时，将提供禁用状态。

可以通过更新UI来完成

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

或者

late final TextEditingController _inputController;

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

- Yeasin Sheikh

---

我应该在setState中写什么？ - userName

TextField's onChanged. the one you are already doing for _showIcon - Yeasin Sheikh

Answer 2

使用像isEnabled这样的变量，并将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)
                   )
                 ),
               ],
             )
            ],
          ),

附言：请检查我刚刚提供给您的概念的语法。

- Ashutosh Patole

---

我需要它按照输入10个字符的条件工作，并在达到该条件后变为活动状态。 - userName

@oleg_ 我已经编辑了我的回答。如果它有帮助到你，请点赞。 - Ashutosh Patole

很遗憾，您的代码无法正常工作。一开始，按钮是灰色的，当您输入10个字符时，它不会变成蓝色。 - userName