Flutter布局求助：如何让WidgetRightSideBar位于WidgetBottomFooterBar正上方？

我在开发Flutter UI布局时，想要让WidgetRightSideBar直接位于WidgetBottomFooterBar的正上方，目前的布局效果不符合预期，需要调整代码实现目标效果。

当前代码 #

return Scaffold(
      body: MySingleChildScrollKeyboard(
        child: SafeArea(
          child: Stack(
            children: [
              Consumer<NotifierProviderFloorPlan>(
                builder: (context, data, child) {
                  return Stack(
                    children: [
                      Row(
                        children: [
                          context.watch<NotifierProviderInfo>().posInfo.isHideBar
                              ? Container()
                              : Expanded(
                                  flex: 3,
                                  child: Container(),
                                ),
                          Expanded(
                            flex: context.watch<NotifierProviderInfo>().posInfo.isHideBar
                                ? 33
                                : context.watch<NotifierProviderChannelState>().isMenuOpen
                                    ? 28
                                    : 30,
                            child: Column(
                              children: [
                                Expanded(
                                  flex: 2,
                                  child: Padding(
                                    padding: MyTheme.paddingLeftRightTop(context),
                                    child: ThemeCategoryTab(
                                      listObject: data.listModelOutletTableArea,
                                      onChanged: (var value, int index) {
                                        if (value != null) {
                                          var index = data.listModelOutletTableArea.indexOf(value);
                                          data.onTapFloorSelection(index);
                                        }
                                      },
                                      currentValue: data.listModelOutletTableArea.isNotEmpty ? data.listModelOutletTableArea[data.indexFloor] : null,
                                      text: (int index) {
                                        return data.listModelOutletTableArea[index].name;
                                      },
                                      rowLength: 8,
                                      columnLength: 1,
                                    ),
                                  ),
                                ),
                                Expanded(
                                  flex: 20,
                                  child: Padding(
                                    padding: MyTheme.padding(context),
                                    child: Stack(
                                      children: [
                                        (data.listModelOutletTableArea.isEmpty)
                                            ? Center(
                                                child: ThemeTitle(
                                                  HelperTranslate(context).translate.floor_is_empty.capitalize(),
                                                ),
                                              )
                                            : FloorWidget(
                                                isLoginFromTenderFloorPlan: widget.isLoginFromTenderFloorPlan ?? false,
                                              ),
                                      ],
                                    ),
                                  ),
                                ),
                                Expanded(
                                  flex: 1,
                                  child: WidgetBottomFooterBar,
                                )
                              ],
                            ),
                          ),
                          WidgetRightSideBar()
                        ],
                      ),
                      WidgetLeftSideBar(),
                    ],
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );

解决方案 #

要实现WidgetRightSideBar位于WidgetBottomFooterBar正上方的效果，需要调整布局结构，将右侧边栏与中间的FloorWidget放在同一个Row中，让它们共享Tab区域下方的空间，而WidgetBottomFooterBar作为整个中间列的底部元素。具体修改如下：

修改后的代码 #

return Scaffold(
      body: MySingleChildScrollKeyboard(
        child: SafeArea(
          child: Stack(
            children: [
              Consumer<NotifierProviderFloorPlan>(
                builder: (context, data, child) {
                  return Stack(
                    children: [
                      Row(
                        children: [
                          context.watch<NotifierProviderInfo>().posInfo.isHideBar
                              ? Container()
                              : Expanded(
                                  flex: 3,
                                  child: Container(),
                                ),
                          Expanded(
                            flex: context.watch<NotifierProviderInfo>().posInfo.isHideBar
                                ? 33
                                : context.watch<NotifierProviderChannelState>().isMenuOpen
                                    ? 28
                                    : 30,
                            child: Column(
                              children: [
                                // 顶部Tab区域
                                Expanded(
                                  flex: 2,
                                  child: Padding(
                                    padding: MyTheme.paddingLeftRightTop(context),
                                    child: ThemeCategoryTab(
                                      listObject: data.listModelOutletTableArea,
                                      onChanged: (var value, int index) {
                                        if (value != null) {
                                          var index = data.listModelOutletTableArea.indexOf(value);
                                          data.onTapFloorSelection(index);
                                        }
                                      },
                                      currentValue: data.listModelOutletTableArea.isNotEmpty ? data.listModelOutletTableArea[data.indexFloor] : null,
                                      text: (int index) {
                                        return data.listModelOutletTableArea[index].name;
                                      },
                                      rowLength: 8,
                                      columnLength: 1,
                                    ),
                                  ),
                                ),
                                // 中间区域：FloorWidget + WidgetRightSideBar
                                Expanded(
                                  flex: 20,
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Padding(
                                          padding: MyTheme.padding(context),
                                          child: Stack(
                                            children: [
                                              (data.listModelOutletTableArea.isEmpty)
                                                  ? Center(
                                                      child: ThemeTitle(
                                                        HelperTranslate(context).translate.floor_is_empty.capitalize(),
                                                      ),
                                                    )
                                                  : FloorWidget(
                                                      isLoginFromTenderFloorPlan: widget.isLoginFromTenderFloorPlan ?? false,
                                                    ),
                                            ],
                                          ),
                                        ),
                                      ),
                                      WidgetRightSideBar(),
                                    ],
                                  ),
                                ),
                                // 底部FooterBar
                                Expanded(
                                  flex: 1,
                                  child: WidgetBottomFooterBar,
                                )
                              ],
                            ),
                          ),
                          // 移除原外层Row中的WidgetRightSideBar
                        ],
                      ),
                      WidgetLeftSideBar(),
                    ],
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );

修改说明 #

• 原WidgetRightSideBar是外层Row的子项，高度会拉伸至整个页面；现在将它移到中间列的中间Row中，与FloorWidget并列，高度和FloorWidget保持一致，正好位于底部WidgetBottomFooterBar的正上方。
• 保留WidgetBottomFooterBar作为中间列的底部元素，确保它在页面底部的位置不变。

内容的提问来源于stack exchange，提问作者Syahmi