flutter fluro 优化路由配置

问题:
错误页面如何处理?带参数的页面如何处理?
步骤:
1、错误页面处理

①在/page目录添加not_found.dart    
②实现NotFoundPage    
③在router.dart添加_notFoundHandler  
④在router.dart的configureRoutes中添加router.notFoundHandler=_notFoundHandler  
⑤修改PageContent测试  

2、带参数的页面处理

①在/page目录添加room_detail/index.dart  
②实现RoomDetailPage    
③在router.dart添加_RoomDetailHandler  
④在router.dart的configureRoutes中添加router.RoomDetailHandler=_RoomDetailHandler  
⑤修改PageContent测试  

not_found.dart

import 'package:flutter/material.dart';

class NotFoundPage extends StatelessWidget {
  const NotFoundPage({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('404'),),
      body: Center(child: Text('您访问的页面不存在')),
    );
  }
}

room_detail/index.dart

import 'package:flutter/material.dart';

class RoomDetailPage extends StatelessWidget {
  final String roomId;

  const RoomDetailPage({Key key, this.roomId}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('roomId: $roomId'),),
    );
  }
}

router.dart

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import './pages/room_detail/index.dart';
import './pages/not_found.dart';
import './pages/home/index.dart';
import './pages/login.dart';

class Routes {
  //1、定义路由名称
  static String home = '/';
  static String login = '/login';
  static String roomdetail = '/room/:roomId';
  //2、定义路由处理函数
  static Handler _homeHandler = Handler(handlerFunc: (BuildContext context, Map params) {
    return HomePage();
  });

  static Handler _loginHandler = Handler(handlerFunc: (BuildContext context, Map params) {
    return LoginPage();
  });

  static Handler _roomDetailHandler = Handler(handlerFunc: (BuildContext context, Map params) {
    return RoomDetailPage(roomId: params['roomId'][0],);
  });

  static Handler _NotFoundHandler = Handler(handlerFunc: (BuildContext context, Map params) {
    return NotFoundPage();
  });

  //3、编写函数configureRoutes关联路由名称和处理函数
  static void configureRoutes(FluroRouter router) {
    router.define(home, handler: _homeHandler);
    router.define(login, handler: _loginHandler);
    router.define(roomdetail, handler: _roomDetailHandler);
    router.notFoundHandler = _NotFoundHandler;
  }

}

效果如下:
flutter fluro 优化路由配置_第1张图片

你可能感兴趣的:(flutter)