SuperAPI AI 工具集

flutter-build-responsive-layout

前端与建站

查看项目

更新于 10-15 21:55

技能介绍

用途:帮助在 Flutter 中实现随可用窗口空间自适应的布局,而非仅针对物理设备。

主要能力:用 MediaQuery.sizeOf(context) 获取整个应用窗口尺寸;用 LayoutBuilder 依据父组件分配空间(constraints.maxWidth)决定返回的组件树;用 Expanded 填满剩余空间,用 Flexible 按 flex 比例分配空间;用 ConstrainedBox 限制 GridView、ListView 等在大屏上的最大宽度;列表用 ListView.builder 或 GridView.builder 懒加载。

使用方式:将目标组件树包进 LayoutBuilder,取出 constraints.maxWidth,定义断点(如 largeScreenMinWidth = 600),大于断点返回大屏布局(如 Row 并排导航栏与内容区),否则返回小屏布局。大屏优化时,把全宽组件包进 ConstrainedBox 并设 BoxConstraints(maxWidth: 800.0),再包 Center 居中;列表可改用 GridView.builder 配合 SliverGridDelegateWithMaxCrossAxisExtent。

适用场景:手机、平板、桌面、可折叠设备、多窗口与画中画等可调整窗口环境。

限制与注意:不要在组件树顶部用 MediaQuery.orientationOf 或 OrientationBuilder 切换布局,设备方向不能准确反映窗口空间;不要按硬件类型判断;不要锁定屏幕方向,否则在可折叠设备上易出现黑边;若必须锁定,用 Display API 获取物理屏幕尺寸。需支持鼠标、触控板与键盘快捷键,并保证触控目标尺寸与键盘导航可用。