9. 页面的跳转

1. 页面的导航与返回

界面的导航与返回，一般都会使用到按钮的点击事件，此时，我们使用ElevatedButton()组件

class MyFirstScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("First Screen"),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("跳转详情页"),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) => MySecondScreen()));
          },
        ),
      ),
    );
  }

}

class MySecondScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second Screen"),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("返回上级页面"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }

}

Navigator.push()和Navigator.pop()

• Navigator.push: 跳转到下一个界面，它接收俩个参数，一个是上下文Context，另一个是要跳转的函数
• Navigator.pop: 返回到上一个页面，使用时传递一个Context