【Flutter】三十二、Flutter分離路由配置

    上篇文章中的路由配置是直接配置在main.dart中,爲了降低代碼的耦合度,下面將路由配置分離出來。

Routes.dart

import 'package:flutter/material.dart';
import 'package:flutterdemo/route_pages/BottomNav.dart';
import 'package:flutterdemo/route_pages/PageOne.dart';
final routes = {
  '/': (context) => BottomNav(),
  '/pageone': (context, {arguments}) => PageOne(arguments: arguments)
};

Route onGenerateRoute (RouteSettings settings) {
  final String name = settings.name;
  final Function routeBuilder = routes[name];
  if (routeBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
        builder: (context) => routeBuilder(context, arguments: settings.arguments)
      );
      return route;
    }else {
      final Route route = MaterialPageRoute(
          builder: (context) => routeBuilder(context)
      );
      return route;
    }
  }
}

main.dart

import 'package:flutter/material.dart';
import './pages/route/Page.dart';
import 'package:flutterdemo/routes/Routes.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: onGenerateRoute,
      initialRoute: '/',   
    );
  }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章