Flutter Bottom Sheet覆盖附件按钮问题求助

开发Flutter应用时，页面底部的Attach Files按钮会被Bottom Sheet覆盖，需要让该按钮在Bottom Sheet显示时始终位于其上方。尝试过用Stack和Positioned组件调整层级，但没有效果。

方法：使用Scaffold的bottomNavigationBar属性 #

Flutter中Scaffold的bottomNavigationBar组件层级默认高于Bottom Sheet，直接把Attach Files按钮移到这个位置即可解决覆盖问题，无需额外调整层级。

修改后的代码 #

class CreateCommentView extends GetView<CommentsController> {
  final String? pageType;
  final String? id;
  final String? title;
  const CreateCommentView({
    Key? key,
    required this.pageType,
    required this.id,
    required this.title,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
    return OrientationBuilder(builder: (context, orientation) {
      return Obx(() {
        return Scaffold(
          key: scaffoldKey,
          // 将Attach Files按钮移至此处
          bottomNavigationBar: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                IconButton(
                    onPressed: () {
                      controller.attachFile();
                    },
                    icon: SvgPicture.asset(
                      iconAttachment,
                      width: 20,
                      height: 20,
                      color: Colors.grey,
                    )),
                const Text(
                  'Attach Files',
                  style: TextStyle(color: Colors.grey),
                )
              ],
            ),
          ),
          body: Theme(
            data: Theme.of(context),
            child: SafeArea(
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 100),
                child: controller.isLoadingOrError()
                    ? controller.statusWidget()
                    : _body(context, scaffoldKey),
              ),
            ),
          ),
        );
      });
    });
  }

  Widget _body(BuildContext context, GlobalKey<ScaffoldState> scaffoldKey) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Expanded(
          child: ListView(
            shrinkWrap: true,
            children: [
              CommentTopTitleDescription(
                pageType: pageType,
                id: id,
                title: title,
                isDividerNeeded: true,
              ),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
                child: Text(
                  'Implementation Status',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(right: 280.0, left: 20),
                child: OutlinedButton.icon(
                  label: Obx(() {
                    if (controller.selectedStatus.value.value != null) {
                      return Text(
                        controller.selectedStatus.value.value ?? '',
                        style: AppTextStyle.style14w5_2,
                      );
                    } else {
                      return Text(
                        controller.commentList[0].newStatus?.value ?? '',
                        style: AppTextStyle.style14w5_2,
                      );
                    }
                  }),
                  style: OutlinedButton.styleFrom(
                      backgroundColor:
                          controller.selectedStatus.value.color.toColor(),
                      side:
                          const BorderSide(width: 2, color: Colors.transparent),
                      textStyle: const TextStyle(
                          color: Colors.black, overflow: TextOverflow.ellipsis),
                      foregroundColor: Colors.transparent),
                  onPressed: () {
                    scaffoldKey.currentState?.showBottomSheet(
                      (context) {
                        return Material(
                          elevation: 20,
                          shadowColor: Colors.grey,
                          child: SizedBox(
                            width: MediaQuery.of(context).size.width,
                            height: controller.statusList.length > 6
                                ? MediaQuery.of(context).size.height / 2
                                : MediaQuery.of(context).size.height / 3,
                            child: CommentStatusPopupWidget(
                              commentList: controller.statusList,
                            ),
                          ),
                        );
                      },
                    );
                  },
                  icon: const Icon(
                    Icons.arrow_drop_down,
                    color: Colors.black,
                  ),
                ),
              ),
              const Divider(
                thickness: 0.5,
                color: Colors.grey,
                indent: 20,
                endIndent: 20,
              ),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 5),
                child: CommentTextfield(),
              ),
            ],
          ),
        ),
        // 移除原body底部的Attach Files按钮
      ],
    );
  }
}

补充说明 #

如果需要更灵活的布局，也可以用Stack将按钮放在页面最上层，但需确保Stack是Scaffold body的父容器，且按钮的Positioned参数设置正确。不过bottomNavigationBar是最贴合Flutter组件设计规范的直接解决方案。

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