新贵 Flutter(3) 路由

作者: zidea | 来源:发表于2019-06-11 20:47 被阅读31次
    flutter

    今天看一看在 Flutter 中的路由的实现,我们创建应用,有一个 home 页面。这是有状态的组件。下面的代码是我们最常见的代码了。

    import 'package:flutter/material.dart';
    
    void main() => runApp(MaterialApp(
          home: ZiApp(),
        ));
    
    class ZiApp extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return _ZiAppState();
      }
    }
    
    class _ZiAppState extends State<ZiApp> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold();
      }
    }
    
    

    创建更多页面

    class _ZiAppState extends State<ZiApp> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          appBar: AppBar(
            title: Text("Home Page"),
          ),
          body: Container(
            color: Colors.blue,
          ),
        );
      }
    }
    
    class About extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          appBar: AppBar(
            title: Text("About Page"),
          ),
          body: Container(
            color: Colors.green,
          ),
        );
      }
    }
    

    除了 home 页面外我又创建了一个无状态的 About 页面,给这两个页面不同标题和背景颜色便于区别。

    设置路由

    void main() => runApp(MaterialApp(
          initialRoute: '/',
          routes: {
            '/': (context) {
              return ZiApp();
            },
            '/about': (context) {
              return About();
            }
          },
        ));
    
    • 去掉 home
    • 设置 routes 参数,如果属性 react 或 vue 的路由这样代码应该不会陌生。flutter
      这样设计路由应该是给 web 开发埋下伏笔吧。分别接受两个函数,函数接收 contex 然后返回一个页面。
    • initialRoute 指定应用启动默认的路由
    floatingActionButton: FloatingActionButton(
            onPressed: () {
              Navigator.pushNamed(context, '/about');
            },
          ),
    

    给页面添加一个悬浮按钮,给其添加动作,然后调用 pushNamed 方法来切换路由,这里给出 /about 跳转的路由

    传递参数

    Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          appBar: AppBar(
            title: Text("About Page"),
          ),
          body: SizedBox.expand(child:Container(
            color: Colors.orange,
          ),),
        );
      }
    
    class About extends StatelessWidget {
      final String textData;
      About({Key key,@required this.textData}):super(key:key);
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          appBar: AppBar(
            title: Text("About Page"),
          ),
          body: SizedBox.expand(child:Container(
            color: Colors.orange,
            child: Text(textData),
          ),),
        );
      }
    }
    

    接下来我们尝试在跳转的过程中传递参数。然后将参数显示在页面,所以我们需要在页面上定义一个显示文字 Text Widget,然后为About 构造函数添加一个参数 textData,让调用页面时候传入参数。

    floatingActionButton: FloatingActionButton(
            onPressed: () {
              // Navigator.pushNamed(context, '/about');
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                return About(
                  textData: "zidea tuts",
                );
              }));
            },
          ),
    
    传送数据
    floatingActionButton: FloatingActionButton(
            onPressed: () {
              // Navigator.pushNamed(context, '/about');
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                return About(
                  textData: "zidea tuts",
                );
              })).then((value) {
                setState(() {
                  textData = value;
                });
              });
    

    在 Navigator 的 of 方法获取 context 然后这一次通过 push 而不是 pushName 来跳转指定页面。这一次传入的不再是页面的路由而是 MaterialPageRoute 对象,builder 参数需要我们传入一个回调返回 About 页面并传入textData ,这个方法接受一个回调来设置页面状态,更改页面数据。

    相关文章

      网友评论

        本文标题:新贵 Flutter(3) 路由

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