flutter 导航器将底表扩展到全屏

suzh9iv8  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(166)

在BottomSheet中使用Navigator时遇到问题。
使用导航器将底部工作表扩展到全屏,而删除它则根据内容调整其高度。
在我的例子中,导航器需要能够推到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;
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  },
);
eiee3dmh

eiee3dmh1#

返回Container将覆盖整个空间。您可以使用另一个Align小部件进行 Package 。

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

更多关于layout/constraints
此外,如果您不需要导航器,您可以使用BottomSheetDisplayFeatureSubScreenDraggableScrollableSheet

builder: (BuildContext context) {
      return DisplayFeatureSubScreen(
        child: Container(
          color: Colors.white,
          child: Stack(
            fit: StackFit.loose,

相关问题