MAUI怎么布局UI界面 .NET MAUI布局控件使用教程

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

。多试几次，很快就能直觉判断该用哪个。