Android?Flutter怎么使用本地?cái)?shù)據(jù)庫(kù)編寫(xiě)備忘錄應(yīng)用

這篇“Android Flutter怎么使用本地?cái)?shù)據(jù)庫(kù)編寫(xiě)備忘錄應(yīng)用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“Android Flutter怎么使用本地?cái)?shù)據(jù)庫(kù)編寫(xiě)備忘錄應(yīng)用”文章吧。

業(yè)務(wù)需求解讀

我們先來(lái)看備忘錄的功能：

• 顯示已經(jīng)記錄的備忘錄列表，按更新時(shí)間倒序排序；

• 按標(biāo)題或內(nèi)容搜索備忘錄；

• 添加備忘錄，并保存在本地；

• 編輯備忘錄，成功后更新原有備忘錄；

• 刪除備忘錄；

• 備忘錄通常包括標(biāo)題、內(nèi)容、創(chuàng)建時(shí)間和更新時(shí)間這些屬性。

可以看到，這其實(shí)是一個(gè)典型的數(shù)據(jù)表的 CRUD 操作。

實(shí)體類(lèi)設(shè)計(jì)

我們?cè)O(shè)計(jì)一個(gè) Memo類(lèi)，包括了 id、標(biāo)題、內(nèi)容、創(chuàng)建時(shí)間和更新時(shí)間5個(gè)屬性，用來(lái)代表一個(gè)備忘錄。同時(shí)提供了兩個(gè)方法，以便和數(shù)據(jù)庫(kù)操作層面對(duì)接。代碼如下：

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),
    );
  }
}

這里說(shuō)一下，因?yàn)?SQLite 的時(shí)間戳（為1970-01-01以來(lái)的秒數(shù)）只能以整數(shù)存儲(chǔ)，因此我們需要在入庫(kù)操作（toMap）時(shí) DateTime 轉(zhuǎn)換為整數(shù)時(shí)間戳，在 出庫(kù)時(shí)（fromMap）將時(shí)間戳轉(zhuǎn)換為 DateTime。

數(shù)據(jù)庫(kù)工具類(lèi)

我們寫(xiě)一個(gè)基礎(chǔ)的數(shù)據(jù)庫(kù)工具類(lèi)，主要是初始化數(shù)據(jù)庫(kù)和創(chuàng)建數(shù)據(jù)表，代碼如下：

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)建數(shù)據(jù)表的語(yǔ)法和 MySQL 基本上是一樣的，需要注意的是字段類(lèi)型沒(méi)有 MySQL 豐富，只支持簡(jiǎn)單的整數(shù)（INTEGER）、浮點(diǎn)數(shù)（REAL）、文本（TEXT）、BLOB（二進(jìn)制格式，如存儲(chǔ)文件）。

備忘錄數(shù)據(jù)表訪問(wèn)接口

我們?yōu)閭渫浱峁┮粋€(gè)數(shù)據(jù)庫(kù)的通用的訪問(wèn)接口，包括了插入、更新、刪除和讀取備忘錄的方法。

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]);
  });
}

這里說(shuō)明一下，sqflite 提供了如下方法來(lái)支持?jǐn)?shù)據(jù)庫(kù)操作：

• insert：向指定數(shù)據(jù)表插入數(shù)據(jù)，需要提供表名和對(duì)應(yīng)的數(shù)據(jù)，其中數(shù)據(jù)為 Map 類(lèi)型，鍵名為數(shù)據(jù)表的字段名。成功后會(huì)返回插入數(shù)據(jù)的 id。

• update：按 where 條件更新數(shù)據(jù)表數(shù)據(jù)，where 條件分為兩個(gè)參數(shù)，一個(gè)是 where 表達(dá)式，其中變量使用?替代，另一個(gè)是 whereArgs 參數(shù)列表，多個(gè)參數(shù)使用數(shù)據(jù)傳遞，用于替換表達(dá)式的?通配符。where條件支持如等于、大于小于、大于等于、小于等于、NOT、AND、OR、LIKE、BETWEEN 等，具體大家可以去搜一下。

