Flutter 页面跳转示例

本文详细介绍了Flutter中页面跳转的各种方法,包括使用Navigator、Routes和BottomNavigationBar等组件进行导航操作,同时提供了丰富的代码示例,帮助开发者更好地理解和实践Flutter应用的页面间切换。
#页面跳转发送数据
import 'package:flutter/material.dart';
void main(){
  runApp(MyApp());
}
class Product{
  final String title;
  final String description;

  Product(this.title, this.description);
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "数据传递示例",
      home: new ProductList(
        products: new List.generate(
          20,
            (i) => new 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) {
    // TODO: implement build
    return Scaffold(
      appBar: new AppBar(
        title: new Text("商品列表"),
      ),
      body: new ListView.builder(
          itemCount: products.length,
          itemBuilder: (context, index){
            return new ListTile(
              title: new Text(products[index].title),
              onTap: (){
                Navigator.push(context,
                    new MaterialPageRoute(
                    builder: (context) =>
                      new ProductDetail(product:products[index])
                    )
                );
              },
            );
          }
      ),
    );
  }
}
class ProductDetail extends StatelessWidget{
  final Product product;
  ProductDetail({Key key, @required this.product}):super(key:key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: new Text("${product.title}"),
      ),
      body:new Padding(
        padding: new EdgeInsets.all(10),
        child: new Text("${product.description}"),
      )
    );
  }
}

#---------以此为界-------------
#页面跳转返回数据
import 'package:flutter/material.dart';

class AddFriendView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: new AppBar(
        title: Text("跳转页面返回数据"),
      ),
      body: new Center(
        child: new RouteButton(),
      ),
    );
  }
}

class RouteButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new RaisedButton(
      onPressed: ((){
        _navigateToSecondPage(context);
      }),
      child: new Text("选择一个选项,任意选项"),
    );
  }
  _navigateToSecondPage(BuildContext context) async{
    final result = await Navigator.push(
        context,
        new MaterialPageRoute(builder: (context) => new SecondPage())
    );
    Scaffold.of(context).showSnackBar(new SnackBar(content:new Text("$result")));
  }
}
class SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("选择一条数据"),
      ),
      body:new Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding:const EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed:((){
                  Navigator.pop(context, '老师您好');
                }),
                child: Text("老师您好"),
              ),
            ),
            Padding(
              padding:const EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed:((){
                  Navigator.pop(context, "hi Flutter");
                }),
                child: Text("hi Flutter"),
              ),
            )
          ],
        ),
      )
    );
  }
}
#----------------------
#页面跳转动画详解
import 'package:flutter/material.dart';

class AddFriendView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: new AppBar(
        title: Text("跳转页面返回数据"),
      ),
      body: new Center(
        child: new RouteButton(),
      ),
    );
  }
}

class RouteButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
      child: Container(
//        tag: "第一张图片",
        child: Image.network(
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3495002897,1124108098&fm=27&gp=0.jpg"
        ),
      ),
      onTap: (){
        Navigator.push(context, new MaterialPageRoute(builder: (_){
          return SecondPage();
        }));
      },
    );
  }
}
class SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("第二张图片"),
      ),
      body:new Center(
        child: GestureDetector(
          child: Container(
//            tag: "第二张图片",
            child: Image.network(
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1036218379,1213399244&fm=27&gp=0.jpg"
            ),
          ),
          onTap: (){
            Navigator.pop(context);
          },
        )

      )
    );
  }
}
#---------以此为界-------------
#动画处理调解
import 'package:flutter/material.dart';

class AddFriendView extends StatelessWidget{
  final appTitle = "Flutter 详细动画";
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget{
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>{
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: new AppBar(
        title: Text("动画处理详解"),
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(
              milliseconds: 500
          ),
          child: Container(
            width: 300.0,
            height: 300.0,
            color: Colors.deepPurple,
          ),
        ),
      ),
      floatingActionButton:new FloatingActionButton(
        onPressed: (){
          setState((){
            _visible = !_visible;
          });
        },
        tooltip: '显示隐藏',
        child: Icon(Icons.flip),
      )
    );
  }

}

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值