MAUI新生6.1：控件总览

一、MAUI控件分类及使用技巧

1、根据控件的功能特点，以及个人的习惯，我将MAUI的控件划分为以下几个大类：

  • 页面类；
  • 布局类；
  • 单一内容类；
  • 集合内容类；
  • 表单类；
  • 容器类
  • 形状类；
  • 窗口类；
  • 辅助功能类，如动画、手势、可访问性等；

2、在MAUI的UI界面设计中，大概遵循以下步骤：

  • 确定页面的类型（页面类控件）；
  • 从全局到局部，进行布局规划（布局类控件）；
  • 确定呈现的数据，是单一内容、集合内容、表单还是形状？根据内容的具体形式，选择相应的控件
  • 增加辅助功能，如动画、手势、可访问性、提示等

3、其它使用技巧

  • MAUI开发应遵循MVVM模式，在进行UI设计前，先开发ViewModel，定义好页面的数据和业务逻辑后，再根据数据和业务逻辑，进行UI设计。
  • 只要掌握了前面几个章节的原理介绍，控件使用就很简单，不需要特别记，边用边查，多用几次，自然就能熟练
  • 可以在编码时，随时右击查看控件定义或直接使用属性面板，大多数属性和事件，都能够见名知意
  • 控件的常用样式属性，应该要非常熟悉，这些属性在很多控件上都能通用，如下所示： 
//1、布局类
背景：Background-背景、BackgroundColor-背景色、HasShadow-是否有阴影
边框：CornerRadius-圆角、BorderColor-边框颜色、BorderWidth-边框宽度
外轮廓：Stroke-外轮廓画笔、StrokeShape-形状、StrokeThickness-宽度、StrokeDashArray-长短线样式、StrokeLineCap-起终点样式
宽高：WidthRequest-宽、HeightRequest-高、MaximumWidthRequest、MinimumWidthRequest等
对齐：VerticalOptions-垂直对齐、HorizontalOptions-水平对齐
间距：Margin-外边距，Padding-内边距

//2、文本类
内容：Text-文内容
颜色：TextColor-文本颜色
字体：FontFamily-字体
大小：FontSize-字体大小
样式：FontAttributes-加粗斜体、TextDecorations-上划线下划线、TextTransform-大小写、FontAutoScalingEnabled-自动缩放
排列①：VerticalTextAlignment-文本垂直对齐、HorizontalTextAlignment-文本居中对齐
排列②：CharacterSpacing-间距、LineHeight-行距、LineBreakMode-跨行、MaxLines-最大行

//3、图片类
来源：Source-图片源、ImageSource-图片源
其它：IsLoading-加载、Aspect-缩放、IsAnimationPlaying-gif播放、IsOpaque-不透明

 

  

二、控件总览（囊括了官方控件和Community.Toolkit社区工具包的扩展控件）： 

1、页面类

1）控件目录：

2）使用经验：

  • 如果使用Shell导航框架，则NavigationPage/FlyoutPage/TabbedPage均不兼容。
  • Shell导航的ShellContent，只能是ContentPage。
  • Shell的底层实现，推测是通过NavigationPage、FlyoutPage和TabbedPage来实现。
  • 正常情况下，我们直接使用Shell。如果不使用Shell，则使用NavigationPage、FlyoutPage、TabbedPage。
  • MAUI Blaozr 不支持Shell，导航需要使用NavigationPage

 

2、布局类 

1）控件目录： 

  • Grid，网格布局。子元素按行列布局，类似于在Word里画表格
  • FlexLayout，弹性布局。和前端的Flex弹性布局基本一样
  • StackLayout，堆叠布局。子元素按指定方向逐行(列)堆叠。如果能确定堆叠方向，建议使用横向或纵向堆叠布局
  • HorizontalStackLayout，横向堆叠布局。子元素在水平方向上逐列堆叠，性能比StackLayout好。
  • VerticalStackLayout，纵向堆叠布局。子元素在垂直方向上逐行堆叠，性能比StackLayout好。
  • AbsouteLayout，绝对布局。可以定义子元素的绝对位置
  • DockLayout，停靠式布局。子元素可以固定停靠在上下左右位置。DockPanel是WPF的内置控件，但MAUI给取消了，【Community.Toolkit.Maui】补充了这个控件
  • UniformItemsLayout，大小一致的网格布局。子元素按行列布局，且单元格大小一致。和DockPanel，UniformGrid本也是WPF的内置控件，但MAUI给取消了，【Community.Toolkit.Maui】中补充了这个控件
  • BindableLayout，绑定附加属性。作为附加属性应用于其它布局，功能上类似于集合类控件，适用于条目数较少、无滚动、无选择的情况
  • StateContainer，状态附加属性。作为附加属性应用于其它布局，根据用户定义的状态数值，显示不同的元素块，由【Community.Toolkit.Maui】提供

 2）使用经验：

  • 根据实际情况和个人偏好，选用Grid或FlexLayout进行整体布局。推荐Grid，但习惯前段Flex布局的，可能更喜欢FlexLayout。
  • 局部布局，根据需要首选HorizontalStackLayout、VerticalStackLayout或AbsouteLayout，复杂一些的可以用FlexLayout。只有在运行时需要改变排列方向时，才选用StackLayout。
  • MAUI取消了DockLayout和UniformItemsLayout，总有其原因，Grid和FlexLayout吃透了，应该很少会用到。
  • BindableLayout和StateContainer，是附加属性，Grid、StackLayout、FlexLayout等布局控件都可以使用，提供的功能还是很实用，建议掌握。

 

