鸿蒙结构响应差别设备
01.自适应结构01.拉伸能力
flexGrow：设置父容器在主轴方向上的剩余空间分配给此属性地点组件的比例。
默认值
flexShrink：设置父容器压缩尺寸分配给此属性地点组件的比例。
父容器为column row时，默认值：0
父容器为flex时，默认值：1
02.均分能力
justifyContent：将变革的空间，均匀分配给容器组件内空白地域
常用的：SpaceBetween 两端对齐 SpaceAround：相邻元素之间间隔雷同，首尾一半 SpaceEvenly：均匀分配
03.占比能力
width：要设置的组件宽度
height：要设置的组件高度
layoutWeight：父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配
04.缩放能力
aspectRatio：指定当前组件的宽高比
05.延伸能力
延伸能力是指容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变革显示或隐蔽，隐蔽时可以通过滑动切换显示。实现的方式是通过 List 组件或 Scroll 组件
06.隐蔽能力
displayPriority：设置当前组件在结构容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐蔽。
07.折行能力
折行能力是指容器组件尺寸发生变革，当结构方向尺寸不足以显示完整内容时自动换行。折行能力通过使用 Flex折行结构 （将wrap属性设置为FlexWrap.Wrap）实现
02.响应式结构
01.断点
将窗口宽度划分为差别的范围（即断点），监听窗口尺寸变革，当断点改变时同步调解页面结构
https://img-blog.csdnimg.cn/direct/980945877f4e4b71a6d287253dc62a49.png#pic_center
02.媒体查询
媒体查询常用于下面两种场景：
[*]针对设备和应用的属性信息（比如显示地域、深浅色、分辨率），设计出相匹配的结构。
[*]当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面结构。
[*]当设备尺寸发生改变的时候存储在AppStorage上面的值会发生改变就可以用来切换差别的设备尺寸的结构
import mediaquery from '@ohos.mediaquery';
const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)');
const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)');
const listenerMD: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(600vp<=width<840vp)');
const listenerLG: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(840vp<=width)');
@Entry
@Component
struct MediaQuery {
// 2. 创建监听器
@StorageProp("breakPoint") breakPoint:string = 'XS'
// 3. 注册监听器
aboutToAppear(): void {
// 添加回调函数
listenerXS.on('change', (res: mediaquery.MediaQueryResult) => {
console.log('changeRes:', JSON.stringify(res))
if(res.matches){
AppStorage.set('breakPoint','XS')
}
})
listenerSM.on('change', (res: mediaquery.MediaQueryResult) => {
console.log('changeRes:', JSON.stringify(res))
if(res.matches){
AppStorage.set('breakPoint','SM')
}
})
listenerMD.on('change', (res: mediaquery.MediaQueryResult) => {
console.log('changeRes:', JSON.stringify(res))
if(res.matches){
AppStorage.set('breakPoint','MD')
}
})
listenerLG.on('change', (res: mediaquery.MediaQueryResult) => {
console.log('changeRes:', JSON.stringify(res))
if(res.matches){
AppStorage.set('breakPoint','LG')
}
})
}
// 4. 移除监听器
aboutToDisappear(): void {
listenerXS.off('change')
listenerSM.off('change')
listenerMD.off('change')
listenerLG.off('change')
}
build() {
Column(){
Text(this.breakPoint)
.fontSize(20)
.fontWeight(600)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
03.栅格结构
栅格体系以设备的水平宽度（屏幕密度像素值)，单位vp）作为断点依据，界说设备的宽度类型，形成了一套断点规则。开发者可根据需求在差别的断点区间实现差别的页面结构结果
@Entry
@Component
struct Demo10 {
// 颜色数组
build() {
Column() {
// GridRow 默认支持 4 个断点
//xs:(0vp<=width<320vp) 智能穿戴，比如手表
//sm:(320vp<=width<600vp) 手机
//md:(600vp<=width<840vp) 折叠屏
//lg:(840vp<=width) 平板
GridRow({
// 4个断点 和默认的一样
breakpoints: { value: ['320vp', '600vp', '840vp'] },
gutter: 10, // 子组件间隙
// columns: 12 // 统一设计列数 默认 12
columns: {
// 不同的断点分别设置不同的列数
xs: 2, // 超小
sm: 4, // 手机竖屏
md: 8, // 折叠，手机横屏
lg: 12 // 大屏
}
}) {
ForEach(Array.from({ length: 2 }), (item: string, index: number) => {
GridCol({
// 每一行 2 个子元素，span 怎么设置（占的行数）
// span: 2, // 占用列数 这样设置所有断点都是 2 列
// 支持不同断点分别设置不同的占用列数
span: {
xs: 2,
sm: 2,
md: 2,
lg: 4
},
// offset 偏移列数 默认为 0
// offset: 1, // 偏移一列
// 支持不同断点分别设置偏移不同的列数
offset: {
// xs: 2,
// sm: 1
}
}) {
Text(index.toString())
.height(50)
}
.border({ width: 1 })
})
}
.border({ width: 1, color: Color.Orange })
.width('90%')
.height('90%')
}
.width('100%')
.height('100%')
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]