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

Posted 2023-02-23

【中文标题】颤振：单击该小部件内的按钮后如何将小部件更改为另一个小部件

【英文标题】：flutter : how to change a widget to another widget after click a button inside that widget

【发布时间】：2020-11-15 12:34:15

【问题描述】：

我在一个容器内有这个按钮，如下所示： 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),
                            )
                          ],
                        ),
                      ],
                    )),
              ),

【参考方案1】：

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

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

结果：

【讨论】：

如果这篇文章解决了你的问题，请标记为答案。

嗨@Sccode，我只想说，使用上面的代码在最新版本的flutter上显示了这个错误：Null check operator used on a null value，你能帮帮我吗？我在顶部使用了相同的公式。布尔值？小部件1：小部件2