flutter - 如何 TextField 隐藏/显示在 flutter 中点击文本

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();
                      },
                    ),
                  )
                ],
              ),
            );
          });
        });
  }