Flutter：如何跳转页面？

目录传送门：《Flutter快速上手指南》先导篇

1.Flutter 中的页面

前面提到过，在 Flutter 中万物皆 Widget，页面天然也是一个 Widget。

只不过是一个全屏的 Widget。

如下这个 Widget 就能够做为一个页面：

class SplashPage extends StatelessWidget {
  final splashUrl =
      'https://raw.githubusercontent.com/chenBingX/img/master/其它/u=343452579,826911251&fm=26&gp=0.jpg';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      alignment: Alignment(0, 0.75),
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
              image: DecorationImage(image: NetworkImage(splashUrl))),
        ),
        GestureDetector(
          // 设置点击事件
          onTap: () {
            // 使用 Navigator 跳转页面
            Navigator.push(context, MaterialPageRoute(builder: (_) {
              return HomePage();
            }));
          },
          child: Container(
              width: 100,
              height: 40,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(6)),
                gradient: LinearGradient(
                  colors: <Color>[Colors.red, Colors.green, Colors.blue],
                ),
              ),
              child: Center(
                  child: Text(
                "Next",
                style: TextStyle(color: Colors.white, fontSize: 16),
              ))),
        ),
      ],
    );
  }
}

复制代码

应用页面：

void main() => runApp(MaterialApp(
      title: 'Flutter',
      home: SplashPage(),
    ));
复制代码

看看效果：

2.使用 Navigator 跳转页面

在 Flutter 中，使用 Navigator 来进行页面跳转。

一个简单的跳转页面的例子：

Navigator.push(context, MaterialPageRoute(builder: (_) {
            // 目标页面，即一个 Widget
            return DetailScreen();
复制代码

若是想要关闭一个页面，能够这样作：

Navigator.pop(context);
复制代码

咱们再构建一个 Scaffold 风格的页面，看看跳转的效果。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Container(
        color: Colors.white,
        child: Center(
          child: Text('This Home Pahe'),
        ),
      ),
    );
  }
}
复制代码

看看效果：

3.经过页面名称跳转

Navigator 支持经过页面名称跳转到指定页面。

固然，你须要先注册页面，在 MaterialApp 的 routes 中。

MaterialApp(
  // 设置第一个页面，即启动页
  initialRoute: '/',
  routes: {
    // 注册一个页面
    '/': (context) => FirstScreen(),
    // 注册第二个页面
    '/second': (context) => SecondScreen(),
  },
);
复制代码

如今，你能够经过刚刚注册的页面名称来跳转一个页面，就像这样：

Navigator.pushNamed(context, '/second');复制代码

目录传送门：《Flutter快速上手指南》先导篇

如何找到我？

传送门：CoorChice 的主页

传送门：CoorChice 的 Github