MAUI

官方文档

一、什么是MAUI

1.1 简单介绍

读音 “猫义”

Multi-platform App UI
作为Xamarin（“簪摩人”）的晋升版，用C#与XAML（“簪帽儿”）可跨平台的应用程序。

dotNET MAUI Blazor

1.2 MVVM框架介绍

为了防止前端显示逻辑、数据显示逻辑、数据存储逻辑等都放在一块，杂糅，难维护易出错，采用的 MVVM 架构

Model 、 View 、ViewModel
类比于MVC：Model、View、Controller

MVC：Controller干活，将Model return给 View。
MVVM：“数据绑定”机制，将 View 和 ViewModel 绑定起来。View单向盯着ViewModel

Model：承载数据信息（承载Service返回的结果）
View：显示数据信息（前端）
※Controller：逻辑控制。控制 Model 显示在 View 中
※ViewModel：类似于Controller。把 Model 对象封装成可以显示和接受输入的界面数据对象。

Controller 使用DAO连接使用数据库
ViewModel 也可以调用 I接口（IServices） 连接使用数据库

MVC派的看法是，界面上的每个变化都是一个事件，我只需要针对每个事件写一堆代码，来把用户的输入转换成model里的对象就行了，这堆代码可以叫controller。

而MVVM派的看法是，我给view里面的各种控件也定义一个对应的数据对象，这样，只要修改这个数据对象，view里面显示的内容就自动跟着刷新，而在view 里做了任何操作，这个数据对象也跟着自动更新

I接口(IServices) 常放在项目下的文件夹 Services中，接口常返回Model。
Model常放在项目下的文件夹 Model 中。

HelloWorld 项目中 MVVM 架构关系

1.3 四个重要代码文件

1. MauiProgram.cs：

这是一个用于启动应用的代码文件；
此文件中的代码充当应用的跨平台入口点，用于配置和启动应用；
模板启动代码指向 App.xaml 定义的 APP类。

2. App.xaml 和 App.xaml.cs：

为了简单起见，这两个文件都称为单个文件；
通常有两个包含任何 XAML 文件的文件，即 .xaml 文件本身，以及作为其子项的相应代码文件解决方案资源管理器；
.xaml 文件包含 XAML 标记，代码文件包含用户创建的用于与 XAML 标记交互的代码；
App.xaml 包含应用范围的 XAML资源，例如颜色、样式或模板；
App.xaml.cs 通常包含实例化 Shell应用程序的代码，在此项目中，它指向 AppShell类。

3. AppShell.xaml 和 AppShell.xaml.cs：

此文件定义 AppShell类，该类用于定义应用的可视层次结构。

4. MainPage.xaml 和 MainPage.xaml.cs：

这是应用显示的启动页；
MainPage.xaml 定义UI；
MainPage.xaml.cs 包含 XAML 的代码隐藏，如按钮单击事件的代码。

二、XAML

eXtensible Application Markup Language (XAML) 是一种基于 XML 的语言，它替代了编程代码来实例化和初始化对象，并将这些对象组织在父子层次结构中。

2.1 基本语法

2.1.1 设置标记中对象元素属性

XAML 中，类的属性通常设置为 XML 属性:

<Label Text="Hello, XAML!"
       TextColor="Aqua" />

Label 为对象元素，为用MAUI对象表示的XML元素；

在XML中，属性接受的赋值只有 string 类型。

有时属性值可能过于复杂，无法简单设置为 string（例如多行多列设置），为了处理这一问题，在XAML中还有另一种设置属性的写法：

<Label Text="Hello, XAML!">
    <Label.TextColor>
        Aqua
    </Label.TextColor>
</Label>

此时 Label.TextColor 变成了属性元素。

2.1.2 附加属性

在设置含有多行列的 Grid 对象标记时，需要在子项表明所在 Grid 中的行与列，这时就需要用到附加属性技术。

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
<!-- 3*3 ,从0开始设置，行列默认为0，行列Span默认为1 -->
        <!-- d1行d1列 -->
        <Label Text="Autosized cell"
               TextColor="White"
               BackgroundColor="Blue" />
        <!-- d1行d2列 -->
        <BoxView Color="Silver"
                 Grid.Column="1" />        
    </Grid>

2.2 标记扩展

XAML 标记扩展允许将属性设置为从其他源间接引用的对象或值。XAML 标记扩展对于共享对象和引用整个应用中使用的常量尤为重要，并且在数据绑定中得到了最大的效用。

由 "{}" 包裹

2.2.1 用途

① 资源共享：

搭配 “资源字典”(ResourceDictionary)，保证多个 在资源字典里面定义的 重复的属性可以同时被修改；

   <Button Text="Do this!"
           HorizontalOptions="Center"
           VerticalOptions="Center"/>


   //equals

   <ContentPage.Resources>
     <LayoutOptions x:Key="horzOptions"
                    Alignment="Center" />
     <LayoutOptions x:Key="vertOptions"
                    Alignment="Center" />
   </ContentPage.Resources>
   <Button Text="Do this!"
           HorizontalOptions="{StaticResource horzOptions}"
           VerticalOptions="{StaticResource vertOptions}"/>

搭配 x:Static 引用自己代码中的静态字段或属性。

②

2.2.2 自定义标记扩展

2.3 数据绑定

MAUI允许链接两个对象的属性，以便一个对象的更改会导致另一个对象的更改。

① 数据绑定：

连接两个对象的属性，称为源和目标。

目标对象的 BindingContext 属性必须设置为 源对象。
在目标对象上调用 SetBinding 方法

② 紧紧遵循上文

