Flutter插件yana的使用_yana提供了一种方便的方式来使用声明式的基于状态可测试的导航

Flutter插件yana的使用_yana提供了一种方便的方式来使用声明式的基于状态可测试的导航

YANA 提供了一种方便的方式来使用声明式的基于状态可测试的导航。它是无粗糙边缘的 Navigator 2.0。

声明式

声明式方法将导航与用户界面和业务逻辑分离。不再需要在奇怪的地方使用 Navigator.push 和 Navigator.pop。

TreeNavNode buildNavigation(state) => firstOf<AppState>(
      when: always,
      pages: [
        _loginFlow(),
        _authedFlow(),
      ],
    )(state);

_loginFlow() => anyOf<AppState>(
      when: hasNoUser,
      pages: [
        materialPage(
          when: always,
          name: ScreenKeys.authorization,
          builder: (_) => const LoginScreen(),
          onPopPage: () => false,
        )
      ],
    );

_authedFlow() => anyOf<AppState>(
      when: hasUser,
      pages: [
        materialPage(
          when: always,
          name: ScreenKeys.books,
          builder: (_) => const BooksScreen(),
          onPopPage: () => false,
        ),
        materialPage(
          when: hasSelectedBook,
          name: ScreenKeys.bookDetails,
          builder: (_) => const BookDetailsScreen(),
          onPopPage: () => false,
        ),
      ],
    );

基于状态驱动

基于状态的导航总是可以预测的屏幕。感谢 Navigator 2.0！

class AppRouterDelegate {
  TreeNavNode _navNode;
  StreamSubscription<AppState> _storeSubscription;

  AppRouterDelegate(store) {
    _storeSubscription = store.onChange.listen((event) {
      _navNode = buildNavigation(store);
      notifyListeners();
    });
  }

  @override
  Widget build(BuildContext context) {
    final node = _navNode;
    final pages = [...node.pages];

    return Navigator(
      key: navigatorKey,
      pages: pages,
      onPopPage: (route, result) {
        if (node.onPopPage!(route, result)) {
          return route.didPop(result);
        }
        return false;
      },
    );
  }
}

可测试

简单的单元测试保证每个状态都转化为预期的导航配置。检查示例中的测试以获取详细信息。

var pages = buildNavigation(state).pages;

expect(pages, hasLength(1));
expect(pages[0].name, equals(ScreenKeys.authorization));

state.loggedIn = true;
pages = buildNavigation(state).pages;

expect(pages, hasLength(1));
expect(pages[0].name, equals(ScreenKeys.books));