Flutter本地存儲之基本的鍵值對存儲詳解

更新時間：2023年03月21日 08:19:46 作者：島上碼農

在原生的?Android?或?iOS?中，都提供了基本的鍵值對存儲方式，在?Flutter?中，提供了?shared_preferences?這個插件來實現(xiàn)本地鍵值對數(shù)據(jù)存儲，本文就來和大家簡單聊聊吧

前言

在原生的 Android 或 iOS 中，都提供了基本的鍵值對存儲方式，Android 是 SharedPreferences，iOS 是 NSUserDefaults。在 Flutter 中，提供了 shared_preferences 這個插件來實現(xiàn)本地鍵值對數(shù)據(jù)存儲。實際上，shared_preferences 在 Android 就是使用 SharedPreferences 實現(xiàn)，在 iOS 上則是使用 NSUserDefaults 實現(xiàn)。

基本使用

在 pubspec.yaml 文件中添加以下代碼：

dependencies:
    flutter:
        sdk: flutter
    shared_preferences: ^2.0.18

我們將基礎的計數(shù)應用修改為支持從上一次結果（即存儲在本地的數(shù)值）開始增加。代碼如下：

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;
  late SharedPreferences _prefs;

  @override
  void initState() {
    super.initState();
    _loadCounter();
  }

  void _loadCounter() async {
    _prefs = await SharedPreferences.getInstance();
    setState(() {
      _counter = (_prefs.getInt('counter') ?? 0);
    });
  }

  void _incrementCounter() async {
    setState(() {
      _counter++;
    });
    await _prefs.setInt('counter', _counter);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shared Preferences 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

上面的代碼是一個基礎的計數(shù)器應用，我們定義了一個_counter變量來保存計數(shù)器的值，并且使用 SharedPreferences 實例來存儲和檢索_counter變量的值。在initState方法中，我們使用_loadCounter方法來加載_counter變量的值。在_loadCounter方法中，我們首先使用SharedPreferences.getInstance() 方法來獲取 SharedPreferences 實例，然后使用 getInt()方法來檢索 _counter 變量的值。如果檢索到的值為 null，則將 _counter 變量的值設置為 0。在 _incrementCounter 方法中，我們使用了setInt方法將 _counter 變量的值保存到 SharedPreferences 實例中來實現(xiàn)本地存儲。運行效果如下：

存儲其他類型數(shù)據(jù)

shared_preferences支持存儲的數(shù)據(jù)類型有整型、浮點型（double）、字符串、布爾型和字符串數(shù)組。如果想存儲對象，也可以通過 json 序列化和反序列化的方式實現(xiàn)。我們來看一個更復雜點的例子。

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 初始化需要存儲的值
  int _counter = 0;
  String _username = '';
  bool _isDarkModeEnabled = false;
  final _textController = TextEditingController(text: '');

  // SharedPreferences 實例
  late SharedPreferences _prefs;

  // 加載 SharedPreferences 中存儲的值
  Future<void> _loadData() async {
    _prefs = await SharedPreferences.getInstance();
    setState(() {
      _counter = _prefs.getInt('counter') ?? 0;
      _username = _prefs.getString('username') ?? '';
      _textController.text = _username;
      _isDarkModeEnabled = _prefs.getBool('isDarkModeEnabled') ?? false;
    });
  }

  void _incrementCounter() async {
    setState(() {
      _counter++;
    });
    await _prefs.setInt('counter', _counter);
  }

  // 保存用戶名
  void _saveUsername(String username) async {
    setState(() {
      _username = username;
    });
    await _prefs.setString('username', _username);
  }

  // 切換暗黑模式
  void _toggleDarkMode(bool isDarkModeEnabled) async {
    setState(() {
      _isDarkModeEnabled = isDarkModeEnabled;
    });
    await _prefs.setBool('isDarkModeEnabled', _isDarkModeEnabled);
  }

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SharedPreferences 示例',
      theme: _isDarkModeEnabled ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter SharedPreferences 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '計數(shù)器的值：$_counter',
              ),
              const SizedBox(height: 20),
              TextFormField(
                decoration: const InputDecoration(
                  labelText: '請輸入您的名字',
                ),
                controller: _textController,
                onChanged: (value) {
                  _saveUsername(value);
                },
              ),
              const SizedBox(height: 20),
              SwitchListTile(
                title: const Text('啟用暗黑模式'),
                value: _isDarkModeEnabled,
                onChanged: (value) {
                  _toggleDarkMode(value);
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: '遞增計數(shù)器的值',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

上述代碼增加了兩個類型的存儲，分別是字符串和布爾型，存儲方式其實是類似的，布爾型使用 getBool 獲取、setBool 存儲；字符串則是使用 getString和 setString。我們通過布爾型變量控制是否啟用暗黑模式，使用字符串類存儲用戶名。下面是運行的結果。

總結

可以看到shared_preferences 非常簡單，因此可以應用在簡單的鍵值對存儲中，典型的就是我們在本地換成后端的SessionId、記住用戶名和密碼、或者默認的勾選項等等。然后基于這些存儲的數(shù)據(jù)做默認值顯示和業(yè)務規(guī)則控制、或填充到請求表單里。對于復雜的業(yè)務對象存儲，則需要使用 SQL數(shù)據(jù)庫或者是 NoSQL 數(shù)據(jù)庫。

到此這篇關于Flutter本地存儲之基本的鍵值對存儲詳解的文章就介紹到這了,更多相關Flutter鍵值存儲內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Android 8.0的緩存大小和緩存清理接口方法
今天小編就為大家分享一篇Android 8.0的緩存大小和緩存清理接口方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Android與JS之間跨平臺異步調用實例詳解
這篇文章主要介紹了Android與JS之間跨平臺異步調用實例詳解的相關資料,需要的朋友可以參考下
2016-11-11
Android自定義控件實現(xiàn)球賽比分條效果
這篇文章主要為大家詳細介紹了Android自定義控件實現(xiàn)球賽比分條效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
Flutter進階質感設計之標簽欄
這篇文章主要為大家詳細介紹了Flutter進階質感設計之標簽欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-08-08
Android布局加載之LayoutInflater示例詳解
這篇文章主要介紹了Android布局加載之LayoutInflater的相關資料，文中介紹的非常詳細，對大家具有一定的參考借鑒價值，需要的朋友們下面來一起看看吧。
2017-03-03
Android仿知乎日報開屏頁效果
這篇文章主要為大家詳細介紹了Android仿知乎日報開屏頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
Android recycleView的應用和點擊事件實例詳解
這篇文章主要介紹了Android recycleView的應用和點擊事件實例詳解的相關資料,需要的朋友可以參考下
2016-12-12
Android編程之ProgressBar圓形進度條顏色設置方法
這篇文章主要介紹了Android編程之ProgressBar圓形進度條顏色設置方法,涉及ProgressBar布局及屬性設置相關操作技巧,需要的朋友可以參考下
2017-02-02
Android中實現(xiàn)為TextView添加多個可點擊的文本
這篇文章主要介紹了Android中實現(xiàn)為TextView添加多個可點擊的文本,可實現(xiàn)類似Android社交軟件顯示點贊用戶并通過用戶名稱進入該用戶主頁的功能,是非常實用的技巧,需要的朋友可以參考下
2014-09-09
Android實現(xiàn)微信登錄的示例代碼
微信登錄的實現(xiàn)與qq登錄類似。本文主要介紹了Android實現(xiàn)微信登錄，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08