MAUI 开发从入门到出门 （2结构）

写在前面

        看过侯俊杰深入浅出MFC这本书的朋友，应该都看到过这句话，勿在浮沙筑高楼。

打开前面的工程

        展开以后就这么多东西，且听我慢慢说。

        第一个文件夹Properties，里面是launchSettings.json 启动配置文件，用于应用的启动准备工作，在maui里面是配置打包文件。没啥用不用管它。

        第二个文件夹Platforms，猜也能猜到了是针对各种平台的生成文件，我们只关注编码就可以了，在各个平台编译就不用管了。以后生成app的图标啦啥的都在这里配。

        再往下几个是主要编码需要用的地方。一般情况下就开始说MauiProgram.cs这个文件了。

        可这还是浮沙，还没到底，底在哪儿呢？还是在Platforms 这个文件夹里。

不同系统的启动顺序

iOS

       展开iOS，打开 program.cs 文件，眼熟吗，居然有main函数。这就最好理解了。

using ObjCRuntime;
using UIKit;

namespace MauiApp1;

public class Program
{
	// This is the main entry point of the application.
	static void Main(string[] args)
	{
		// if you want to use a different Application Delegate class from "AppDelegate"
		// you can specify it here.
		UIApplication.Main(args, null, typeof(AppDelegate));
	}
}

main里面就干了一件事，传AppDelegate委托，那AppDelegate从哪儿来的。在AppDelegate.cs里。

using Foundation;

namespace MauiApp1;

[Register("AppDelegate")]
public class AppDelegate : MauiUIApplicationDelegate
{
	protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}

在这里MauiProgram类的CreateMauiApp函数，创建了对象。然后给main玩去。

F12跳到CreateMauiApp看看。发现就是第一张图MauiProgram.cs这个文件。

namespace MauiApp1;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

		return builder.Build();
	}
}

这里把对象注入点服务，装扮点字体，返回给main。

这里面.UseMauiApp<App>()的App对象是从哪儿来的呢。继续跳。

namespace MauiApp1;

public partial class App : Application
{
	public App()
	{
		InitializeComponent();

		MainPage = new AppShell();
	}
}

这就跳到App.xaml.cs这个文件了。里面就两句话，第一句初始化了一堆颜色风格资源。我们第一篇demo运行的时候，出来的那堆紫色的东西就在这里。

 第二句话，new了appshell对象。不用说继续跳。

里面就是把xaml的东西初始化了。xaml里面有一堆标记元素。

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp1.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

这里面规定了页面界面。MainPage就是我们主要编码的页面了。

Android

        也是类似，在MainApplication文件里。

Windows

        也是类似，在App文件里。

Tizen

        呵呵，不评论。

简单概括

        这么跳来跳去，概括一下就是，先编码（废话），然后创建给shell，shell加上颜色风格主题啥的，再创建给app，app注入点服务，加入点字体。实例给了不同系统的入口函数。

看一下MainPage

        点开MainPage的xaml。里面元素挺多。

<?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"
             x:Class="MauiApp1.MainPage">
			 
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />
                
            <Label 
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />
            
            <Label 
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button 
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

 需要看的就这几个。

• ContentPage：一种页面类型。还有几种。后面说。
• ScrollView：滚动嘛，没啥好说的。
• VerticalStackLayout：垂直布局，说人话就是竖着放，属性让留点间隙，放中间。
• Image，Label，Button：就是控件啦。以后主要鼓捣的就是这个。button里有个clicked 定义对应OnCounterClicked函数。里面实现累加。所以就是Demo运行的效果。