工业品企业网站源码,长沙推广型网站建设,网页设计与制作免费模板,vue.js做网站目录
一、布局能力概述
二、自适应布局
三、响应式布局
四、典型布局场景 一、布局能力概述 布局决定页面元素排布及显示#xff1a;在页面设计及开发中#xff0c;布局能力至关重要#xff0c;主要通过组件结构来确定使用何种布局。 自适应布局与响应式布局#xff1…目录
一、布局能力概述
二、自适应布局
三、响应式布局
四、典型布局场景 一、布局能力概述 布局决定页面元素排布及显示在页面设计及开发中布局能力至关重要主要通过组件结构来确定使用何种布局。 自适应布局与响应式布局 自适应布局当外部容器大小变化时元素根据相对关系自动变化以适应容器变化有七种自适应布局能力常与特定容器类组件搭配使用多用于解决页面各区域内的布局差异。 响应式布局当外部容器大小变化时元素根据断点、栅格或特定特征自动变化以适应容器变化有三种响应式布局能力常与特定组件搭配使用多用于解决页面各区域间的布局差异。
二、自适应布局 七种自适应布局能力 自适应拉伸通过 Flex 布局的 flexGrow 和 flexShrink 属性实现将多余或不足的空间分配给特定区域。 均分能力通过将 Row、Column 或 Flex 组件的 justifyContent 属性设置为 FlexAlign.SpaceEvenly实现空间均匀分配给容器内所有空白区域。 自适应缩放有两种实现方式一是将子组件的宽高设置为父组件宽高的百分比二是通过 layoutWeight 属性配置互为兄弟关系的组件在父容器主轴方向的布局权重但该属性存在使用限制。 缩放能力通过使用百分比布局配合固定宽高比aspectRatio 属性实现当容器尺寸变化时内容自适应调整且宽高比不变。 自适应延伸有两种实现方式通过 List 组件或 Scroll 组件配合 Row/Column 组件实现根据显示区域尺寸显示不同数量的元素。 隐藏能力通过设置布局优先级displayPriority 属性控制显隐当布局主轴方向剩余尺寸不足以满足全部元素时按照优先级从小到大依次隐藏。 自适应折行通过将 Flex 组件的 wrap 属性设置为 FlexWrap.Wrap 实现当布局方向尺寸不足以显示完整内容时自动换行。
三、响应式布局 简介当窗口尺寸变化较大时仅靠自适应布局可能出现问题此时需要响应式布局调整页面结构。响应式布局根据特定特征如窗口宽度自动变化以适应外部容器变化主要通过断点、媒体查询和栅格布局实现。 断点 定义将窗口宽度划分为不同范围断点在不同断点下可实现不同的页面布局效果。 监听方法通过获取窗口对象并监听窗口尺寸变化、通过媒体查询监听应用窗口尺寸变化、借助栅格组件能力监听不同断点的变化等方法来判断当前所处断点。 媒体查询可以监听应用显示区域变化、横竖屏、深浅色、设备类型等多种媒体特征与断点结合可监听断点变化。 栅格布局 简介栅格是多设备场景下的辅助定位工具通过将空间分割为有规律的栅格降低适配成本保证多设备上应用显示的协调性和一致性。 栅格组件的断点提供丰富的断点定制能力可修改断点取值范围支持以窗口宽度或栅格组件本身宽度为参照物响应断点变化且断点发生变化时会通过 onBreakPointChange 事件通知开发者。 栅格组件的 columns、gutter 和 margincolumns 默认为 12 列gutter 默认为 0可定义不同断点下的 columns 数量、gutter 长度以及水平和垂直方向的 gutter。margin 和 padding 可控制栅格组件与父容器左右边缘的距离但二者计算区域不同。 栅格组件的 span、offset 和 orderGridCol 组件支持配置这三个参数取值具有向后方向的继承性可控制元素在栅格中的布局。 栅格组件的嵌套使用满足复杂场景的需要。
四、典型布局场景 页签栏结合响应式布局设置不同断点下 Tab 组件的属性和 tabBar 的 CustomBuilder 布局方向实现页签在不同位置和尺寸的效果。 运营横幅Banner使用 Swiper 组件结合响应式布局配置不同断点下的 displayCount 属性实现不同数量内容项的展示。 网格通过 Grid 组件调整 columnsTemplate 属性或 List 组件调整 lanes 属性结合响应式布局实现不同断点下图片的不同排布。 侧边栏使用 SideBarContainer 组件结合响应式布局配置不同断点下的属性实现侧边栏的不同显示效果。 单 / 双栏使用 Navigation 组件实现单 / 双栏场景可根据窗口宽度自动切换显示。 三分栏组合使用 SideBarContainer 组件与 Navigation 组件结合响应式布局设置不同断点下的属性实现不同窗口宽度下的不同栏显示效果。 自定义弹窗通过 CustomDialogController 实现有两种方式一是通过 gridCount 属性配置弹窗宽度二是将 customStyle 设置为 true 自定义弹窗样式配合栅格组件实现。 大图浏览将 Image 组件的 objectFit 属性设置为 ImageFit.Contain解决图片被截断问题。 操作入口使用 Scroll 和 Row 组件结合实现不同断点下的操作入口布局效果。 顶部使用栅格行组件 GridRow 和栅格列组件 GridCol 布局实现不同断点下标题和搜索框的显示效果。 缩进布局借助栅格组件控制内容在不同断点下占据不同列数实现缩进效果。 挪移布局通过配置栅格子元素在不同断点下占据的列数实现 “上下布局” 与 “左右布局” 的切换效果。 重复布局配置栅格子组件在不同断点下占据不同列数实现 “小屏单列显示、大屏双列显示” 的效果还可通过 onBreakpointChange 事件调整显示的元素数量。