在当前部分上文离得最近 Binding的内容决定了可以继续 Binding 的范围；
Binding 后面为空则表示绑定到上文的内容本身。
(e.g.在上文绑定了 Poetry 类，在属性中即可以绑定类中的 Title 元素)

2.4 XAML命名空间

2.4.1 默认命名空间

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

使用无前缀的 XAML文件定义的元素来引用 MAUI类（eg.ContentPage, Label, and Button）

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

XAML使用前缀来定义那些非默认命名空间。
使用带x前缀使用 XAML 中固有元素和属性。

2.4.2 声明类型命名空间

XAML 支持通过声明带前缀的XAML命名空间来引用类型。

clr-namespace: 或者 using: 后接命名空间;
xmlns:程序集名= 作为命名空间对应的程序集名称;

即：

xmlns:{XML namespace name}="clr-namespace:{.NET namespace}"

2.5 参数传递

2. XAML 优势

比起相同功能的 C# 代码，更简略、更易读；
将 UI设计 和 行为逻辑 分离；
（前端人员编辑UI界面，后端人员处理逻辑代码）

2. 添加自己的程序集类型

<ContentPage ...
             xmlns:mycode="clr-namespace:Utils"   如果在 Utils namespace 中有想在XAML使用的 类型、方法
            ...>
    ...
</ContentPage>

2.3 类型转换

页面导航

MAUI启动后，MainPage.xaml为运行界面布局，若要实现页面导航
两种方法：

将新页面设置为 AppShell.xaml 文件中的新启动页
从 MainPage 导航到新页面
（在 MainPage.xaml.cs 构造函数中创建一个简单 Button 并使用事件处理程序导航到 HelloXamlPage）

三、UI

3.1 控件(Controls)

主要控件有：页面、布局和视图。(pages, layouts, and views)

3.1.1 页面(Pages)

分为：ContentPage ,FlyoutPage ,NavigationPage ,TabbedPage 共4种。
4大Pages

1. ContentPage：

显示单张view

2. FlyoutPage:（不适配Shell app）

类似管理平台页面布局；
左侧导航栏，右侧详细信息。
布局行为：弹出式布局、拆分式布局。（移动端、桌面端）
属性：
- Detail：定义右侧详细信息页面；
- Flyout：定义导航栏页面；
- FlyoutLayoutBehavior：定义布局行为；
- IsGestureEnabled: 为 bool 类型，决定轻扫手势是否转换页面；
- IsPresented ：为 bool 类型，是否展示导航或详细页面。

3. NavigationPage:（不适配Shell app）

类似移动端应用界面；
递进式分层导航页面；

模式导航：在用户完成或取消任务之前，不允许离开该任务

4. TabbedPage:

类似QQ、微信等移动端界面；
分几个子页面选项，同一时间只可以选择其中 1 个。

3.1.2 布局(Layouts)

分为：大体分为：StackLayout , Grid , FlexLayout , AbsoluteLayout , BindableLayout 这5种。

1.StackLayout

1维栈式布局；
可以作为父布局，但是套娃使用不推荐，是一种浪费，可以用 Grid 代替

2.AbsoluteLayout

以左上角为原点，按比例设置子项位置，定义具体大小。
可以按 绝对值 & 比例设置子项的位置和大小
属性：
- LayoutBounds：表示子级的位置和大小
- LayoutFlags：是否按比例解释子元素的位置和大小

3.Grid

将子项组织成行与列，这些行与列可以成比例或者绝对大小；
不应该与表混淆，不用于显示表格数据，若要显示表格数据则考虑使用 ListView 、CollectionView

一、HelloWorld

1.1 古典MVVM

为了防止前端显示逻辑、数据显示逻辑、数据存储逻辑等都放在一块，杂糅，难维护易出错，采用的 MVVM 架构

1.2 View 与 ViewModel 绑定

View 单向盯着 ViewModel

1.2.1 第一步

项目新建 ViewModels 文件夹，在其中添加 MainPageViewModel.cs 文件
为了防止前端显示逻辑、数据显示逻辑、数据存储逻辑等都放在一块，杂糅，难维护易出错
采用的 MVVM 架构
此文件为 VM，即 ViewModel
微软支持MVVM，但是没有给出官方的具体实现
NuGet 导入了 CommunityToolkit.Mvvm 包

通过ServiceLocator前台来访问ViewModel

1.2.2 第二步

项目添加 ServiceLocator.cs 文件
服务定位器：用来定位服务的。（类似前台）
成分为：IServiceProvider 和 ServiceCollection，一个是哆啦A梦，一个是哆啦A梦的口袋。

通过 App.xaml 中的 Resource 来访问 ServiceLocator

1.2.3 第三步

在 App.xaml 中注册 ServiceLocator 的资源字典 ResourceDictionary
与 View 中绑定 ViewModel ：在 MainPage.xaml 中绑定文本框与按钮。

二、数据访问

2.1 访问数据的工具 IService

MVVM + IService 架构：

ViewModel 为 View 准备数据，通过 IService 读写数据
而 IService 要想跟 ViewModel 建立联系，需要在 ViewModel 中引入 IService 对象。
由于 IService 为接口，无法 new 创建对象，则直接在 ViewModel 的构造函数中添加 IService 参数。
并将 IService 及其实现类注册进 ServiceLocator 中

2.2 Model 数据部分

此部分为映射数据库的部分

内容为数据库sqlite内的数据类型，含有主键自增等
需要导入 sqlite-net-pcl 包
而数据库命名、路径、连接在 IService 中给出

posted @ 2022-11-08 09:53 LASER_06 阅读(235) 评论(0) 收藏举报

刷新页面返回顶部

LASER_06