仅显示Flutter中多个微件中的一个

cbwuti44  于 2023-02-05  发布在  Flutter
关注(0)|答案(2)|浏览(131)

我有一个空间,我可以在那里显示widget1或widget2(不能同时显示)。怎么做?
事实上,widget1包含一个简单的检索信息的示例和一个切换到显示widget2(包含更多信息)的按钮。
我想到的唯一解决方案是使用Column(children: [widget1, widget2])并调整两个小部件的可见性,但这很难看,例如,没有指示ColumnRow哪个更好。

iezvtpos

iezvtpos1#

为此,您有多个选项:
(1)您可以在列/小部件中使用条件spread operator

Column(
 children: [
   if (yourCondition == true) ...[
      const Text("Widget 1")
   ] else ...[
      const Text("Widget 2")
   ],
 ],
),

(2)您可以在列/小部件内使用ternary operator

Column(
  children: [
    yourCondition == true
      ? const Text("Widget 1")
      : const Text("Widget 2"),
   ],
),

(3)您可以在列/小部件内使用Visibility小部件

Column(
  children: [
    Visibility(
      visible: yourCondition == true,
      child: const Text("Widget 1"),
    ),
    Visibility(
      visible: yourCondition == false,
      child: const Text("Widget 2"),
    ),
  ],
),
  • 为了提高代码可读性,如果有only one condition or non-nested conditions,请使用ternary operator
  • 为了提高代码可读性,如果有multiple conditions or nested conditions,请使用条件spread operator
  • 否则使用Visibility小部件(但使用not recommended
zc0qhyus

zc0qhyus2#

要简单地解决这个问题,可以对容器(或任何具有单个子容器的容器)这样的小部件使用三元运算符:

Container(
  child: condition == true 
    ? Text("Widget 1") 
    : Text("Widget 2")
)

相关问题