练习 - 访问 Blazor Hybrid 中的平台功能

5 分钟

在本练习中，你将添加将待办事项列表保存并加载到文件系统的功能。

添加“加载”和“保存”按钮

首先，为“加载”和“保存”按钮添加两个新的 <button> 元素，它们位于 Todo.razor 文件中的 <h3> 下方以及待办事项列表的上方。

@page "/todo"
@using BlazorHybridApp.Data

<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>

<button @onclick="Save">Save</button>
<button @onclick="Load">Load</button>

<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

在 @code 块中为 Save 和 Load 功能添加两个方法：

private async Task Save()
{
}

private void Load()
{
}

保存数据并加载到磁盘

.NET 包含 System.IO 命名空间，该命名空间包含将文件加载和保存到磁盘的功能。 .NET MAUI 会自动将此功能映射到本机 API；只需指定文件保存位置。每个平台都有用于保存用户数据的特殊位置。 .NET MAUI 中的文件系统帮助程序提供对多个平台目录的访问，包括缓存和应用数据目录。它还可以加载直接绑定到应用中的文件。现在，让我们通过使用 .NET 中内置的 System.Text.Json 方法来实现 Save 方法。

将 Microsoft.Maui.Storage、System.Text.Json 和 System.IO 的 using 指令添加到 Todo.razor 文件的顶部。

@page "/todo"
@using BlazorHybridApp.Data
@using Microsoft.Maui.Storage
@using System.IO
@using System.Text.Json

通过将数据序列化到 string 来实现 Save，为文件创建路径，并将内容写入文件：

private async Task Save()
{
    var contents = JsonSerializer.Serialize(todos);
    var path = Path.Combine(FileSystem.AppDataDirectory, "todo.json");
    File.WriteAllText(path, contents);
    await App.Current.MainPage.DisplayAlert("List Saved", $"List has been saved to {path}", "OK");
}

请注意，我们还可以访问平台弹出窗口。保存文件时，此处将显示一个警报。

通过从磁盘加载数据、反序列化数据并将项加载到待办事项列表中来实现 Load：

private void Load()
{
    var path = Path.Combine(FileSystem.AppDataDirectory, "todo.json");
    if (!File.Exists(path))
        return;
    var contents = File.ReadAllText(path);
    var savedItems = JsonSerializer.Deserialize<List<TodoItem>>(contents);
    todos.Clear();
    todos.AddRange(savedItems);
}

保存文件。如果应用尚未运行，请将其重启。
添加项、编辑项并将项标记为“已完成”以测试组件。选择 Save 按钮以将项保存到磁盘，然后关闭再重启应用或进行更改，并选择 Load 加载已保存的数据。

继续

练习 - 访问 Blazor Hybrid 中的平台功能

添加“加载”和“保存”按钮

保存数据并加载到磁盘

反馈