# Flutter 自适应 UI ## 概述创建能够完美适应任何屏幕尺寸、平台或输入设备的 Flutter 应用程序。该技能为构建从手机扩展到大型桌面显示器的响应式布局提供了全面的指导，同时在触摸、鼠标和键盘交互方面保持出色的用户体验。 ## 快速参考 **核心布局规则：** 约束下降。尺寸上升。家长设置位置。 **三步自适应方法：** 1. **Abstract** \- 从widgets中提取通用数据 2. **测量** \- 确定可用空间（MediaQuery/LayoutBuilder） 3. **分支** \- 根据断点选择合适的UI **关键断点：** * 紧凑（移动）：宽度 < 600 * 中型（平板电脑）：600 <= 宽度 < 840 * 扩展（桌面）：宽度 >= 840 ## 自适应工作流程按照 3 步方法使您的应用程序具有适应性。 ### 第 1 步：摘要识别需要适应性的小部件并提取通用数据。常见模式： * 导航UI（底栏和侧栏之间切换） * 对话框（移动设备上全屏，桌面上模式） * 内容列表（从单列到多列的回流）对于导航，创建一个共享的“Destination”类，其中包含“NavigationBar”和“NavigationRail”使用的图标和标签。 ### 第 2 步：测量选择正确的测量工具： **MediaQuery.sizeOf(context)** \- 当您需要应用程序窗口大小来做出顶层布局决策时使用 * 返回整个应用程序窗口尺寸 * 对于大小查询，性能比 MediaQuery.of() 更好 * 当窗口大小改变时重建小部件 **LayoutBuilder** \- 当您需要特定小部件子树的约束时使用 * 提供父部件的约束作为“BoxConstraints” * 局部尺寸信息，而不是全局窗口尺寸 * 返回最小/最大宽度和高度范围示例： // 对于应用程序级别的决策最终宽度 = MediaQuery.sizeOf(context).width; // 对于小部件特定的约束布局构建器（构建器：（上下文，约束）{ if (constraints.maxWidth < 600) { 返回移动布局（）； } 返回桌面布局（）； }, ） ### 第 3 步：分支应用断点来选择适当的 UI。不要根据设备类型做出决定——而是使用窗口大小。断点示例（来自材料指南）：类 AdaptiveLayout 扩展 StatelessWidget { @覆盖小部件构建（BuildContext上下文）{ 最终宽度 = MediaQuery.sizeOf(context).width; 如果（宽度>=840）{ 返回桌面布局（）； } 否则如果（宽度 >= 600）{ 返回 TabletLayout(); } 返回移动布局（）； } } ## 布局基础知识 ### 理解约束 Flutter 布局遵循一条规则：**约束下降。尺寸上升。家长设置位置。** 小部件从父级接收约束，确定其大小，然后向父级报告大小。然后家长给孩子定位。主要限制：小部件只能决定父约束内的大小。他们无法知道或控制自己的立场。有关详细示例和边缘情况，请参阅 [layout-constraints.md]()。 ### 常见布局模式 **行/列** * `Row` 水平排列子项 * `Column` 垂直排列子项 * 使用`mainAxisAlignment`和`crossAxisAlignment`控制对齐 * 使用“Expanded”让子元素按比例填充可用空间 **集装箱** * 添加内边距、边距、边框、背景 * 可以用宽度/高度限制尺寸 * 没有子/大小，扩展以填充约束 **扩展/灵活** *“Expanded”强制子进程使用可用空间 *“灵活”允许孩子使用可用空间，但可以更小 * 使用`flex`参数来控制比例有关完整的小部件文档，请参阅 [layout-basics.md]() 和[layout-common-widgets.md]()。 ## 最佳实践 ### 设计原则 **分解小部件** * 创建小型、集中的小部件，而不是大型复杂的小部件 * 使用“const”小部件提高性能 * 使测试和重构更容易 * 跨不同布局共享通用组件 **根据平台优势进行设计** * 移动设备：专注于捕获内容、快速交互、位置感知 * 平板电脑/台式机：专注于组织、操作、细节工作 * Web：利用深度链接和轻松共享 **先解决触摸问题** * 从出色的触摸式用户界面开始 * 在真实的移动设备上经常进行测试 * 将鼠标/键盘作为加速器而不是替代品 ### 实施指南 **切勿锁定方向** * 支持纵向和横向 * 多窗口和可折叠设备需要灵活性 * 锁定屏幕可能会导致可访问性问题 **避免设备类型检查** * 不要使用`Platform.isIOS`、`Platform.isAndroid`来决定布局 * 使用窗口大小代替 * 设备类型 ≠ 窗口大小（窗口、分屏、画中画） **使用断点，而不是方向** * 不要使用 `OrientationBuilder` 来更改布局 * 使用带有断点的`MediaQuery.sizeOf`或`LayoutBuilder` * 方向并不表示可用空间 **不要填满整个宽度** * 在大屏幕上，避免使用全角内容 * 使用带有“GridView”或 Flex 模式的多列布局 * 限制内容宽度以提高可读性 **支持多种输入** * 实现键盘导航以实现可访问性 * 支持鼠标悬停效果 * 正确处理自定义小部件的焦点有关完整的最佳实践，请参阅 [adaptive-best-practices.md]()。 ## 能力和政策将代码_可以_做什么与_应该_做什么分开。 **功能**（代码可以做什么） * API 可用性检查 * 操作系统强制限制 * 硬件要求（相机、GPS等） **策略**（代码应该做什么） * 遵守应用商店指南 * 设计偏好 * 平台特定功能 * 功能标志 ### 实现模式 // 能力等级类能力{ 布尔 hasCamera() { // 检查相机API是否可用返回 Platform.isAndroid ||平台.isIOS； } } // 策略类类策略{ 布尔shouldShowCameraFeature() { // 业务逻辑 - 可能被商店策略禁用返回 hasCamera() && !Platform.isIOS; } } 好处： * 清晰的关注点分离 * 易于测试（独立模拟能力/策略） * 当平台发展时易于更新 * 业务逻辑不依赖于设备检测有关详细示例，请参阅 [adaptive-capability.md]() 和[capability_policy_example.dart]()。 ## 示例 ### 响应式导航底部导航（小屏）和导航栏（大屏）切换：小部件构建（BuildContext上下文）{ 最终宽度 = MediaQuery.sizeOf(context).width; 返回宽度 >= 600 ？ _buildNavigationRailLayout() : _buildBottomNavLayout(); } 完整示例：[responsive_navigation.dart]() ### 自适应网格使用具有响应式最大宽度的“GridView.extent”：布局构建器（构建器：（上下文，约束）{ 返回 GridView.extent( maxCrossAxisExtent：constraints.maxWidth < 600？ 150：200， // ... ）； }, ） ## 资源 ### 参考文档 * [layout-constraints.md]() \- Flutter 约束系统完整指南，包含 29 个示例 * [layout-basics.md]() \- 核心布局小部件和模式 * [layout-common-widgets.md]() \- 容器、GridView、ListView、Stack、Card、ListTile * [adaptive-workflow.md]() \- 详细的 3 步自适应设计方法 * [adaptive-best-practices.md]() \- 设计和实现指南 * [adaptive-capability.md]() \- 平台行为的能力/策略模式 ### 示例代码 * [responsive_navigation.dart]() \- NavigationBar ↔ NavigationRail 切换 * [capability_policy_example.dart]() \- 能力/策略类示例 ### 脚本该技能目前没有可执行脚本。所有指导均包含在参考文档中。 ### 资产该技能包括完整的 Dart 示例文件，演示： * 响应式导航模式 * 能力和政策执行 * 自适应布局策略这些资产可以直接复制到您的 Flutter 项目中或根据您的需求进行调整。

颤振自适应用户界面

包含技能