美文网首页Flutter
flutter 实战补充: 本地存储shared_prefere

flutter 实战补充: 本地存储shared_prefere

作者: 码代码的小公举 | 来源:发表于2018-12-21 17:56 被阅读54次

    上一篇写了从后台获取数据,那么数据获取到了,怎么我们需要通知一个全局到数据去更新每个需要更新到的页面,类似于react里的数据派发

    shared_preferences: "^0.4.3" //本地存储
    event_bus: ^1.0.1 //通知
    我看文档的结果是通知是 EventBus eventBus = new EventBus(); 这样建立,new出来的通知不互通,那么就应该只存在一个eventBus。(感觉很鸡肋,怪怪的,不知道是不是我理解的不对)
    关于通知全局化我目前是这样做的:

    import 'package:flutter/material.dart';
    import 'package:shared_preferences/shared_preferences.dart';
    import 'package:event_bus/event_bus.dart';
    
    import './views/page1.dart';
    import './views/page2.dart';
    
    EventBus eventBus = new EventBus(); //建一个全局用的通知
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      init() async{
        SharedPreferences prefs = await SharedPreferences.getInstance();
        prefs.setString("name", "ws");
      }
      @override
      Widget build(BuildContext context) {
        eventBus.on().listen((event) {
          print("aaaa-->,$event");
        });
        init();
        return MaterialApp(//为了继承主题数据,widget需要位于MaterialApp内才能正常显示, 因此我们使用MaterialApp来运行该应用。
          title: 'title',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: '装车单',eventBus: eventBus), //通知传入页面
          routes: <String, WidgetBuilder> {
            '/page2': (BuildContext context) => Page2(title: '配送单详情', eventBus: eventBus),//通知传入页面
          },
        );
      }
    }
    
    

    这样就可以在页面之间进行通知了。
    效果:


    点击我的名字是
    告诉你叫ws
    前往配送单
    重新获取名字
    主页打印通知
    重新得到名字

    代码:

    page3:

    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    import 'dart:async';
    import 'dart:convert';
    import 'package:shared_preferences/shared_preferences.dart';
    
    class Page3 extends StatefulWidget {
      Page3({Key key, this.data, this.title, this.eventBus}) : super(key: key);
      final data;
      final title;
      final eventBus;
      @override
      _PageState createState() => _PageState();
    }
    
    class _PageState extends State<Page3> {
      var array = [];
      var obj={};
      var name = '我还不知道名字';
      Future<http.Response> fetchPost() async {
        final response = await http.get('http://192.168.0.70:5001/');
        final data = json.decode(response.body);
        setState(() {
          //setState 引起页面变化
          obj = data;
          array = data["items"];
        });
        return response;
      }
      init() async {
        SharedPreferences prefs = await SharedPreferences.getInstance();
        var userName = prefs.getString("name");
        setState(() {
          name = userName;
        });
      }
      @override
      void initState() {
        //页面初始化
        super.initState();
        fetchPost();
      }
      @override
      void dispose() {
        //页面销毁时
        super.dispose();
      }
      @override
      Widget build(BuildContext context) {
        //print(obj);//将会输出两次
        //print(array);//将会输出两次
        return Scaffold(
          body: new Center(
            child: Column(
              children: <Widget>[
                PhysicalModel (
                  color: Colors.blue,
                  elevation: 6,
                  child: Container(
                    padding: new EdgeInsets.only(top: 50,left: 40, right: 40, bottom: 19),
                    child: Container(
                      height: 40.0,
                      padding: new EdgeInsets.only(left: 10),
                      decoration: new BoxDecoration(
                        color: Colors.blue[200],
                        borderRadius: new BorderRadius.circular(25.0),
                      ),
                      child: TextFormField(
                        style: new TextStyle(color: Colors.white70,fontSize: 14),//输入文字颜色和大小
                        decoration: InputDecoration(
                          hintText: '请输入订单号搜索',//文字提示
                          hintStyle: new TextStyle(color: Colors.white70),//提示文字颜色
                          icon: Icon(Icons.search, color: Colors.white70),//图标
                          border: InputBorder.none,//去掉下划线
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  padding: new EdgeInsets.only(top: 200),
                  child: new Image.asset('images/order-empty.png'),
                ),
                new MaterialButton(
                  onPressed: () {
                    //print(widget.data);
    
                    Navigator.pushNamed(context, '/page2');
                  },
                  child: Text('前往配送单,${widget.title}'),
                ),
                new MaterialButton(
                  onPressed: () {
                    init();
                  },
                  child: Text('我的名字是?'),
                ),
                Text(name),
              ],
            ),
          )
        );
      }
    
    }
    

    page2:

    import 'package:flutter/material.dart';
    import 'package:shared_preferences/shared_preferences.dart';
    
    class Page2 extends StatefulWidget {
      Page2({Key key, this.title, this.eventBus}) : super(key: key);
      final String title;
      final eventBus;
      @override
      _PageState createState() => _PageState();
    }
    
    class _PageState extends State<Page2> {
      putName() async {
        SharedPreferences prefs = await SharedPreferences.getInstance();
        prefs.setString("name", '我是新名字,page2改的');
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: new MaterialButton(
              onPressed: () {
                widget.eventBus.fire("我是page2,我在更改全局的名字");
                putName();
                Navigator.pushNamed(context, '/');
              },
              child: Text('更改name'),
            ),
          )
        );
      }
    }
    
    

    这样就完成了全局的通知和数据共享

    相关文章

      网友评论

        本文标题:flutter 实战补充: 本地存储shared_prefere

        本文链接:https://www.haomeiwen.com/subject/nulvkqtx.html