代码之家  ›  专栏  ›  技术社区  ›  greenzebra

如何在Flutter中动态对齐一行中的小工具?

  •  0
  • greenzebra  · 技术社区  · 2 年前

    我有一个小部件,它由 Row() 具有 MainAxisAlignment.spaceEvenly ,有三个 IconButton 小时候。

    第三个按钮使用bool showButton 在三元运算符中切换是否显示第三个按钮。

    我的问题是,当按钮没有显示时,行间距仍然占空容器的比例(如底部的图片所示)。

    除了用两个和三个按钮创建两个单独的行(在两者之间切换)之外,还有更好的方法来分隔这些按钮吗?或者有没有一种替代空容器的方法,它不会占用我的对齐空间?

    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        IconButton(
          onPressed: () {...},
          icon: Icon(...),
        ),
          IconButton(
          onPressed: () {...},
          icon: Icon(...),
        ),
        showButton
            ? Container()
            :  IconButton(
          onPressed: () {...},
          icon: Icon(...),
        ), 
      ],
    ),
    

    3 buttons

    2 buttons

    1 回复  |  直到 2 年前
        1
  •  1
  •   Dhafin Rayhan    2 年前

    而不是使用三元运算符来显示空 Container 当条件为false时,可以通过以下操作有条件地将该项包括在列表中:

    children: [
      // ...
      if (showButton) IconButton(...),
    ]