Question

我有一个“警报”对话框，其中有三个选项，我想当我单击text(Enter RC Number)时，一旦显示以下TextField，然后再次单击text(Enter RC Number)，时间下面的TextField隐藏和（默认情况下，下面的TextField将隐藏）如何执行此操作，请向我建议。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main()=> runApp(MyHomePages());

class MyHomePages  extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "KYC Formm",
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePageDesign(title: "Kyc form"),
    );
  }
}
class MyHomePageDesign extends StatefulWidget {
  MyHomePageDesign({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePageDesign> {
  var _isVisible = false ;
  TextEditingController phoneController = new TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {

    });
  }

  _displayDialog(BuildContext context) async {
    return showDialog(
        barrierDismissible: true,
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('Choose any one'),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text("Capture Photo",
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
                SizedBox(height: 10.0,),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text("Pick Photo",
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
                SizedBox(height: 10.0,),
                Align(
                  alignment: Alignment.centerLeft,
                  child: InkWell(
                    onTap: (){
                      setState(() {
//                        _isVisible = !_isVisible;
//                        if(_isVisible){
//                          _isVisible=true;
//                        }else{
//                          _isVisible=false;
//                        }
                      });

                    },
                    child: Text("Enter RC Number",
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                ),

                SizedBox(height: 10.0,),
                Visibility(
                  visible: _isVisible,
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      width: 200.0,
                      height: 60.0,
                      padding: const EdgeInsets.only(top: 10.0, left: 0.0,bottom: 10.0,right: 0.0),
                      child: TextField(
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Enter RC No',
                        ),
                        style: TextStyle(
                          color: Colors.red,
                          fontSize: 18.0,
                        ),
                      ),
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.centerRight,
                  child: new FlatButton(
                    child: new Text('OK',
                      style: TextStyle(
                          color: Colors.teal
                      ),),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                )
              ],

            ),
          );
          // );
        });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Center(
        child:Container(
          width: 160.0,
          height: 50.0,
          padding: const EdgeInsets.only(top: 0.0, left: 5.0,bottom: 10.0,right: 0.0),
          child: RaisedButton(
            color: Colors.green,
            child: Text('Open Dialog'),
            onPressed: () {
              _displayDialog(context);
            },
          ),
        ),
      ),
    );
  }
}

Answer 1

由于更改应放置在对话框中，因此需要使用StatefullBuilder。另外，在更改对话框的可见性时，您需要调用setState()，以便将更改应用到对话框。

  _toggleVisibility() { // this is new
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  _unsetVisibility() { // this is new, used when closing the dialog
    setState(() {
      _isVisible = false;
    });
  }

  _displayDialog(BuildContext context) async {
    return showDialog(
        barrierDismissible: true,
        context: context,
        builder: (context) {
          return StatefulBuilder(builder: (context, setState) { // this is new
            return AlertDialog(
              title: Text('Choose any one'),
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Capture Photo",
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 10.0,
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Pick Photo",
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 10.0,
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: InkWell(
                      onTap: () {
                        _toggleVisibility(); // this is new
                        setState(() {}); // this is new
                      },
                      child: Text(
                        "Enter RC Number",
                        style: TextStyle(
                          fontSize: 20.0,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 10.0,
                  ),
                  Visibility(
                    visible: _isVisible,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        width: 200.0,
                        height: 60.0,
                        padding: const EdgeInsets.only(
                            top: 10.0, left: 0.0, bottom: 10.0, right: 0.0),
                        child: TextField(
                          decoration: InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'Enter RC No',
                          ),
                          style: TextStyle(
                            color: Colors.red,
                            fontSize: 18.0,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: new FlatButton(
                      child: new Text(
                        'OK',
                        style: TextStyle(color: Colors.teal),
                      ),
                      onPressed: () {
                        _unsetVisibility(); // this is new
                        Navigator.of(context).pop();
                      },
                    ),
                  )
                ],
              ),
            );
          });
        });
  }

Answer 2

答案2.0

您的代码似乎很好，问题在于即使值更改，AlertDialog也不会重建。因此，为了查看更改，解决方案是StatefulBuilder ，该解决方案必须包装AlertDialog，它将帮助您的小部件重新构建

showDialog(
  context: context,
  builder: (context) {
    String contentText = "Content of Dialog";
    return StatefulBuilder(
      builder: (context, setState) {
        return AlertDialog();
      }
    );
)

现在，让我们跳入代码。 我仅将您的代码用于一些错误纠正，因此您只需复制粘贴代码，然后查看结果即可

请注意：由于出现了问题，我已经向您展示了_displayDialog()。因此，只需在您的代码中使用它，然后剩下的代码就可以了

void _displayDialog(BuildContext context) async {
    return showDialog(
      barrierDismissible: true,
      context: context,
      builder: (context) {
        // this was required, rest is same
        return StatefulBuilder(
          builder: (BuildContext context, setState){
            return AlertDialog(
          title: Text('Choose any one'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Align(
                alignment: Alignment.centerLeft,
                child: Text("Capture Photo",
                  style: TextStyle(
                    fontSize: 20.0,
                  ),
                ),
              ),
              SizedBox(height: 10.0,),
              Align(
                alignment: Alignment.centerLeft,
                child: Text("Pick Photo",
                  style: TextStyle(
                    fontSize: 20.0,
                  ),
                ),
              ),
              SizedBox(height: 10.0,),
              Align(
                alignment: Alignment.centerLeft,
                child: InkWell(
                  onTap: (){
                    setState(() => _isVisible = !_isVisible);
                  },
                  child: Text("Enter RC Number",
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
              ),
              SizedBox(height: 10.0,),
              Visibility(
                visible: _isVisible,
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                    width: 200.0,
                    height: 60.0,
                    padding: const EdgeInsets.only(top: 10.0, left: 0.0,bottom: 10.0,right: 0.0),
                    child: TextField(
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Enter RC No',
                      ),
                      style: TextStyle(
                        color: Colors.red,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                ),
              ),
              Align(
                alignment: Alignment.centerRight,
                child: new FlatButton(
                  child: new Text('OK',
                    style: TextStyle(
                        color: Colors.teal
                    ),),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              )
            ]
          )
        );
          }
        );
      });
  }

结果

如何对TextField隐藏/显示在Flutter中单击文本

2 个答案: