Flutter:如何跳转页面?

11,887 阅读1分钟

目录传送门:《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 支持通过页面名称跳转到指定页面。

当然,你需要先注册页面,在 MaterialApproutes 中。

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

现在,你可以通过刚刚注册的页面名称来跳转一个页面,就像这样:

Navigator.pushNamed(context, '/second');

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

如何找到我?

传送门:CoorChice 的主页

传送门:CoorChice 的 Github