flutter学习--页面跳转
一般页面导航和返回RaisedButton按钮组件它有两个最基本的属性：child：可以放入容器，图标，文字。让你构建多彩的按钮。onPressed：点击事件的相应，一般会调用Navigator组件。Navigator.push 和 Navigator.popNavigator.push：是跳转到下一个页面，它要接受两个参数一个是上下文context，另一个是要跳转的函数。...
·
一般页面导航和返回
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');
},
) ,
],
)
) ,
);
}
}
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)