Flutter多设备之典型布局场景

Flutter多设备之典型布局场景

参考鸿蒙原生典型布局场景,保持相似体验。

布局能力 使用场景 使用说明
页签栏 使用页签控制内容切换的容器,每个页签对应一个内容视图。 基于动态断点,当位于sm, md时, 使用flutter内置组件DefaultTabController、TabBar和TabBarView显示底部页签栏;当位于lg时,使用DefaultTabController和NavigationRail显示左侧页签栏
运营横幅 (Banner) 不同断点下,运营横幅中展示的图片数量不同 Swiper插件+断点库实现
网格 使用“行”和“列”分割的单元格方式布局子组件的网格容器。 直接使用Flutter组件(GridView)
侧边栏 默认隐藏侧边栏,同时提供侧边栏控制按钮,用户可以通过按钮控制侧边栏显示或隐藏 依赖扩展库: SideBarContainer
单/双栏 类似侧边栏的单/双栏效果 暂不支持,可参考导航分栏/侧边栏SideBarContainer实现
三分栏 类似侧边栏的三分栏效果 暂不支持,可参考导航分栏/侧边栏SideBarContainer实现
自定义弹窗 弹窗根据不同断点在底部/居中显示 结合断点库+内置弹窗组件实现,无需额外适配
大图浏览 图片展示浏览 直接使用Flutter组件(Image)
操作入口 列表项尺寸固定,超出内容可滚动查看;列表项尺寸固定,剩余空间均分。 直接使用Flutter组件(ListView+Row)
顶部 搜索框和标题顶部显示效果 基于栅格布局能力实现:GridRow
缩进布局 待显示内容在不同的断点下占据不同的列数 基于栅格布局能力实现:GridRow
挪移布局 不同断点下,栅格子元素占据的列数会随着开发者的配置发生改变。当一行中的列数超过栅格组件在该断点的总列数时,可以自动换行,即实现”上下布局”与”左右布局”之间切换的效果。 基于栅格布局能力实现:GridRow
重复布局 不同断点下,配置栅格子组件占据不同的列数,即可实现“小屏单列显示、大屏双列显示”的效果。 基于栅格布局能力实现:GridRow
轮播滑动组件 轮播展示子组件的容器 依赖现有三方库carousel_slider
导航分栏 用于实现页面间以及组件内部的页面跳转,能够自动适配窗口显示大小,在窗口较大的场景下自动切换分栏展示效果 1.导航分栏混合开发;2.导航分栏纯Dart扩展库NavigationSplitContainer
弹性布局容器 使用弹性方式布局子组件的容器 直接使用Flutter组件(Flex, Expanded),无需额外适配
安全区避让 防止非安全区域内容与顶部状态栏、底部导航栏重叠 直接使用SafeArea布局,无需额外适配
折叠屏悬停、折叠区避让 用户可以将产品半折后立在桌面上,实现免手持的体验。悬停态场景适用于不需要频繁进行交互的任务,例如视频通话、播放视频、拍照、听歌等。折叠屏进入悬停态时,中间弯折的区域难以操作且显示内容会变形,因此建议页面内容进行折痕区避让适配。 暂不支持
折叠屏展开、分栏 根据不同断点实现折叠屏的展开与分栏效果 暂不支持,可结合导航分栏+栅格能力实现

你可能感兴趣的:(harmonyos)