3、单一内容类

1）控件目录：

  • Label，显示单行或多行文本
  • Button，按钮
  • ImageButton，图片按钮
  • BoxView，指定宽高颜色的简单矩形，可用于占位
  • Image，显示本地/URI/嵌入式/流式图片
  • AvatarView，头像或首字母缩写，由【Community.Toolkit.Maui】提供
  • Map，显示和批注地图
  • MediaElement，视频和音频播放，由【Community.Toolkit.Maui】提供
  • DrawingView，手写板，可用于签名，由【Community.Toolkit.Maui】提供
  • Expander，可折叠面板，点击标头可以隐藏或显示内容，由【Community.Toolkit.Maui】提供
  • SearchBar，搜索框

2）使用经验：

  • 单一内容类控件，涵盖了文本、图片、多媒体、地图等内容形式，使用都较简单，可以直接查看文档。
  • 内置的控件还不是很丰富，比如Map的可用性较差，需要使用GoogleMap。而多媒体控件，直到2023年1月才出现，还是以社区控件的方式。

 

4、集合内容类

1）控件目录 

  • ListView，数据列表
  • CollectionView，数据列表，ListView的替代方案。相比ListView，更灵活、更高性能
  • CarouselView/IndicatorView，轮播图及其指示器
  • BindableLayout，详见布局章节，比较特殊。当集合内容较少，不需要选择和滚动时，可以使用BindableLayout

2）使用经验 

  • 数据列表首选CollectionView，默认支持原生控件的虚拟化，性能更高。同时，支持单选和多选、水平和垂直布局、去除了单元格的概念等，比ListView，更加灵活和简单。
  • CarouselView的使用方法，和CollectionView非常像。只要熟练掌握了CollectionView，CarouselView基本就没问题。同时，IndicatorView是结合CarouselView使用的，也很简单。
  • 如果需要传统Web端的表格功能，建议使用大多数第三方控件都有提供的DataGrid控件，能够提供功能非常完善的表格功能。

  

5、表单类控件

1）控件目录

2）使用经验

  • 表单类控件的使用都比较简单，没有特别复杂的操作。
  • 但是内置的表单控件不够丰富，如下拉多选框、复选框组、联级选择、时间范围、富文本框、评分、树状选择器等，目前都缺失，需要补充第三方控件库
  • 由于表单类控件主要应用于数据输入，所以实际开发中，都要结合数据绑定和数据验证使用。

 

6、容器类控件

1）控件目录：

  • Frame，为子控件添加边框背景等装饰
  • Border，为子控件添加边框背景等装饰，功能比Frame更丰富，可以视为Frame的替代
  • ScrollView，为子控件提供滚动功能
  • RefreshView，为子控件提供拉取刷新功能，其子控件必须是可滚动控件，如ScrollView、CollectionView、ListView等
  • SwipeView，滑动轻扫控件时显示轻扫项
  • TwoPanelView，双面板容器，可以可折叠设置
  • WebView，显示远程网页或本地HTML文件，提供了CSS、JS和Cookie支持
  • BlazorWebView，由MAUI托管Blazor

2）使用经验

  • 容器类控件相当于一个包装器，为其子控件提供了特定功能。
  • BlazorWebView是实现BlazorHybrid开发模式的入口控件，使我们可以使用Blazor技术来开发跨平台应用，特别重要。

 

7、形状类控件

1）控件目录：

2）使用经验：

  • Shape可以直接在页面上进行绘图。MAUI另外还提供了一套基于Graphics的绘图机制，可以绘制更加复杂的图形，甚至可以进行UI绘制，实现类似Flutter的渲染功能。
  • Path的使用非常灵活，所以也比较复杂，如果应用有绘图方面的功能需求，应该要熟练掌握。

 

8、窗口类控件

1）控件目录：

  • ToolTipProperties，提示小窗口，作为控件附加属性使用
  • DisplayAlert，警告弹窗
  • DisplayActionSheet，选择项弹窗
  • DisplayPromptAsync，输入项弹窗
  • MenuBarItem，适合桌面应用的菜单栏
  • MenuFlyout，适合桌面应用的鼠标右键菜单
  • Snackbar，显示在底部的计时警报弹窗，由【Community.Toolkit.Maui】提供
  • Toast，显示在底部的计时警报弹窗，由【Community.Toolkit.Maui】提供
  • Popup，模态弹窗，可以定义丰富的UI，由【Community.Toolkit.Maui】提供
  • Window，提供了多窗口功能，虽然手机端也支持，但更适用于桌面端应用

2）使用经验：

  • 内置导航的Navigation对象，也支持模式导航，但Popup可以进行更丰富的控制
  • 桌面端应用的多窗口需求会比较普遍，多窗口的操作方式应该要掌握

 

8、辅助功能

1）功能目录：

2）使用经验：

  • 除绘图画布以外，其它几个辅助功能都比较常用，需要掌握
  • 绘图画布Graphics提供了类似Flutter一样的自绘功能

 

posted @ 2022-12-20 10:27  functionMC  阅读(7505)  评论(0)  编辑  收藏  举报