Navigator 将 BottomSheet 扩展到全屏

Question

我在 BottomSheet 中使用

Navigator

时遇到问题。

使用 Navigator 将 BottomSheet 展开至全屏，而删除它则根据内容调整其高度。

就我而言，导航器需要能够推送到 BottomSheet 中稍后的视图。

所需的行为是根据内容动态高度，而不是全屏扩展。

代码示例：

 await showModalBottomSheet<void>(
  isDismissible: true,
  useSafeArea: true,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  context: blocContext,
  builder: (BuildContext context) {
    return Navigator(
      onGenerateRoute: (context) => MaterialPageRoute<ModalRoute>(
        fullscreenDialog: false,
        builder: (context) => Container(
          color: Colors.white,
          child: Stack(
            fit: StackFit.loose,
            children: [
              CustomScrollView(
                shrinkWrap: true,
                slivers: [
                  SliverToBoxAdapter(
                    child: Container(
                      height: 50,
                      width: 50,
                      color: Colors.yellow,
                    ),
                  ),
                  SliverList.separated(
                    itemCount: 5,
                    itemBuilder: (context, index) {
                      return Container(
                        height: 30,
                        color: Colors.green,
                      );
                    },
                    separatorBuilder: (context, index) {
                      return gapH20;
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  },
);

Answer 1

返回

Container

将覆盖整个空间。您可以用另一个

Align

小部件包裹。

return Navigator(
  onGenerateRoute: (context) => MaterialPageRoute<ModalRoute>(
    fullscreenDialog: false,
    builder: (context) => Align(
      alignment: Alignment.bottomCenter, //this
      child: Container(
        color: Colors.white,

更多关于布局/约束。