时间戳

首页 > 解决方案 > 可以让导航器适应孩子的大小吗？

flutter - 可以让导航器适应孩子的大小吗？

问题描述

我有一个导航器和一个嵌套在堆栈中的地图，导航器的子级具有动态大小。只有导航员强迫自己占据所有空间并覆盖他身后的地图。因此不可能移动地图。可以让导航器适应孩子的大小吗？

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          StreamProvider(
            create: (context) => LocationService().locationStream,
            child: MapView()
          ),
          Positioned(
            width: MediaQuery.of(context).size.width * 1,
            bottom: 0,
            child: ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: MediaQuery.of(context).size.height * 1,
                maxWidth: MediaQuery.of(context).size.width * 1
              ),
              child: navigator(),
            )
          ),
        ],
      )
    );
  }

  navigator() {
    return Navigator(
      initialRoute: 'anyview',
      onGenerateRoute: (settings) {
        Widget view;
        switch (settings.name) {
          case 'anyview':
            view = AnyViewDraggableScrollableSheet();
            break;
          case 'otheranyview':
            view = OtherAnyViewDraggableScrollableSheet();
            break;
        }
        var builder = (BuildContext _) {
          return view;
        };
        return MaterialPageRoute(builder: builder, settings: settings);
      },
    );
  }
}

这是问题的演示，导航器占用了所有可用空间，因此通过点击红色块来阻止它。 https://dartpad.dev/cd1c4d8f1067db0cc65ea2f62c2cbaad

标签： flutterflutter-layout

解决方案

Navigator 管理一组路由，您可以从中将路由推送到页面或从中弹出路由。如果您试图在 Map 上方的同一页面中拥有某个容器，我认为 Navigator 不是正确使用的小部件，除非您实际上想要在其上方有一个页面。

我建议您使用可以放置在地图上方页面底部的向上滑动面板，用户只需向上滑动即可使用或查看您希望在其上播放的任何信息或按钮。

如果您不想自己创建一个，我过去曾在相同的案例场景中使用此包取得了成功。

上滑面板封装

另外，我相信使用 Navigator 的更简单方法是， Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => MyPage())); 如果您希望路由到与当前所在页面不同的页面，并且Navigator.pop(context); 如果您希望返回上一页。还有许多其他更具体的推送和弹出方法，您可以在详细的 Flutter 文档中查找。

推荐阅读