Flutter持久化儲存之key-value儲存

Flutter程式設計指南發表於2019-03-04
Flutter持久化

前言

應用開發時會有很多的資料儲存需求，這個時候就需要用到持久化儲存技術，與iOS、安卓一樣，Flutter中也有很多種持久化儲存方式，比如key-value儲存、檔案儲存、資料庫儲存等，但其實質都是通過平臺對應的模組來實現的，本篇我們將帶大家一起了解key-value儲存的應用。

key-value儲存介紹

key-value儲存主要是平臺提供特定的api來供我們操作，其本質依然是將資料儲存到特定檔案中，只不過這些工作都由平臺幫我們做，比如iOS平臺中的NSUserDefaults、安卓平臺的SharedPreferences等等。Flutter中可以使用shared_preferences外掛來實現key-value儲存，主要儲存資料型別包括bool，int，double，String，List等等。

key-value儲存使用

引入外掛

在pubspec.yaml檔案中新增shared_preferences外掛，如下：

dependencies:
  flutter:
    sdk: flutter
  #shared_preferences外掛
  shared_preferences: 0.4.3
複製程式碼

然後命令列執行flutter packages get即可將外掛下載到本地

使用方法

外掛引入到專案後，在使用的dart檔案中匯入shared_preferences.dart檔案

import 'package:shared_preferences/shared_preferences.dart';
複製程式碼

具體使用如下，獲取SharedPreferences的單例方法是一個非同步方法，所以在使用時需要注意使用await獲取其真實物件，如下：：

Future<SharedPreferences> _prefs = SharedPreferences.getInstance();

//儲存資料
void saveMethodName() async {
    SharedPreferences prefs = await _prefs;
    prefs.setString("strKey", "strValue");
    prefs.setInt("intKey", "intValue");
    .
    .
}

//獲取資料
void initFromCache() async {
    SharedPreferences prefs = await _prefs;
    String strValue = prefs.getString("strKey");
    int intValue = prefs.getInt("intKey");
    .
    .
}
複製程式碼

舉個例子

import 'package:shared_preferences/shared_preferences.dart';

class TestPersistent extends StatefulWidget {
  final String title;

  TestPersistent({Key key, this.title}):super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return TestPersistentState();
  }

}

class TestPersistentState extends State<TestPersistent> {
  var controller = TextEditingController();
  Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
  bool mt = false;
  bool ds = false;
  bool ltb = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    initFromCache();
  }

  @override
  void dispose() {
    super.dispose();
    controller = null;
  }

  //從快取中獲取資訊填充
  void initFromCache() async {
    final SharedPreferences prefs = await _prefs;
    final nickname = prefs.getString("nickname");
    final mt = prefs.getBool("mt");
    final ds = prefs.getBool("ds");
    final ltb = prefs.getBool("ltb");
    
    //獲取到快取中的值後，使用setState更新介面資訊
    setState(() {
      controller.text = (nickname == null ? "" : nickname);
      this.mt = (mt == null ? false : mt);
      this.ds = (ds == null ? false : ds);
      this.ltb = (ltb == null ? false : ltb);
    });
  }

  //儲存介面的輸入選擇資訊
  void saveInfo(String nickname) async {
    final SharedPreferences prefs = await _prefs;
    prefs.setString("nickname", nickname);
    prefs.setBool("mt", mt);
    prefs.setBool("ds", ds);
    prefs.setBool("ltb", ltb);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(this.widget.title),
      ),
      body: Container(
        padding: EdgeInsets.all(15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: controller,
              decoration: InputDecoration(
                labelText: 'Nickname:',
                hintText: 'Please input nickname',
              ),
            ),
            Text('最近你使用過哪一款新的社交軟體'),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text('馬桶MT'),
                Switch(
                  value: mt,
                  onChanged: (isChanged) {
                    setState(() {
                      this.mt = isChanged;
                    });
                  },
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text('多閃'),
                Switch(
                  value: ds,
                  onChanged: (isChanged) {
                    setState(() {
                      this.ds = isChanged;
                    });
                  },
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text('聊天寶'),
                Switch(
                  value: ltb,
                  onChanged: (isChanged) {
                    setState(() {
                      this.ltb = isChanged;
                    });
                  },
                )
              ],
            ),
            MaterialButton(
              child: Text('儲存'),
              onPressed: () {
                print(controller.text);
                saveInfo(controller.text);
              },
            ),
          ],
        ),
      )
    );
  }

}
複製程式碼

