0

0

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

月夜之吻

月夜之吻

发布时间:2026-01-14 23:35:20

|

907人浏览过

|

来源于php中文网

原创

maui布局核心是布局控件而非绝对坐标,stacklayout线性堆叠、grid显式网格、flexlayout弹性响应式,contentview+controltemplate支持复用;理解三者空间分配逻辑是关键。

maui怎么布局ui界面 .net maui布局控件使用教程

MAUI 的 UI 布局核心靠 布局控件(Layouts) 组织子元素,不是靠绝对坐标,而是用嵌套容器 + 约束规则来适配多平台。掌握几个关键布局控件,就能搭出绝大多数界面。

StackLayout:最常用,按方向堆叠子元素

适合列表、表单、按钮组这类线性排列场景。默认垂直堆叠(Vertical),可设 Orientation="Horizontal" 横向排。

  • 子元素默认“挤在一起”,用 Spacing 控制间距(如 Spacing="12"
  • 每个子项可通过 HorizontalOptions / VerticalOptions 设置对齐方式(如 CenterFillStart
  • 不自动换行,横向放太多内容会裁剪或溢出 —— 需手动控制宽度或改用 FlexLayout

Grid:灵活的行列网格,类似 CSS Grid 或 Android ConstraintLayout

适合复杂结构,比如登录页(标题+输入框+按钮+底部链接)、仪表盘卡片布局。

遨虾
遨虾

1688推出的跨境电商AI智能体

下载
  • 先定义行高列宽:RowDefinitionsColumnDefinitions,支持 *(占剩余空间)、Auto(自适应内容)、固定像素(如 50
  • 子控件用 Grid.RowGrid.ColumnGrid.RowSpanGrid.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
  • 在页面中像普通控件一样使用:<icontextbutton text="{Binding Title}" icon="home.png"></icontextbutton>
  • 配合 StyleVisualStateGroups 可进一步统一交互反馈(如按下变色)

基本上就这些。MAUI 布局不复杂但容易忽略细节 —— 关键是理解每个 Layout 的“分配逻辑”:StackLayout 按顺序分空间,Grid 显式划格子,FlexLayout 按弹性规则伸缩。从 StackLayout 入手,遇到对齐或换行问题就切到 FlexLayout,结构复杂就上 Grid。多试几次,很快就能直觉判断该用哪个。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

430

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

599

2023.08.10

margin在css中是啥意思
margin在css中是啥意思

在CSS中,margin是一个用于设置元素外边距的属性。想了解更多margin的相关内容,可以阅读本专题下面的文章。

461

2023.12.18

css中的padding属性作用
css中的padding属性作用

在CSS中,padding属性用于设置元素的内边距。想了解更多padding的相关内容,可以阅读本专题下面的文章。

172

2023.12.07

android开发三大框架
android开发三大框架

android开发三大框架是XUtil框架、volley框架、ImageLoader框架。本专题为大家提供android开发三大框架相关的各种文章、以及下载和课程。

329

2023.08.14

android是什么系统
android是什么系统

Android是一种功能强大、灵活可定制、应用丰富、多任务处理能力强、兼容性好、网络连接能力强的操作系统。本专题为大家提供android相关的文章、下载、课程内容,供大家免费下载体验。

1798

2023.08.22

android权限限制怎么解开
android权限限制怎么解开

android权限限制可以使用Root权限、第三方权限管理应用程序、ADB命令和Xposed框架解开。详细介绍:1、Root权限,通过获取Root权限,用户可以解锁所有权限,并对系统进行自定义和修改;2、第三方权限管理应用程序,用户可以轻松地控制和管理应用程序的权限;3、ADB命令,用户可以在设备上执行各种操作,包括解锁权限;4、Xposed框架,用户可以在不修改系统文件的情况下修改应用程序的行为和权限。

2115

2023.09.19

android重启应用的方法有哪些
android重启应用的方法有哪些

android重启应用有通过Intent、PendingIntent、系统服务、Runtime等方法。本专题为大家提供Android相关的文章、下载、课程内容,供大家免费下载体验。

284

2023.10.18

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

48

2026.02.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

CSS教程
CSS教程

共754课时 | 38.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号