如何在 flutter 中的多个小部件之间切换？答案

【问题标题】：how to change between multi widgets in flutter?如何在 flutter 中的多个小部件之间切换？
【发布时间】：2022-12-14 22:40:35
【问题描述】：

我有一行包含 4 个 outlinedbuttons，我有 4 个小部件（listview、ListWheelScrollView、image png 和 svg image）我只想在按下一个 outlinedbutton 时显示一个小部件。我应该用什么来做这件事？提供一些代码会有帮助

Container(
             padding: EdgeInsets.all(8.0),
             height: 100,
             child: Row(
               children: [
                 Expanded(
                   child: OutlinedButton(
           onPressed: () =>
              //show widget1
       
                 )),
            Expanded(
                   child: OutlinedButton(
           onPressed: () =>
              //show widget2
       
                 )),
 Expanded(
                   child: OutlinedButton(
           onPressed: () =>
              //show widget3
       
                 )),
 Expanded(
                   child: OutlinedButton(
           onPressed: () =>
              //show widget4
       
                 )),
               ],
             ),
           )

【问题讨论】：

标签： flutter dart widget

【解决方案1】：

你可以用不同的方式做到这一点。一个简单的方法是为每个小部件创建 4 个布尔变量。按下按钮时，特定小部件的真值和其他 3 个值的假值。另一方面，如果值为真，则使用 if(isthiswidget) 显示小部件。一些代码演示

bool widget1, widget2, widget3, widget4 = false;

紧迫的小部件 1

onPressed: (){
widget1 = true;
widget2, widget3, widget4 = false;}

紧迫的小部件2

onPressed: (){
   setState(() {
     widget2 = true;
     widget1, widget3, widget4 = false;
   });
   }

对其他功能做同样的事情

在每个小部件之前的 UI 设置条件

if(widget1)
Container(), //display widget1
if(widget2)
Container() //display widget2
if(widget3)
Container(), //display widget3
if(widget4)
Container() //display widget4

注意：使用 setstate、provider 或任何其他状态管理方法来更新实时值和 UI

【讨论】：

【解决方案2】：

创建此 var 以标识要显示的小部件，它将获得从 0 到 3 的值

int widgetNum = 0;

在每个按钮的 onPressed 添加这个，不要忘记添加正确的数字

onPressed: () =>setState(() {
      //for example 
      widgetNum = 2; //for first btn will be = 0 etc..
    });

并使用可见性来显示小部件

Column(
   children:[
     Visibility(
       visible: widgetNum==2, // for first widget will be ==0 etc..
       child: Container(
      // your widget 
     ))]
)

【讨论】：