在 TextFormField Flutter 的值更改时禁用 AlertDialog 按钮

Posted 2023-02-23

【中文标题】在 TextFormField Flutter 的值更改时禁用 AlertDialog 按钮

【英文标题】：Disable AlertDialog button on value change of TextFormField Flutter

【发布时间】：2021-04-07 16:51:11

【问题描述】：

在我的 First Flutter 项目中，我试图从 Alert Dialog 内的 TextFormField 中获取价值。我正在尝试验证输入并基于该验证我想启用/禁用 AlertDialog 的按钮。

我做了什么来显示对话框：

 _displayDialog(BuildContext context) async 
    return showDialog(
        context: context,
        builder: (context) 
          return AlertDialog(
            title: Text('TextField AlertDemo'),
            content: _container(),
            actions: <Widget>[
              RaisedButton(
                onPressed: isValid
                    ? () 
                        print("ISVALID:");
                      
                    : null,
                child: Text("Click Me"),
              )
            ],
          );
        );
  

_container()方法代码：

 Widget _container() 
    return Container(
      margin: EdgeInsets.all(25),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              onChanged: (text) 
                setState(() 
                  if (text.length > 5) 
                    isValid = true;
                   else 
                    isValid = false;
                  
                );
              ,
              decoration: InputDecoration(labelText: 'Enter Text'),
            ),
            SizedBox(height: 15),
            RaisedButton(
              onPressed: isValid
                  ? () 
                      print("ISVALID:");
                    
                  : null,
              child: Text("Done!"),
            )
          ],
        ),
      ),
    );
  

不幸的是，它正在脚手架主体中工作：

@override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _container(),
          RaisedButton(
            onPressed: ()_displayDialog(context);,
            child: Text("Show Alert"),
          )
        ],
      ),
    );
  

谁能帮我解决这个问题。 TIA

【参考方案1】：

复制粘贴此代码，它工作正常，我使用StateFullBuilder 小部件来更新AlertDialogBox 的state。

有关更新或刷新DialogBox Click HERE 的更多参考

下面是Code

import 'dart:async';

import 'package:flutter/material.dart';

class MyTimer extends StatefulWidget 
  @override
  _MyTimerState createState() => _MyTimerState();


class _MyTimerState extends State<MyTimer> 
  
  bool isValidAlert = false;
  bool isValidScafold = false;

  _displayDialog(BuildContext context) async 
    return showDialog(
        context: context,
        builder: (context) 
          return StatefulBuilder(builder: (context, setState) 
            return AlertDialog(
              title: Text('TextField AlertDemo'),
              content: _containerAlert(setState),
              actions: <Widget>[
                RaisedButton(
                  onPressed: isValidAlert
                      ? () 
                          print("ISVALID:");
                        
                      : null,
                  child: Text("Click Me"),
                )
              ],
            );
          );
        );
  

  Widget _container() 
    return Container(
      margin: EdgeInsets.all(25),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              onChanged: (text) 
                setState(() 
                  if (text.length > 5) 
                    isValidScafold = true;
                   else 
                    isValidScafold = false;
                  
                );
              ,
              decoration: InputDecoration(labelText: 'Enter Text'),
            ),
            SizedBox(height: 15),
            RaisedButton(
              onPressed: isValidScafold
                  ? () 
                      print("ISVALID:");
                    
                  : null,
              child: Text("Done!"),
            )
          ],
        ),
      ),
    );
  

  Widget _containerAlert(StateSetter setState) 
    return Container(
      margin: EdgeInsets.all(25),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              onChanged: (text) 
                setState(() 
                  if (text.length > 5) 
                    isValidAlert = true;
                   else 
                    isValidAlert = false;
                  
                  print(text);
                );
              ,
              decoration: InputDecoration(labelText: 'Enter Text'),
            ),
            SizedBox(height: 15),
            RaisedButton(
              onPressed: isValidAlert
                  ? () 
                      print("ISVALID:");
                    
                  : null,
              child: Text("Done!"),
            )
          ],
        ),
      ),
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _container(),
          RaisedButton(
            onPressed: () 
              _displayDialog(context);
            ,
            child: Text("Show Alert"),
          )
        ],
      ),
    );