ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

flutter学习--页面跳转

2019-05-19 21:51:07  阅读：215  来源： 互联网

标签：title Text products context 跳转 Navigator flutter 页面


一般页面导航和返回

RaisedButton按钮组件

它有两个最基本的属性：

  • child：可以放入容器，图标，文字。让你构建多彩的按钮。
  • onPressed：点击事件的相应，一般会调用Navigator组件。

Navigator.push 和 Navigator.pop

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

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

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("第一个页面"),
      ),
      body:Center(
        child: RaisedButton(onPressed: (){
          Navigator.push(context, MaterialPageRoute(builder: (context)=>SecondScreen()));
        },
        child: Text("点击跳转"),)
      ),
    );
  }
}

class SecondScreen extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(title:Text('技术胖商品详情页')),
        body:Center(child:RaisedButton(
            child:RaisedButton(
              child:Text('返回'),
              onPressed: (){
                Navigator.pop(context);
              },
            )
        ))
    );
  }
}

在这里插入图片描述
点击之后跳转
在这里插入图片描述

导航参数的传递和接收

页面跳转的时候参数的传递和接受是常用功能。

声明数据结构类

Dart中可以使用类来抽象一个数据，比如我们模仿一个商品信息，有商品标题和商品描述。我们定义了一个Product类，里边有两个字符型变量，title和description。

  • title:是商品标题。
  • description: 商品详情描述
    代码如下:
class Product {
  final String title; //商品标题
  final String description;//商品描述
  Product(this.title,this.description);//构造方法
}

构建一个商品列表

作一个商品的列表，这里我们采用动态的构造方法，在主方法里传递一个商品列表（List）到自定义的Widget中。

先来看看主方法的编写代码:

void main() => runApp(
  MaterialApp(
    title: "跳转传参",
    home: ProductList(
      products:List.generate(20, (i)=>Product("商品$i","描述$i"))
    ),
  )
);

上面的代码是主路口文件，主要是在home属性中，我们使用了ProductList，这个自定义组件，而且时候会报错，因为我们缺少这个组件。这个组件我们传递了一个products参数，也就是商品的列表数据，这个数据是我们用List.generate生成的。并且这个生成的List原型就是我们刚开始定义的Product这个类（抽象数据）。

ProductList自定义组件的代码：

class ProductList extends StatelessWidget {
  final List<Product> products;
  ProductList({Key key,@required this.products}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: ListView.builder(itemBuilder: (context,index){
        return ListTile(title: Text(products[index].title),onTap: (){
        });
      },
      itemCount: products.length,),
    );
  }
}

先接受了主方法传递过来的参数，接受后用ListView.builder方法，作了一个根据传递参数数据形成的动态列表。

导航参数的传递

使用Navigator组件，然后使用路由MaterialPageRoute传递参数，具体代码如下。

Navigator.push(
  context, 
  MaterialPageRoute(
    builder:(context)=>new ProductDetail(product:products[index])
  )
);

这段代码要写在onTap相应事件当中

子页面接受参数并显示

class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({Key key ,@required this.product}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title:Text('${product.title}'),
      ),
      body:Center(child: Text('${product.description}'),)
    );
  }
}

完整代码

import 'package:flutter/material.dart';

class Product {
  final String title; //商品标题
  final String description;//商品描述
  Product(this.title,this.description);//构造方法
}

void main() => runApp(
  MaterialApp(
    title: "跳转传参",
    home: ProductList(
      products:List.generate(20, (i)=>Product("商品$i","描述$i"))
    ),
  )
);

class ProductList extends StatelessWidget {
  final List<Product> products;
  ProductList({Key key,@required this.products}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: ListView.builder(itemBuilder: (context,index){
        return ListTile(title: Text(products[index].title),onTap: (){
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder:(context)=>new ProductDetail(product:products[index])
              )
          );
        });
      },
      itemCount: products.length,),
    );
  }
}

class ProductDetail extends StatelessWidget {

  final Product product;
  ProductDetail({Key key,@required this.product}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${product.title}'),
      ),
      body: Center(
        child: Text('${product.description}'),
      ),
    );
  }
}

在这里插入图片描述
点击跳转
在这里插入图片描述

页面跳转并返回数据

异步请求和等待

Dart中的异步请求和等待和ES6中的方法很像，直接使用async…await就可以实现。比如下面作了一个找小姐姐的方法，然后进行跳转，注意这时候是异步的。等待结果回来之后，我们再显示出来内容。具体代码如下：

 _navigateToXiaoJieJie(BuildContext context) async{ //async是启用异步方法

    final result = await Navigator.push(//等待
      context, 
      MaterialPageRoute(builder: (context)=> XiaoJieJie())
      );
      
      Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
  }
}

SnackBar的使用

SnackBar是用户操作后，显示提示信息的一个控件，类似Tost，会自动隐藏。SnackBar是以Scaffold的showSnackBar方法来进行显示的。

Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));

返回数据的方式

 Navigator.pop(context,'xxxx');  //xxx就是返回的参数

Demo:

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
      title:'页面跳转返回数据',
      home:FirstPage()
  ));
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(title:Text("找小姐姐要电话")),
        body:Center(
          child: RouteButton(),
        )
    );
  }
}

//跳转的Button
class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed:(){
        _navigateToXiaoJieJie(context);
      },
      child: Text('去找小姐姐'),
    );
  }

  _navigateToXiaoJieJie(BuildContext context) async{ //async是启用异步方法

    final result = await Navigator.push(//等待
        context,
        MaterialPageRoute(builder: (context)=> XiaoJieJie())
    );

    Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
  }
}

class XiaoJieJie extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
          title:Text('我是小姐姐')
      ),
      body:Center(
          child:Column(
            children: <Widget>[
              RaisedButton(
                child: Text('大长腿小姐姐'),
                onPressed: (){
                  Navigator.pop(context,'大长腿:1511008888');
                },
              ) ,
              RaisedButton(
                child: Text('小蛮腰小姐姐'),
                onPressed: (){
                  Navigator.pop(context,'大长腿:1511009999');
                },
              ) ,
            ],
          )
      ) ,
    );
  }
}

标签：title,Text,products,context,跳转,Navigator,flutter,页面
来源： https://blog.csdn.net/pgg_cold/article/details/90348110

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有