新贵 Flutter(3) 路由

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 ，这个方法接受一个回调来设置页面状态，更改页面数据。