Flutter hive 回滚 flutter返回上个页面

admin2024-05-30  8

这个其实和之前写的传送数据至新页面是相对应的,有数据向下传送,那么就一定会有数据向上返回。

在看了官方文档后,其实用到了异步操作async 以及await关键词,我刚开始也不太懂,因为没学过,所以这里大家如果有不懂的可以去大概了解下这两个关键词的意思,主要就是异步延迟操作,也就是说我先执行可以马上执行完毕的操作,复杂的或者需要一定时间操作的先缓一缓,等到其他一些命令执行完成后再执行。

项目说明:还是延用之前汽车那个例子,点击某个汽车信息跳转到汽车详情页面后,点击返回以后,将返回的汽车名字作为提示信息在页面底部弹出。

下面撸码:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'Navigator Demon',
      home: new CarItemList(
        title: '汽车列表',
      ),
    );
  }
}

/*
汽车类,拥有两个属性,名字和颜色
 */
class Car {
  const Car(this.name, this.color);
  final name;
  final color;
}

/*
这是首页面,展示了一个50条汽车信息滚动列表,每个汽车信息行展示了一个汽车的名字和汽车的颜色
 */
class CarItemList extends StatelessWidget {
  CarItemList({Key key, this.title}) : super(key: key);
  final title;

  List<Car> cars =
      new List<Car>.generate(50, (i) => new Car('汽车 $i', '颜色是 $i'));
  //这是一个带有异步延迟操作的方法,首先是进行路由导航至下一个页面,然后延迟操作将返回的值car赋予result,这个result是一个将来值。
  enterCarDetail(BuildContext context,int index) async{
    final result = await Navigator.push(context,
        new MaterialPageRoute(builder: (context) {
          return new CarDetails(car: cars[index],);
    }));

    //这是在页面底部显示一个弹出提示
    Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('${result.name}'+'      '+'${result.color}')));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        child: new ListView.builder(
            itemCount: cars.length,
            itemBuilder: (context, index) {
              return new ListTile(
                title: new Text(cars[index].name),
                //点击后,通过路由导航至汽车详情页面,同时把点击的那个汽车信息传到下一个页面
                onTap: () {
                  enterCarDetail(context, index);
                  });
                },
      ),
      )
    );
  }
}

/*
这是汽车详细信息页面,通过首页点击某个汽车名字从而进入到这个汽车详情页面
并将在前一个页面点击某个汽车后,将汽车信息带入到本页面从而展示
 */
class CarDetails extends StatelessWidget {
  CarDetails({Key key, this.car}) : super(key: key);
  final Car car;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('汽车详情'),
      ),
      body: new Container(
        alignment: Alignment.center,
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Card(
                child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                  new Text(
                    '汽车名称:',
                    style: new TextStyle(fontSize: 20.0),
                  ),
                  new Text(
                    car.name,
                    style: new TextStyle(fontSize: 20.0),
                  )
                ])),
            new Card(
                child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                  new Text(
                    '汽车颜色:',
                    style: new TextStyle(fontSize: 20.0),
                  ),
                  new Text(
                    car.color,
                    style: new TextStyle(fontSize: 20.0),
                  )
                ])),
            new RaisedButton(
                child: new Text('返回',style: new TextStyle(fontSize: 20.0),),
                //返回按钮,点击以后将路由退出路由栈,同时将car返回给上一个页面。
                onPressed: (){
                  Navigator.pop(context,car);
                })
          ],
        ),
      ),
    );
  }
}

运行效果如下:点击返回按钮,回到前一个页面,同时在下面弹出显示返回的汽车数据信息。

Flutter hive 回滚 flutter返回上个页面,Flutter hive 回滚 flutter返回上个页面_Flutter hive 回滚,第1张

  

Flutter hive 回滚 flutter返回上个页面,Flutter hive 回滚 flutter返回上个页面_Text_02,第2张

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!