美文网首页androidflutter
Flutter 页面跳转

Flutter 页面跳转

作者: sirai | 来源:发表于2019-06-17 11:25 被阅读17次
    • 基本用法 跳转到内容页并传递数据 不能侧滑 MaterialPageRoute
    import 'package:flutter_pro/index/custom_button.dart';
    
    class EditUser extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new RaisedButton(onPressed: (){
          Navigator.push(
            context,
            new MaterialPageRoute(
              builder: (context) => new CustomButton('测试跳转'),
            ),
          );
        },child: new Text('修改用户'),);
      }
    
    • 返回上一页面
    Navigator.pop(context)
    
    • 命名导航器路由
      通常,移动应用管理着大量的路由,并且最容易的是使用名称来引用它们。路由名称通常使用路径结构:“/a/b/c”,主页默认为 “/”。 当然 也可以写标示名字 比如welocme 我们就可以理解为欢迎页面 不过主要定义的大概是登录页面

    创建 MaterialApp 时可以指定 routes 参数,该参数是一个映射路由名称和构造器的 Map。MaterialApp 使用此映射为导航器的 onGenerateRoute 回调参数提供路由。

     return new MaterialApp(
            home: new Scaffold(
              body: new Center(
                  child: _currentPage
              ),
              bottomNavigationBar: bottomNavigationBar,
            ),
            theme: GlobalConfig.themeData,
          routes: {
           "nameRoute":(BuildContext context)=>new EditUser(),
            "welcome":(BuildContext context)=>new HomePage(),
            '/new':(BuildContext context)=>new HomePage(),
          },
        );
    

    使用的时候

    Navigator.of(context).pushNamed('/new');
    Navigator.of(context).pushNamed('welcome');
    
    

    ios 侧滑退出 CupertinoPageRoute

    定义一个NavigatorUtils 类
    class NavigatorUtils {
    
     ///搜索
      static Future goSearchPage(BuildContext context) {
        return NavigatorRouter(context, new SearchPage());
      }
    
     ///公共打开方式
      static NavigatorRouter(BuildContext context, Widget widget) {
        return Navigator.push(context,
            new CupertinoPageRoute(builder: (context) => pageContainer(widget)));
      }
    
      ///Page页面的容器,做一次通用自定义
      static Widget pageContainer(widget) {
        return MediaQuery(
    
            ///不受系统字体缩放影响
            data: MediaQueryData.fromWindow(WidgetsBinding.instance.window)
                .copyWith(textScaleFactor: 1),
            child: widget);
      }
    }
    

    外部调用 比如按钮点击事件 直接调用此方法 就可以

      NavigatorUtils.goSearchPage(context);
    

    相关文章

      网友评论

        本文标题:Flutter 页面跳转

        本文链接:https://www.haomeiwen.com/subject/tviofctx.html