Android?Flutter使用本地數據庫編寫備忘錄應用
更新時間：2023年03月27日 08:19:07 作者：島上碼農
這篇文章主要為大家詳細介紹了Android?Flutter如何使用本地數據庫實現(xiàn)編寫簡單的備忘錄應用，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
前言
前面一篇我們介紹了使用 shared_preferences實現(xiàn)簡單的鍵值對存儲，然而我們還會面臨更為復雜的本地存儲。比如資訊類 App會緩存一部分上次加載的內容，在沒有網絡的情況下也能夠提供內容；比如微信的聊天記錄都是存儲在手機客戶端。當我們需要在本地存儲大量結構化的數據的時候，使用 shared_preferences 顯然是不夠的。這個時候我們就需要使用本地數據庫，移動端最為常用的本地數據庫是 SQLite。在 Flutter中同樣提供了對 SQLite 的支持，我們可以使用 sqflite 這個插件搞定結構化數據的本地存儲。本篇我們以一個完整的備忘錄的實例來講述如何使用 sqflite。
業(yè)務需求解讀
我們先來看備忘錄的功能：
- 顯示已經記錄的備忘錄列表，按更新時間倒序排序；
- 按標題或內容搜索備忘錄；
- 添加備忘錄，并保存在本地；
- 編輯備忘錄，成功后更新原有備忘錄；
- 刪除備忘錄；
- 備忘錄通常包括標題、內容、創(chuàng)建時間和更新時間這些屬性。
可以看到，這其實是一個典型的數據表的 CRUD 操作。
實體類設計
我們設計一個 Memo類，包括了 id、標題、內容、創(chuàng)建時間和更新時間5個屬性，用來代表一個備忘錄。同時提供了兩個方法，以便和數據庫操作層面對接。代碼如下：
import 'package:flutter/material.dart';
class Memo {
late int id;
late String title;
late String content;
late DateTime createdTime;
late DateTime modifiedTime;
Memo({
required this.id,
required this.title,
required this.content,
required this.createdTime,
required this.modifiedTime,
});
Map<String, dynamic> toMap() {
var createdTimestamp = createdTime.millisecondsSinceEpoch ~/ 1000;
var modifiedTimestamp = modifiedTime.millisecondsSinceEpoch ~/ 1000;
return {
'id': id,
'title': title,
'content': content,
'created_time': createdTimestamp,
'modified_time': modifiedTimestamp
};
}
factory Memo.fromMap(Map<String, dynamic> map) {
var createdTimestamp = map['created_time'] as int;
var modifiedTimestamp = map['modified_time'] as int;
return Memo(
id: map['id'] as int,
title: map['title'] as String,
content: map['content'] as String,
createdTime: DateTime.fromMillisecondsSinceEpoch(createdTimestamp * 1000),
modifiedTime:
DateTime.fromMillisecondsSinceEpoch(modifiedTimestamp * 1000),
);
}
}這里說一下，因為 SQLite 的時間戳（為1970-01-01以來的秒數）只能以整數存儲，因此我們需要在入庫操作（toMap）時 DateTime 轉換為整數時間戳，在 出庫時（fromMap）將時間戳轉換為 DateTime。
數據庫工具類
我們寫一個基礎的數據庫工具類，主要是初始化數據庫和創(chuàng)建數據表，代碼如下：
import 'dart:async';
import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';
class DatabaseHelper {
static final DatabaseHelper instance = DatabaseHelper._init();
static Database? _database;
DatabaseHelper._init();
Future<Database> get database async {
if (_database != null) return _database!;
_database = await _initDB('database.db');
return _database!;
}
Future<Database> _initDB(String filePath) async {
final dbPath = await getDatabasesPath();
final path = join(dbPath, filePath);
return await openDatabase(path, version: 1, onCreate: _createDB);
}
Future<void> _createDB(Database db, int version) async {
await db.execute('''
CREATE TABLE memo (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT,
content TEXT,
created_time INTEGER,
modified_time INTEGER
)
''');
}
}創(chuàng)建數據表的語法和 MySQL 基本上是一樣的，需要注意的是字段類型沒有 MySQL 豐富，只支持簡單的整數（INTEGER）、浮點數（REAL）、文本（TEXT）、BLOB（二進制格式，如存儲文件）。
備忘錄數據表訪問接口
我們?yōu)閭渫浱峁┮粋€數據庫的通用的訪問接口，包括了插入、更新、刪除和讀取備忘錄的方法。
import 'database_helper.dart';
import 'memo.dart';
Future<int> insertMemo(Map<String, dynamic> memoMap) async {
final db = await DatabaseHelper.instance.database;
return await db.insert('memo', memoMap);
}
Future<int> updateMemo(Memo memo) async {
final db = await DatabaseHelper.instance.database;
return await db
.update('memo', memo.toMap(), where: 'id = ?', whereArgs: [memo.id]);
}
Future<int> deleteMemo(int id) async {
final db = await DatabaseHelper.instance.database;
return await db.delete('memo', where: 'id = ?', whereArgs: [id]);
}
Future<List<Memo>> getMemos({String? searchKey}) async {
var where = searchKey != null ? 'title LIKE ? OR content LIKE ?' : null;
var whereArgs = searchKey != null ? ['%$searchKey%', '%$searchKey%'] : null;
final db = await DatabaseHelper.instance.database;
final List<Map<String, dynamic>> maps = await db.query(
'memo',
orderBy: 'modified_time DESC',
where: where,
whereArgs: whereArgs,
);
return List.generate(maps.length, (i) {
return Memo.fromMap(maps[i]);
});
}這里說明一下，sqflite 提供了如下方法來支持數據庫操作：
insert：向指定數據表插入數據，需要提供表名和對應的數據，其中數據為Map類型，鍵名為數據表的字段名。成功后會返回插入數據的id。update：按where條件更新數據表數據，where條件分為兩個參數，一個是where表達式，其中變量使用?替代，另一個是whereArgs參數列表，多個參數使用數據傳遞，用于替換表達式的?通配符。where條件支持如等于、大于小于、大于等于、小于等于、NOT、AND、OR、LIKE、BETWEEN 等，具體大家可以去搜一下。delete：刪除where條件指定的數據，不可恢復。query：查詢，按指定條件查詢數據，支持按字段使用orderBy屬性進行排序。這里我們使用了LIKE來搜索匹配的標題或內容。
UI 界面實現(xiàn)
UI 界面比較簡單，我們看列表和添加頁面的代碼（編輯頁面基本和添加頁面相同）。備忘錄列表代碼如下：
class MemoListScreen extends StatefulWidget {
const MemoListScreen({Key? key}) : super(key: key);
@override
MemoListScreenState createState() => MemoListScreenState();
}
class MemoListScreenState extends State<MemoListScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
List<Memo> _memoList = [];
@override
void initState() {
super.initState();
_refreshMemoList();
}
void _refreshMemoList({String? searchKey}) async {
List<Memo> memoList = await getMemos(searchKey: searchKey);
setState(() {
_memoList = memoList;
});
}
void _deleteMemo(Memo memo) async {
final confirmed = await _showDeleteConfirmationDialog(memo);
if (confirmed != null && confirmed) {
await deleteMemo(memo.id);
_refreshMemoList();
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('已刪除 "${memo.title}"'),
duration: const Duration(seconds: 2),
));
}
}
Future<bool?> _showDeleteConfirmationDialog(Memo memo) async {
return showDialog<bool>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('刪除備忘錄'),
content: Text('確定要刪除 "${memo.title}"這條備忘錄嗎？'),
actions: [
TextButton(
child: const Text(
'取消',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () => Navigator.pop(context, false),
),
TextButton(
child: Text('刪除',
style: TextStyle(
color: Colors.red[300],
)),
onPressed: () => Navigator.pop(context, true),
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('備忘錄'),
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(
hintText: '搜索備忘錄',
prefixIcon: const Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
),
),
onChanged: (value) {
_refreshMemoList(searchKey: value);
},
),
),
Expanded(
child: ListView.builder(
itemCount: _memoList.length,
itemBuilder: (context, index) {
Memo memo = _memoList[index];
return ListTile(
title: Text(memo.title),
subtitle:
Text('${DateFormat.yMMMd().format(memo.modifiedTime)}更新'),
onTap: () {
_navigateToEditScreen(memo);
},
trailing: IconButton(
icon: const Icon(Icons.delete_forever_outlined),
onPressed: () {
_deleteMemo(memo);
},
),
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
child: const Icon(Icons.add),
onPressed: () async {
_navigateToAddScreen();
},
),
);
}
_navigateToAddScreen() async {
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => const MemoAddScreen()),
);
if (result != null) {
_refreshMemoList();
}
}
_navigateToEditScreen(Memo memo) async {
final count = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => MemoEditScreen(memo: memo)),
);
if (count != null && count > 0) {
_refreshMemoList();
}
}
}列表頂部為一個搜索框，用于搜索備忘錄。備忘錄列表使用了 ListView，列表元素則使用了 ListTile 顯示標題、更新時間和一個刪除按鈕。我們使用了 FloatingActionButton 來添加備忘錄。列表的業(yè)務邏輯如下：
- 進入頁面從數據庫讀取備忘錄數據；
- 點擊某一條備忘錄進入編輯界面，編輯成功的話刷新界面；
- 點擊添加按鈕進入添加界面，添加成功的話刷新界面；
- 點擊刪除按鈕刪除該條備忘錄，刪除前彈窗進行二次確認；
- 搜索框內容改變時從數據庫搜索備忘錄并根據搜索結果刷新界面。
- 刷新其實就是從數據庫讀取全部匹配的備忘錄數據后再通過 setState 更新列表數據。
添加頁面的代碼如下：
import 'package:flutter/material.dart';
import '../common/button_color.dart';
import 'memo_provider.dart';
class MemoAddScreen extends StatefulWidget {
const MemoAddScreen({Key? key}) : super(key: key);
@override
MemoAddScreenState createState() => MemoAddScreenState();
}
class MemoAddScreenState extends State<MemoAddScreen> {
final _formKey = GlobalKey<FormState>();
late String _title, _content;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('添加備忘錄'),
),
body: Builder(builder: (BuildContext context) {
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextFormField(
decoration: const InputDecoration(labelText: '標題'),
validator: (value) {
if (value == null || value.isEmpty) {
return '請輸入標題';
}
return null;
},
onSaved: (value) {
_title = value!;
},
),
const SizedBox(height: 16),
TextFormField(
decoration: const InputDecoration(
labelText: '內容',
alignLabelWithHint: true,
),
minLines: 10,
maxLines: null,
validator: (value) {
if (value == null || value.isEmpty) {
return '請輸入內容';
}
return null;
},
onSaved: (value) {
_content = value!;
},
),
const SizedBox(height: 16),
ElevatedButton(
style: ButtonStyle(
backgroundColor: PrimaryButtonColor(
context: context,
),
),
onPressed: () async {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
var id = await saveMemo(context);
if (id > 0) {
_showSnackBar(context, '備忘錄已保存');
Navigator.of(context).pop(id);
} else {
_showSnackBar(context, '備忘錄保存失敗');
}
}
},
child: const Text(
'保 存',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
),
],
),
),
),
);
}),
);
}
Future<int> saveMemo(BuildContext context) async {
var createdTimestamp = DateTime.now().millisecondsSinceEpoch ~/ 1000;
var modifiedTimestamp = createdTimestamp;
var memoMap = {
'title': _title,
'content': _content,
'created_time': createdTimestamp,
'modified_time': modifiedTimestamp,
};
// 保存?zhèn)渫?
var id = await insertMemo(memoMap);
return id;
}
void _showSnackBar(BuildContext context, String message) async {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text(message)));
}
}添加頁面比較簡單，就兩個文本框加一個保存按鈕。在保存前對標題和內容進行校驗，確保內容不為空。在入庫前，讀取當前時間并轉換為整數時間戳，構建插入數據表的 Map 對象，然后執(zhí)行數據庫插入操作。成功的話給出提示信息并返回新插入的id到列表，失敗則只是顯示失敗信息。 通過列表和添加頁面我們可以看到，通過封裝方法后，其實讀寫數據庫的操作和通過接口獲取數據差不多，因此，如果說需要兼容數據庫和接口數據，可以統(tǒng)一接口形式，這樣可以實現(xiàn)無縫切換。
運行結果
我們來看看運行結果，如下圖所示。完整代碼已經上傳到：https://gitee.com/island-coder/flutter-beginner/tree/master/local_storage。
總結
本篇通過一個完整的備忘錄實例講解了在 Flutter 中如何使用 sqflite 實現(xiàn)結構化數據本地存儲。在實際的 App 開發(fā)中，我們會經常遇到需要將大量的數據進行本地化存儲的需求。備忘錄是典型的一種，還有諸如記賬、筆記、資訊、即時聊天等等應用都會有類似的需求。相信通過本篇，能讓 Flutter 開發(fā)同學應對基礎的結構化存儲的業(yè)務開發(fā)。
到此這篇關于Android Flutter使用本地數據庫編寫備忘錄應用的文章就介紹到這了,更多相關Android Flutter備忘錄內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Adnroid 自定義ProgressDialog加載中(加載圈)
這篇文章主要介紹了Adnroid 自定義ProgressDialog加載中(加載圈),需要的朋友可以參考下2017-06-06
Android App中的多個LinearLayout嵌套布局實例解析
這篇文章主要介紹了Android App中的多個LinearLayout嵌套布局實例,利用線性布局來排列按鈕是安卓應用布局中的常用做法,需要的朋友可以參考下2016-04-04
Android Fragment+FragmentTabHost組件實現(xiàn)常見主頁面（仿微信新浪）
本文主要介紹Fragment+FragmentTabHost組件實現(xiàn)常見主頁面，這里整理了詳細資料及簡單示例代碼，有興趣的小伙伴可以參考下2016-09-09
android LabelView實現(xiàn)標簽云效果
這篇文章主要為大家詳細介紹了android LabelView實現(xiàn)標簽云效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
Android SharedPreferences四種操作模式使用詳解
這篇文章主要介紹了Android SharedPreferences四種操作模式使用詳解的相關資料,這里介紹了獲取Android SharedPreferences的兩種方法及比較，和操作模式的介紹，需要的朋友可以參考下2017-07-07
這篇文章我們來講協(xié)程的啟動，畢竟協(xié)程是一個很強大的設計模式，深入了解需要花很多的時間，我們先從簡單開始，其實學會了簡單的使用，基本已經可以滿足我們平時的開發(fā)需要了，話不多說，開始2022-09-09
很多在多年前使用過Android手機的朋友,可能對于Android 4.0時代盛行的桌面小組件功能有著很深的印象,下面這篇文章主要給大家介紹了關于Android小組件添加到主屏幕(手機桌面)的相關資料,需要的朋友可以參考下2023-06-06
Android實現(xiàn)RecyclerView下拉刷新效果
這篇文章主要為大家詳細介紹了Android實現(xiàn)RecyclerView下拉刷新效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Android中ContentProvider和ContentResolver詳解
這篇文章主要介紹了Android中ContentProvider和ContentResolver詳解的相關資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Android仿優(yōu)酷視頻的懸浮窗播放效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07