MAUI跨平台基础认识

2022-08-29 10:32 Monday15134min
CC BY 4.0(除特别声明和转载)

XXX.xaml:通常为布局代码
XXX.xaml.cs:通常为逻辑相关代码,被称为代码隐藏1

[!info]
结合MAUI提供的基础模板来了解MAUI基础样貌

样板中的重要文件

  1. MauiProgram.cs:配置文件(字体等),其中的CreateMauiApp()作为不同平台的共同入口点
  2. App.xaml:定义应用的资源文件寻访路径
  3. App.xaml.cs:包含App类,该类继承自 Application类,代表应用整体。常在其中创建AppShell实例并将其分配给MainPage属性作为应用的根页面,对于不同平台的生命周期处理也可在此处进行编写 Imgur
  4. AppShell.xaml:应用的主结构定义,为应用设定风格、导航、布局等特性
  5. MainPage.xaml:UI布局
  6. MainPage.xaml.cs:UI逻辑

重要的类

  1. App:代表应用整体,可写入生命周期处理,创建新窗口的方法
  2. Shell:
    1. 描述视觉层次结构,视图导航,集成搜索处理。
    2. 其中的视觉层次结构常包含
      1. 浮出控件2 (FlyoutItem)或选项卡栏(TabBar)
      2. 选项卡(tab)
      3. 内容容器3 (ShellContent)
    3. 这些对象不代表任何用户界面,而是应用程序的可视化层次结构的组织。
  3. Pages:
    1. root UI(类似安卓开发中的Activity)
    2. e.g.
      1. 在选项卡导航中的root UI为TabbedPage,其中包含各个Tab的page
      2. 在FlyoutPage中包含一系列条目以供选择来进行路由
  4. Views:
    1. 展示控件(类似安卓开发中的ListView,GridView等),作为列表、网格等,是列表项、网格项等的容器
    2. e.g.
      1. ContentView
      2. ScrollView
      3. CarouselView
      4. CollectionView
  5. Controls:控件,如按钮,输入框,标签等,可向View中加入控件
  6. Layouts:
    1. 布局,布局设定控件的排布方式如横排竖排
    2. e.g.
      1. VerticalStackLayout纵向布局,HorizontalStackLayout横向布局,使用StackLayout时,可设定StackOrientation属性为Vertical或Horizontal达到相应效果。在可能发生旋转视图的情况下,使用此方式调整可更灵活
      2. AbsoluteLayout绝对布局,需设定控件的精准坐标
      3. FlexLayout弹性布局,类似于StackLayout,但如果子控件不能放入单个行或列,可以自适应的调整布局以包含所有子控件。这种布局还提供了对齐和适应不同屏幕尺寸的选项。例如,当垂直排列时,FlexLayout控件可以将其子控件向左、向右或居中对齐。当水平对齐时,可以对控件进行调整以确保间距均匀。可以在ScrollView中使用一个水平的FlexLayout来显示一系列水平滚动的帧(每一帧本身可以是一个垂直排列的FlexLayout)
      4. Grid网格布局
    3. Imgur

[!note]
Views,Layouts本质也是Controls

优化布局

  1. Controls使用Margin推出空隙作为自身的附属领域,该领域仅占位,不产生响应事件等
  2. Layouts使用Padding设定子节点到布局边界的间隙,宛如容器自身的厚度
  3. VerticalStackLayout与 HorizontalStackLayout使用Spacing设定子节点间的间隙,Spacing间隙为布局对子节点的设定,实际视觉效果为Margin与Spacing的叠加

  1. 在VS中的文件展示形式被真实的表现为隐藏在对应xaml的子级中,the code-behind for XXX.xaml ↩︎

  2. 通过图标或从屏幕一侧轻扫进行访问 ↩︎

  3. 每个 ShellContent对象将显示单个详细信息页(ContentPage)。 当一个 Tab 对象中存在多个 ShellContent对象时,ContentPage对象将可通过顶部选项卡导航。 ↩︎

BuyMeACola