本笔记所使用的教程:2022开源!Xamarin+MAUI移动开发实战教程:社区电商APP项目开发(C#/.NET/WPF零基础入门到精通实战合集/.Net maui)
这老师这嘴跟租来的似的,口齿不清吞吞吐吐。
直接或间接使用的其他笔记:
移动开发初识
开发环境
- 开发工具: Visual Studio 2022-17.3-Community :MAUI
Visual Studio 2019-16.11-Community :Xamarin - 运行时框架:.Net Standard 2.0/ .NET 6
- UI框架: Xamarin/MAUI
- 调试环境:Android模拟器
安装VS的时候会有默认的限制,安装2022就是MAUI模板,安装2019就是Xamarin模板(完全没听懂,总之两个都安装了
Visual Studio 2019:
Visual Studio 2022:
- 2019新建项目选择项目模板:移动应用(Xamarin.Forms)
- 2022新建项目选择项目模板:MAUI应用
Xamarin与MAUI
- Xamarin.Forms 是一个开饭源代码UI框架。通过Xamarin.Forms,开发人员可从单个共享基本代码生成Android、IOS和Windows(强调UWP)应用程序。发布于2011年,最新版本Forms5.0、Android13、IOS15。
- .NET MAUI是一个跨平台框架,是Xamarin.Forms的演变,用于使用C#和Xamarin创建本机移动和桌面应用。使用.NET MAUI ,可以从单个共享代码库开发可在Android、IOS、macOS和Windows上运行的应用。(2022)
接下来就只记Xamarin了
项目创建及结构说明
若项目名称尾是Xamarin,则创建后提示报错:
是因为项目名内含有的Xamarin影响了Xamarin.Essentials
这个程序集的引用,导致程序去项目的命名空间下去找.Essentials,因此有两种解决方法
- 修改项目名,使其不包含Xamarin单词
using x = Xamarin.Essentials
(可能是绑定这个引用的意思
真机测试
本人使用Xiaomi Play 安卓8.1,在找了很久很久之后才发现没打开USB安装,而且这玩意还得插卡和登陆账号才能打开我是不是SB我不知道,小米反正是SB。
资源管理
drawble
是存放图像资源的,文件放入该文件夹后还需要进行包括到项目内的操作。Assets
是存放字体的- MAUI则需要导入进项目后在
MauiProgram.cs
添加代码段,而Xamarin直接用就行
fonts.AddFont("字体.ttf", "设定字体名字");
调用的时候直接调用设定的字体名即可
这里可以显示所有文件
关键对象概念-权限
打开项目——属性——清单,最下方是所需权限
不过在开发过程中一般用代码进行管理,不需要在属性设置中选择
进行IOS的开发的时候,需要打开这个文件,但不能直接双击,右键选择打开方式选择XML(文本)编辑器。
Xamarin初级开发
Shell空间
Shell空间就像一个容器,里面放了一个个的页面,根据不同的情况显示不同的页面。切换页面是基于路由的:首先在Shell里注册好每一个页面,然后根据特定路由来请求每个页面的显示。不同于Windows的多窗口,安卓单窗口的页面切换就是Shell的呈现。
在我们创建的空项目中没有Shell的体现,需要添加Shell对象来进行业务开发。使用Shell相当于把多个页面作为一个整体来管理,如果不借助Shell将会有不合逻辑的跳转。
在Xamarin下需要自行创建AppShell:
把内容页改为Shell
内置代码也改为Shell类型
与MAUI类似的,进行Shell注册:
想要注册MainPage页面,需要在AppShell导入MainPage的命名空间
打开MainPage.xaml.cs,可以看到其命名空间为Mobile.Xamarin
。返回AppShell.xaml,在上方导入命名空间,xmlns后面为导入的命名空间的在当前文件下的命名,例中为local:
将会自动补全为xmlns:local="clr-namespace:Mobile.Xamarin"
导入命名空间后,即可进行该页面的注册:
1 2 3 4 5 |
<ShellContent Title="Main Page" Route="MainPage" ContentTemplate="{DataTemplate local:MainPage}"/> |
Title="Main Page"
为设定标题Route="MainPage"
Route为路由地址的命名ContentTemplate="{DataTemplate local:MainPage}"
为指定具体页面
页面跳转
进行Shell跳转为加载路由地址Shell.Current.GoToAsync("//Login")
。引号内使用的是路径,一定要加//。这种跳转方法是类似于调换页面,而不是新加一张页面到上层,所以返回动作后不会回到跳转之前的页面。
我找到的另一种跳转是:Navigation.PushAsync (new MainPage ());
这种跳转与上述相反,在页面1以当前方法跳转到页面2后,执行返回后会回到页面1。
只有注册了所有的页面,才可以在业务中使用Shell进行跳转。
Xamarin如果想添加await await Shell.Current.GoToAsync("//Login")
,需要添加异步处理async
1 2 3 4 5 6 |
private async void Button_Clicked(object sender, EventArgs e) { await Shell.Current.GoToAsync("//MainPage"); //Navigation.PushAsync(new MainPage()); } |
页面布局
所有的页面布局都基于标签式的结构来进行处理的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Mobile.Xamarin.Login"> <ContentPage.Content> <StackLayout> <Label Text="这是一个不明所以的登陆页面" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" /> <Button Text="登录" Clicked="Button_Clicked"/> </StackLayout> </ContentPage.Content> </ContentPage> |
每个标签都是一个对象,从外到内看:
<ContentPage>
指的是当前页面整体的类型为ContentPage<StackLayout>
栈方式布局,使用属性Orientation切换水平/垂直- 在其中放的是布局控件、文本控件
<Label>
、<Button>
两个基本布局方式为:<StackLayout>
与<Grid>
这是Grid的使用方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Mobile.Xamarin.Login"> <ContentPage.Content> <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Label Text="这是一个不明所以的登陆页面" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" /> <Button Text="登录" Clicked="Button_Clicked" Grid.Row="2" Grid.Column="1"/> </Grid> </ContentPage.Content> </ContentPage> |
<Grid.RowDefinitions>
设置Grid的行<Grid.ColumnDefinitions>
设置Grid的列- PS.例中设置了三行两列,并设置Button在第3行第2列(从0开始计数)
此文本框属性解释:
1 2 3 4 5 6 7 |
<Label Text="密码" VerticalOptions="CenterAndExpand" HorizontalOptions="End" Grid.Row="1" Grid.Column="0" Margin="0,0,5,0"/> |
VerticalOptions
:垂直方向对齐设置HorizontalOptions
:水平方向对齐设置Grid.Row
:处于Grid的x列Grid.Column
:处于Grid的x行Margin
:设置此标签的
(左,上,右,下) 的外边距(四个数字时),如Margin="0,0,5,0"
为右侧5像素边距
(左右,上下) 的外边距(两个数字时),如Margin="5,0"
为左右5像素边距
(四周全部) 的外边距(仅一个数字),如Margin="5"
为四周5像素边距
1 2 3 4 5 6 |
<Entry Placeholder="请输入密码" VerticalOptions="CenterAndExpand" Grid.Row="1" Grid.Column="1" IsPassword="True"/> |
IsPassword="True"
:隐藏显示输入的密码
1 2 3 4 5 6 |
<Button Text="登录" Clicked="Button_Clicked" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"/> |
Grid.Column="0"
:从0列开始Grid.ColumnSpan="2"/>
:跨两列