flutter ：单击小部件内的按钮后如何将小部件更改为另一个小部件

Question

我在容器内有这个按钮，如下所示：\n在此处输入图像描述

\n

我想在单击该按钮后将该容器更改为同一容器中的文本字段，如下所示：

\n

在此输入图像描述

\n

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

\n

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

\n

Answer 1

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

\n

  bool showTextField = false;\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(widget.title),\n      ),\n      body: Center(\n        child: Container(\n          alignment: Alignment.center,\n          height: 96,\n          width: MediaQuery.of(context).size.width - 24,\n          decoration: BoxDecoration(\n              borderRadius: BorderRadius.circular(5),\n              color: Colors.white,\n              border: Border.all(width: 0.5, color: Colors.redAccent)),\n          child: showTextField ? phoneTextInput() : button(),\n        ),\n      ),\n    );\n  }\n\n  Widget phoneTextInput() {\n    return TextField(\n      textAlign: TextAlign.center,\n      decoration: InputDecoration(\n        hintText: "Numero",\n        border: InputBorder.none,\n      ),\n    );\n  }\n\n  Widget button() {\n    return Padding(\n      padding: const EdgeInsets.all(8.0),\n      child: Row(children: <Widget>[\n        Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: <Widget>[\n            Column(\n              mainAxisAlignment: MainAxisAlignment.center,\n              children: <Widget>[\n                InkWell(\n                  onTap: () {\n                    setState(() {\n                      showTextField = true;\n                    });\n                  },\n                  child: Container(\n                      height: 62,\n                      width: 62,\n                      decoration: BoxDecoration(\n                          color: Colors.white,\n                          borderRadius: BorderRadius.circular(60),\n                          border: Border.all(\n                            width: 0.5,\n                            color: Colors.grey[300],\n                          )),\n                      child: Icon(\n                        Icons.phone,\n                        size: 30,\n                        color: Colors.purple[100],\n                      )),\n                ),\n                Text(\n                  \'Composer num\xc3\xa9ro\',\n                  style: TextStyle(fontSize: 12),\n                )\n              ],\n            ),\n          ],\n        )\n      ]),\n    );\n  }\n

\n

结果：

\n

\n