flutter：单击小部件内的按钮后如何将其更改为其他小部件

Question

我在如下容器中有此按钮： enter image description here

并且我想在单击以下按钮后将该容器更改为同一容器中的textfeild：

enter image description here

所以请！有什么想法可以帮助！谢谢

Container(
                height: 96,
                width: MediaQuery.of(context).size.width - 24,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    color: colorPrimary,
                    border:
                        Border.all(width: 0.5, color: Colors.redAccent)),
                child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: <Widget>[
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            InkWell(
                              onTap: () {
                                setState(() {});
                              },
                              child: Container(
                                  height: 62,
                                  width: 62,
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius:
                                          BorderRadius.circular(60),
                                      border: Border.all(
                                        width: 0.5,
                                        color: Colors.grey[300],
                                      )),
                                  child: Icon(
                                    Icons.phone,
                                    size: 30,
                                    color: Colors.purple[100],
                                  )),
                            ),
                            Text(
                              'Composer numéro',
                              style: TextStyle(fontSize: 12),
                            )
                          ],
                        ),
                      ],
                    )),
              ),

Answer 1

您可以使用bool来决定当前显示哪个小部件。根据要显示的窗口小部件，使用true将布尔值设置为false或setState。

  bool showTextField = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          alignment: Alignment.center,
          height: 96,
          width: MediaQuery.of(context).size.width - 24,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              color: Colors.white,
              border: Border.all(width: 0.5, color: Colors.redAccent)),
          child: showTextField ? phoneTextInput() : button(),
        ),
      ),
    );
  }

  Widget phoneTextInput() {
    return TextField(
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        hintText: "Numero",
        border: InputBorder.none,
      ),
    );
  }

  Widget button() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(children: <Widget>[
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                InkWell(
                  onTap: () {
                    setState(() {
                      showTextField = true;
                    });
                  },
                  child: Container(
                      height: 62,
                      width: 62,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(60),
                          border: Border.all(
                            width: 0.5,
                            color: Colors.grey[300],
                          )),
                      child: Icon(
                        Icons.phone,
                        size: 30,
                        color: Colors.purple[100],
                      )),
                ),
                Text(
                  'Composer numéro',
                  style: TextStyle(fontSize: 12),
                )
              ],
            ),
          ],
        )
      ]),
    );
  }

结果：