Flutter 界面路由浅析

关键词Navigator、Route、Overlay

默认情况下,一次路由,由Navigator(route管理类)发起,Overlay(Navigator的子节点,用来挂载route的界面)切换Route(别名、界面管理类)所携带的界面。

详情

Navigator一个StatefulWidget嵌套在MaterialApp内部,其状态类NavigatorState(class NavigatorState extends State with TickerProviderStateMixin)可以在路由界面内,通过Navigator.of(context)获取。

一个标准的路由实现

    Navigator.push(context, new MaterialPageRoute(builder: (_) {
            return MyHomePage();
          }));
          
复制代码

push 内部

Future<T> push<T extends Object>(Route<T> route) {
    route.install(_currentOverlayEntry);
    // 路由表
    _history.add(route);
    // 路由动作开始,(设置焦点,开始动画)
    route.didPush();
    return route.popped;
  }
复制代码
route.install(_currentOverlayEntry)作用

1.先初始化动画相关
2. 会初始化两个界面,一个是 _modalBarrier黑色蒙层,和我们需要路由的界面 由 _buildModalScope方法返回

Iterable<OverlayEntry> createOverlayEntries() sync* {
    yield _modalBarrier = OverlayEntry(builder: _buildModalBarrier);
    yield OverlayEntry(builder: _buildModalScope, maintainState: maintainState);
  }
复制代码

_buildModalScope 返回的界面

_ModalScopeStatus(
    ...
        child: AnimatedBuilder(
        builder: (BuildContext context, Widget child) {
        // 界面切换动画
          return widget.route.buildTransitions(
            context,
            widget.route.animation,
            widget.route.secondaryAnimation,
           );
        },
        child: _page ??= RepaintBoundary(
          child: Builder(
            builder: (BuildContext context) {
            // 我们需要路由的界面
              return widget.route.buildPage(
                context,
                widget.route.animation,
                widget.route.secondaryAnimation,
              );
            },
          ),
        ),
    )
复制代码

3.调用navigator.overlay.insertAll()插入第二部初始化的界面

void insertAll(Iterable<OverlayEntry> entries, { OverlayEntry above }) {
    if (entries.isEmpty)
      return;
    for (OverlayEntry entry in entries) {
      assert(entry._overlay == null);
      entry._overlay = this;
    }
    // 更新界面
    setState(() {
      final int index = above == null ? _entries.length : _entries.indexOf(above) + 1;
      _entries.insertAll(index, entries);
    });
  }
复制代码

Overlay 嵌套Stack,通过栈来管理界面

Widget build(BuildContext context) {
...
    return _Theatre(
      onstage: Stack(
        fit: StackFit.expand,
        children: onstageChildren.reversed.toList(growable: false),
      ),
      offstage: offstageChildren,
    );
  }
复制代码

转载于:https://juejin.im/post/5cc817c2e51d456e361ed97f

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值