• delete：刪除where條件指定的數(shù)據(jù)，不可恢復(fù)。

• query：查詢(xún)，按指定條件查詢(xún)數(shù)據(jù)，支持按字段使用orderBy屬性進(jìn)行排序。這里我們使用了 LIKE 來(lái)搜索匹配的標(biāo)題或內(nèi)容。

UI 界面實(shí)現(xiàn)

UI 界面比較簡(jiǎn)單，我們看列表和添加頁(yè)面的代碼（編輯頁(yè)面基本和添加頁(yè)面相同）。備忘錄列表代碼如下：

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('確定要?jiǎng)h除 "${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();
    }
  }
}

列表頂部為一個(gè)搜索框，用于搜索備忘錄。備忘錄列表使用了 ListView，列表元素則使用了 ListTile 顯示標(biāo)題、更新時(shí)間和一個(gè)刪除按鈕。我們使用了 FloatingActionButton 來(lái)添加備忘錄。列表的業(yè)務(wù)邏輯如下：

• 進(jìn)入頁(yè)面從數(shù)據(jù)庫(kù)讀取備忘錄數(shù)據(jù)；

• 點(diǎn)擊某一條備忘錄進(jìn)入編輯界面，編輯成功的話(huà)刷新界面；

• 點(diǎn)擊添加按鈕進(jìn)入添加界面，添加成功的話(huà)刷新界面；

• 點(diǎn)擊刪除按鈕刪除該條備忘錄，刪除前彈窗進(jìn)行二次確認(rèn)；

• 搜索框內(nèi)容改變時(shí)從數(shù)據(jù)庫(kù)搜索備忘錄并根據(jù)搜索結(jié)果刷新界面。

• 刷新其實(shí)就是從數(shù)據(jù)庫(kù)讀取全部匹配的備忘錄數(shù)據(jù)后再通過(guò) setState 更新列表數(shù)據(jù)。

添加頁(yè)面的代碼如下：

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: '標(biāo)題'),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return '請(qǐng)輸入標(biāo)題';
                      }
                      return null;
                    },
                    onSaved: (value) {
                      _title = value!;
                    },
                  ),
                  const SizedBox(height: 16),
                  TextFormField(
                    decoration: const InputDecoration(
                      labelText: '內(nèi)容',
                      alignLabelWithHint: true,
                    ),
                    minLines: 10,
                    maxLines: null,
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return '請(qǐng)輸入內(nèi)容';
                      }
                      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)));
  }
}

添加頁(yè)面比較簡(jiǎn)單，就兩個(gè)文本框加一個(gè)保存按鈕。在保存前對(duì)標(biāo)題和內(nèi)容進(jìn)行校驗(yàn)，確保內(nèi)容不為空。在入庫(kù)前，讀取當(dāng)前時(shí)間并轉(zhuǎn)換為整數(shù)時(shí)間戳，構(gòu)建插入數(shù)據(jù)表的 Map 對(duì)象，然后執(zhí)行數(shù)據(jù)庫(kù)插入操作。成功的話(huà)給出提示信息并返回新插入的id到列表，失敗則只是顯示失敗信息。 通過(guò)列表和添加頁(yè)面我們可以看到，通過(guò)封裝方法后，其實(shí)讀寫(xiě)數(shù)據(jù)庫(kù)的操作和通過(guò)接口獲取數(shù)據(jù)差不多，因此，如果說(shuō)需要兼容數(shù)據(jù)庫(kù)和接口數(shù)據(jù)，可以統(tǒng)一接口形式，這樣可以實(shí)現(xiàn)無(wú)縫切換。

以上就是關(guān)于“Android Flutter怎么使用本地?cái)?shù)據(jù)庫(kù)編寫(xiě)備忘錄應(yīng)用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。