您现在的位置是:首页 > 网络技术网络技术

Flutter学习笔记十三——页面跳转与返回

查看 旭日哥哥 的更多文章2021-03-08【网络技术】131人已围观

简单的页面跳转与返回

需求:从第一个页面上点击按钮跳转到第二个页面,然后再从第二个页面上点击按钮返回第一个页面。
如图所示:





























示例代码:

import 'package:flutter/material.dart';void main() {
  runApp(MaterialApp(
    title: '导航演示1',
    home: FirstScreen(),
  ));}class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('页面一'),
        backgroundColor: Colors.blueAccent,
        centerTitle: true,
      ),
      body: Center(
        child: RaisedButton(
          child: Text(
            '跳转到页面二',
            style: TextStyle(color: Colors.white),
          ),
          color: Colors.blueAccent,
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => SecondScreen()));
          },
        ),
      ),
    );
  }}class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('页面二'),
        backgroundColor: Colors.purple,
        centerTitle: true,
      ),
      body: Center(
        child: RaisedButton(
          child: Text(
            '返回到页面一',
            style: TextStyle(color: Colors.white),
          ),
          color: Colors.purpleAccent,
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }}

RaisedButton按钮组件

基本属性:

  • child:可以放入容器、图标、文字,构建样式丰富的按钮。

  • color:按钮的背景颜色

  • onPressed:点击事件的相应,类似于View.OnClickListener()方法。

Navigator.push 和 Navigator.pop

  • Navigator.push:跳转到下一个页面,它要接受两个参数,一个是上下文context,另一个是要跳转的函数Route

  • Navigator.pop:返回到上一个页面,使用时传递一个context(上下文)参数,使用时要注意的是,你必须是有上级页面的,也就是说上级页面使用了Navigator.push。

Tags: flutter

文章评论

猜你喜欢

爱诚帝

V管理员
文章 320 篇 | 评论 4 次
最新文章

最新留言