在 Flutter 中堆叠条件导航器按钮

Question

我正在尝试为滑动菜单创建条件菜单列表。到目前为止，我已经获得了可以为不同类型的用户显示不同菜单项的功能。但我现在唯一的问题是，在菜单中，“消息”和“设置”这两项并排显示。我试图将第二个图标行移到行括号之外，依此类推。我只是想不通。这些括号对我来说已经很混乱了。有人可以看看这个并帮助我在消息下获取设置图标吗？

我已经包含了完整的方法 sn-p 所以每个人都可以知道我正在尝试做什么。这是我知道如何使我的菜单有条件的唯一方法。

customSlideMenu() {
    Function onTap;
    bool ownProfile = currentOnlineUserId == widget.userProfileId;
    if(ownProfile) {
      return Padding(
        padding: const EdgeInsets.fromLTRB(15.0, 0, 8.0, 0),
        child: InkWell(
          splashColor: Colors.blue,
          onTap: onTap,
          child: Container(
            height: 40,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(Icons.mail),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        "Messages",
                        style: TextStyle(fontSize: 16.0),
                      ),
                    ),
                    Icon(Icons.settings),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        "Settings",
                        style: TextStyle(fontSize: 16.0),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    } else {
      return Padding(
        padding: const EdgeInsets.fromLTRB(15.0, 0, 8.0, 0),
        child: InkWell(
          splashColor: Colors.blue,
          onTap: onTap,
          child: Container(
            height: 40,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(Icons.mail),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        "Message",
                        style: TextStyle(fontSize: 16.0),
                      ),
                    ),
                    Icon(Icons.block),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        "Block",
                        style: TextStyle(fontSize: 16.0),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    }
  }

Answer 1

Row 小部件将其子元素彼此相邻对齐。尝试使用 Column 小部件来实现将两个孩子堆叠在一起

        Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Icon(Icons.mail),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "Messages",
                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Icon(Icons.settings),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "Settings",
                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
              ],
            )
          ],
        ),