MAUI布局核心是布局控件而非绝对坐标,StackLayout线性堆叠、Grid显式网格、FlexLayout弹性响应式,ContentView+ControlTemplate支持复用;理解三者空间分配逻辑是关键。

MAUI 的 UI 布局核心靠 布局控件(Layouts) 组织子元素,不是靠绝对坐标,而是用嵌套容器 + 约束规则来适配多平台。掌握几个关键布局控件,就能搭出绝大多数界面。
StackLayout:最常用,按方向堆叠子元素
适合列表、表单、按钮组这类线性排列场景。默认垂直堆叠(Vertical),可设 Orientation="Horizontal" 横向排。
- 子元素默认“挤在一起”,用
Spacing控制间距(如Spacing="12") - 每个子项可通过
HorizontalOptions/VerticalOptions设置对齐方式(如Center、Fill、Start) - 不自动换行,横向放太多内容会裁剪或溢出 —— 需手动控制宽度或改用
FlexLayout
Grid:灵活的行列网格,类似 CSS Grid 或 Android ConstraintLayout
适合复杂结构,比如登录页(标题+输入框+按钮+底部链接)、仪表盘卡片布局。
- 先定义行高列宽:
RowDefinitions和ColumnDefinitions,支持*(占剩余空间)、Auto(自适应内容)、固定像素(如50) - 子控件用
Grid.Row、Grid.Column、Grid.RowSpan、Grid.ColumnSpan定位和跨格 - 推荐给 Grid 加
Padding和子项加Margin控制留白,避免贴边
FlexLayout:响应式弹性布局,对标 Web Flexbox
适合需要动态换行、对齐调整、不同屏幕尺寸下自适应的场景(比如标签云、工具栏图标组)。
- 设置
Direction(主轴方向)、Wrap(是否换行)、JustifyContent(主轴对齐)、AlignItems(交叉轴对齐) - 子项可单独设
FlexGrow(放大权重)、FlexShrink(缩小权重)、AlignSelf(覆盖父级对齐) - 比 StackLayout 更可控,比 Grid 更轻量,但调试时需注意主/交叉轴概念
ContentView + ControlTemplate:复用布局逻辑
别重复写相同结构。把常用组合(如带图标+文字的卡片、带加载状态的按钮)封装成自定义 ContentView,再通过 ControlTemplate 或绑定统一管理外观与行为。
- 新建
ContentView类,XAML 中写好 Grid/StackLayout 结构,后台代码定义 BindableProperty - 在页面中像普通控件一样使用:
- 配合
Style和VisualStateGroups可进一步统一交互反馈(如按下变色)
基本上就这些。MAUI 布局不复杂但容易忽略细节 —— 关键是理解每个 Layout 的“分配逻辑”:StackLayout 按顺序分空间,Grid 显式划格子,FlexLayout 按弹性规则伸缩。从 StackLayout 入手,遇到对齐或换行问题就切到 FlexLayout,结构复杂就上 Grid。多试几次,很快就能直觉判断该用哪个。