執行效果如下：

Flutter持久化儲存之key-value儲存

shared-preferences實現原理

該外掛的實現原理很簡單，通過原始碼分析，我們發現主要是通過channel與原生平臺進行互動，通過iOS平臺的NSUserDefaults、安卓平臺的SharedPreferences來實現具體資料存取操作。

iOS平臺分析

//iOS平臺外掛原始碼

+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar> *)registrar {
  FlutterMethodChannel *channel =
      [FlutterMethodChannel methodChannelWithName:CHANNEL_NAME binaryMessenger:registrar.messenger];
  [channel setMethodCallHandler:^(FlutterMethodCall *call, FlutterResult result) {
    NSString *method = [call method];
    NSDictionary *arguments = [call arguments];

    if ([method isEqualToString:@"getAll"]) {
      result(getAllPrefs());
    } else if ([method isEqualToString:@"setBool"]) {
      NSString *key = arguments[@"key"];
      NSNumber *value = arguments[@"value"];
      [[NSUserDefaults standardUserDefaults] setBool:value.boolValue forKey:key];
      result(@YES);
    } else if ([method isEqualToString:@"setInt"]) {
      NSString *key = arguments[@"key"];
      NSNumber *value = arguments[@"value"];
      // int type in Dart can come to native side in a variety of forms
      // It is best to store it as is and send it back when needed.
      // Platform channel will handle the conversion.
      [[NSUserDefaults standardUserDefaults] setValue:value forKey:key];
      result(@YES);
    } else {
    	.
    	.
    	.
    }
  }];
}
複製程式碼

由原始碼可以看出，flutter中程式碼通過傳輸指定的method和對應的儲存資料給iOS平臺，iOS端接收到指令資料後會根據方法名來判斷執行操作的型別，然後進行對應的操作，比如setBool就會通過[NSUserDefaults standardUserDefaults]物件來儲存bool型別的資料。

安卓平臺

  private final android.content.SharedPreferences preferences;

  public static void registerWith(PluginRegistry.Registrar registrar) {
    MethodChannel channel = new MethodChannel(registrar.messenger(), CHANNEL_NAME);
    SharedPreferencesPlugin instance = new SharedPreferencesPlugin(registrar.context());
    channel.setMethodCallHandler(instance);
  }

  private SharedPreferencesPlugin(Context context) {
    preferences = context.getSharedPreferences(SHARED_PREFERENCES_NAME, Context.MODE_PRIVATE);
  }
  
  @Override
  public void onMethodCall(MethodCall call, MethodChannel.Result result) {
    String key = call.argument("key");
    boolean status = false;
    try {
      switch (call.method) {
        case "setBool":
          status = preferences.edit().putBoolean(key, (boolean) call.argument("value")).commit();
          break;
        case "setDouble":
          float floatValue = ((Number) call.argument("value")).floatValue();
          status = preferences.edit().putFloat(key, floatValue).commit();
          break;
        	.
        	.
        	.
      }
      result.success(status);
    } catch (IOException e) {
      result.error("IOException encountered", call.method, e);
    }
  }
複製程式碼

安卓端和iOS端類似，會通過一個SharedPreferences例項物件preferences來根據指定method做對應的存取資料操作。

寫在最後

本篇對持久化儲存key-value做了簡要的使用介紹，整體使用和原生一樣比較簡單，只要熟悉幾個api就OK了，key-value主要用於儲存一些簡單的配置資訊或狀態資料，輕量級的資料持久化非常合適，針對數量級比較大的資料儲存場景來說，我們就要使用到檔案儲存和資料庫儲存了，下一篇我們將帶大家一起學習file儲存，敬請期待！

說明：

文章轉載自對應的“Flutter程式設計指南”微信公眾號，更多Flutter相關技術文章開啟微信掃描二維碼關注微信公眾號獲取。

Flutter持久化儲存之key-value儲存

相關文章