MAUI学习记录

.NET MAUI学习笔记

参考文档

需创建新项目，可以点击上面的链接，进行查看

 

 

CommunityToolkit.Mvvm

官网文档

本次学习使用的是8.0.0版本，进行学习基础知识

 

 第一步：功能实现，创建一实现方法

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace MauiApp2.ViewModels
{
    public class MainPageViewModel : ObservableObject {
        //默认值空字符串
        private string _result = string.Empty;
        //定义一个属性
        public string Result
        {
            get => _result;//直接返回_result
            set => SetProperty(ref _result, value);//调用SetProperty函数，传递2个参数
        }
        //Hello World!实现
        private RelayCommand _clickMeCommand;
        //点我命令ClickMeCommand实现Result变成Hello World!
        //最终实现执行 set => SetProperty(ref _result, value);语句
        public RelayCommand ClickMeCommand =>
            _clickMeCommand ??= new RelayCommand(() => Result = "Hello World!");
    }
}

　　第二步：自定义一个存储服务的类；提供一些对象参数

using MauiApp2.ViewModels;

namespace MauiApp2;// 这地方是C#命名空间

//服务定位器
public class ServiceLocator
{
    private IServiceProvider _serviceProvider;//服务提供；提供一些对象
    //要MainPageViewModel
    public MainPageViewModel MainPageViewModel => 
        _serviceProvider.GetService<MainPageViewModel>();//依赖注入，IoC
    //添加MainPageViewModel
    public ServiceLocator()
    {
        var serviceCollection = new ServiceCollection();

        serviceCollection.AddSingleton<MainPageViewModel>();//这地方是个 单件模式的应用

        _serviceProvider = serviceCollection.BuildServiceProvider();//进行传递数据
    }
}

　　第三步：注册一个新的全局资源，便于其他页面使用

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp2"
             x:Class="MauiApp2.App">
    <!--定义资源-->
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
                
                <!--注册一个新的资源（可以理解成（全局注册，其他页面都可以使用））
                local: 就是指 xmlns:local="clr-namespace:MauiApp2" 这个语句；意思是指这个命名空间（MauiApp2）
                local:ServiceLocator  等同于  MauiApp2:ServiceLocator
                -->
                <ResourceDictionary>
                    <!--这个地方是用的HTML命名空间-->
                    <local:ServiceLocator x:Key="ServiceLocator"></local:ServiceLocator>
                </ResourceDictionary>

            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

　　第四步：进行最后页面功能的实现（Hello world）显示；

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             BindingContext="{Binding MainPageViewModel, Source={StaticResource ServiceLocator}}"
             x:Class="MauiApp2.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label Text="{Binding Result}"></Label>
            <Button Command="{Binding ClickMeCommand}"></Button>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

　　创建类步骤如下图所示：

 MVVM+IService架构：偏好储存

MVVM中包含的元素有Model，View，ViewModel

Model //承载数据

view //显示数据

ViewModel //为View准备数据

以上都不会读取数据库，就引出了今天学习的架构：MVVM + IService；访问数据库不归MVVM管，是MVVM外部的IService负责