公明网站建设,连云港企业网站建设公司,公司logo设计费,招标网平台自适应布局
拉伸能力
Blank在容器主轴方向上#xff0c;空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效#xff0c;即是线性布局。这样便可以在两个固定宽度或高度的组件中间添加一个Blank()#xff0c;将剩余空间占满#xff0c;从而实现…自适应布局
拉伸能力
Blank在容器主轴方向上空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效即是线性布局。这样便可以在两个固定宽度或高度的组件中间添加一个Blank()将剩余空间占满从而实现占两头的效果 而在使用弹性布局中可以使用flexBasis设置子组件在父容器主轴方向上的基准尺寸还可以使用flexGrow来设置父容器的剩余空间分配给此属性所在组件的比例。最后还有flexShrink它可以在父容器空间不足时压缩子组件的比例。
缩放能力
自适应缩放是指在各种不同大小设备中子组件按照预设的比例尺寸随容器尺寸的变化而变化。有两种方法可以实现。
1、使用layoutWeight属性
父容器尺寸确定时设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配忽略元素本身尺寸设 置在任意尺寸设备下自适应占满剩余空间
2、使用百分比设置
父容器尺寸确定时使用百分比设置子组件以及兄弟组件的width宽度可以保证各自元素在任意尺寸下的自适应占比
定位能力
1、相对定位
使用组件的offset属性进行相对定位会根据初始位置按照设定好的偏移量进行位置调整。使用线性布局和offset可以实现大部 分布局的开发
2、绝对定位
使用positon属性实现绝对布局设定左上角为00位置可以设置x和y坐标进行位置调整。但是对于不同尺寸的设备使 得很多时候用绝对定位的适应性会比较差在屏幕的适配上有缺陷
延伸能力
容器在一个屏幕下无法展示所有内容的时候就需要通过滚动条拖动展示方法有两种List组件和Scroll组件。list和scroll纵向 和横向均可以。用循环渲染进行渲染若数据量过多超过了一个屏幕便可以通过滚动条拖动显示。
均分能力
线性布局 通过上图的三个参数设置实现了布局的自适应均分能力
弹性布局
相比于前者弹性布局少了space参数但是direction、wrap和alignContent的加入更加能体现出布局的自适应均分能力
网格布局
网格布局具备较强的页面均分能力它可以按行按列将容器均分成n块然后再按列按行将子组件一个个放进去。例如在计算器 应用可以将网格布局的页面均分能力充分地体现出来。
占比能力
网格布局具备较强的子组件占比控制能力支持自定义网格布局行数和列数以及每行每列尺寸占比支持设置子组件横跨几行 或者几列
隐藏能力
1、条件渲染
2、显隐控制
拆行能力
网格布局支持设置子组件横跨几行或者几列
响应式布局
断点
栅格系统断点
栅格系统通过监听窗口或容器的尺寸变化进行断点通过reference设置断点切换参考物从而实现了根据断点来判断采用哪 种设备的布局设置最多可以设置六种设备。 { // 设栅格系统有12列断点有五个可以判断六种设备columns: 12,breakpoints: {value: [200vp, 300vp, 400vp, 500vp, 1200vp],reference: BreakpointsReference.ComponentSize}span: { // 第一个种设备每个栅格子元素占用两列第二种3列第三种四列以此类推xs: 2,sm: 3,md: 4,lg: 6,xl: 8,xxl: 12}上面参数的设置的效果如下图所示 媒体查询 媒体查询Media Query作为响应式设计的核心在移动设备上应用十分广泛。它根据不同设备类型或同设备不同状态修改应用的样式。媒体查询的优势有 提供丰富的媒体特征监听能力针对设备和应用的属性信息比如显示区域、深浅色、分辨率设计出相匹配的布局。当屏幕发生动态改变时比如分屏、横竖屏切换同步更新应用的页面布局。 官方例子
import mediaquery from ohos.mediaquerylet portraitFunc nullEntry
Component
struct MediaQueryExample {State color: string #DB7093State text: string Portraitlistener mediaquery.matchMediaSync((orientation: landscape)) // 当设备横屏时条件成立onPortrait(mediaQueryResult) {if (mediaQueryResult.matches) {this.color #FFD700this.text Landscape} else {this.color #DB7093this.text Portrait}}aboutToAppear() {portraitFunc this.onPortrait.bind(this) // 绑定当前应用实例this.listener.on(change, portraitFunc)}build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text(this.text).fontSize(50).fontColor(this.color)}.width(100%).height(100%)}
}
横屏下文本内容为Landscape颜色为#FFD700 非横屏下文本内容为Portrait颜色为#DB7093 栅格布局
栅格布局的总列数可以参考断点处就是要设置好一共有多少行还有每个栅格子元素占用多少行
栅格子组件间距也很简单就设置一下gutter就可以了gutter: 10是水平间距gutter: { x: 20, y: 50 } 是水平垂直间距
排列方向有从左往右和从右往左
而对于栅格子组件GridCol有spanoffsetorder三个参数可以设置
span子组件占栅格布局的列数可以统一设置也可以分设备类型设置不同占比
offset就是偏移列数就是可以起到拆列的作用
order栅格子组件的序号决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时order较小的组件在前较大的在后。 当子组件部分设置order部分不设置order时未设置order的子组件依次排序靠前设置了order的子组件按照数值从小到大排列。
动画
属性动画
这个可以直接跟在组件的属性方法里面进行填写不过只支持width、height、backgroundColor、opacity、scale、rotate、translate等部分通用属性变化时生效 .animation({duration: 2000,curve: Curve.EaseOut,iterations: 3,playMode: PlayMode.Normal})显式动画
提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
和前者不同的是这里可以在全局对设定好的参数进行改变便可以触发动画的执行 .onClick(() {if (this.flag) {animateTo({duration: 2000,curve: Curve.EaseOut,iterations: 3,playMode: PlayMode.Normal,onFinish: () {console.info(play end)}}, () {this.widthSize 100this.heightSize 50})} else {animateTo({}, () {this.widthSize 250this.heightSize 100})}this.flag !this.flag})转场动画
页面间转场 在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。 官方例子配置了当前页面的入场动画为淡入退场动画为缩小。
// index.ets
Entry
Component
struct PageTransitionExample1 {State scale1: number 1State opacity1: number 1build() {Column() {Navigator({ target: pages/page1, type: NavigationType.Push }) {Image($r(app.media.bg1)).width(100%).height(100%) // 图片存放在media文件夹下}}.scale({ x: this.scale1 }).opacity(this.opacity1)}// 自定义方式1完全自定义转场过程的效果pageTransition() {PageTransitionEnter({ duration: 1200, curve: Curve.Linear }).onEnter((type: RouteType, progress: number) {this.scale1 1this.opacity1 progress}) // 进场过程中会逐帧触发onEnter回调入参为动效的归一化进度(0% -- 100%)PageTransitionExit({ duration: 1500, curve: Curve.Ease }).onExit((type: RouteType, progress: number) {this.scale1 1 - progressthis.opacity1 1}) // 退场过程中会逐帧触发onExit回调入参为动效的归一化进度(0% -- 100%)}
}
// page1.ets
Entry
Component
struct AExample {State scale2: number 1State opacity2: number 1build() {Column() {Navigator({ target: pages/index, type: NavigationType.Push }) {Image($r(app.media.bg2)).width(100%).height(100%) // 图片存放在media文件夹下}}.width(100%).height(100%).scale({ x: this.scale2 }).opacity(this.opacity2)}// 自定义方式1完全自定义转场过程的效果pageTransition() {PageTransitionEnter({ duration: 1200, curve: Curve.Linear }).onEnter((type: RouteType, progress: number) {this.scale2 1this.opacity2 progress}) // 进场过程中会逐帧触发onEnter回调入参为动效的归一化进度(0% -- 100%)PageTransitionExit({ duration: 1500, curve: Curve.Ease }).onExit((type: RouteType, progress: number) {this.scale2 1 - progressthis.opacity2 1}) // 退场过程中会逐帧触发onExit回调入参为动效的归一化进度(0% -- 100%)}
} 组件内转场
组件内转场主要通过transition属性配置转场参数在组件插入和删除时显示过渡动效主要用于容器组件中的子组件插入和删除时提升用户体验需要配合animateTo才能生效动效时长、曲线、延时跟随animateTo中的配置。
官方实例点击消失时在预览器中无法看到生效效果但其实已经生效了需要在开发板或真机中才能看到
// xxx.ets
Entry
Component
struct TransitionExample {State flag: boolean trueState show: string showbuild() {Column() {Button(this.show).width(80).height(30).margin(30).onClick(() {// 点击Button控制Image的显示和消失animateTo({ duration: 1000 }, () {if (this.flag) {this.show hide} else {this.show show}this.flag !this.flag})})if (this.flag) {// Image的显示和消失配置为不同的过渡效果Image($r(app.media.testImg)).width(300).height(300).transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } }).transition({ type: TransitionType.Delete, rotate: { angle: 180 } })}}.width(100%)}
}
共享元素转场
设置页面间转场时共享元素的转场动效
官方实例点击图片跳转页面时显示共享元素图片的自定义转场动效。
// xxx.ets
Entry
Component
struct SharedTransitionExample {State active: boolean falsebuild() {Column() {Navigator({ target: pages/PageB, type: NavigationType.Push }) {Image($r(app.media.ic_health_heart)).width(50).height(50).sharedTransition(sharedImage, { duration: 800, curve: Curve.Linear, delay: 100 })}.padding({ left: 20, top: 20 }).onClick(() {this.active true})}}
}
// PageB.ets
Entry
Component
struct pageBExample {build() {Stack() {Image($r(app.media.ic_health_heart)).width(150).height(150).sharedTransition(sharedImage, { duration: 800, curve: Curve.Linear, delay: 100 })}.width(100%).height(100%)}
} 路径动画
设置组件进行位移动画时的运动路径
toggle作为参数当它改变的时候组件的位置会发生改变从而触发了动画的执行而motionPath可以将它的路径规划出来。 弹窗
警告弹窗
显示警告弹窗组件可设置文本内容与响应回调
里面可以填写一些与用户交互的信息并通过确认或取消按钮触发一个回调从而完成一定的目的
列表选择弹窗
里面有可滑动选择的信息并通过确认或取消按钮触发一个回调从而完成一定的目的
自定义弹窗 通过CustomDialogController类显示自定义弹窗。使用弹窗组件时可优先考虑自定义弹窗便于自定义弹窗的样式与内容。 这可以给开发者自定义更多弹窗样式开发出弹窗更加多的功能
日期滑动选择器弹窗 根据指定的日期范围创建日期滑动选择器展示在弹窗上。 时间滑动选择器弹窗 以24小时的时间区间创建时间滑动选择器展示在弹窗上。 文本滑动选择器弹窗 根据指定的选择范围创建文本选择器展示在弹窗上。 手势处理
绑定手势方法 为组件绑定不同类型的手势事件并设置事件的响应方法。 绑定方式有三种gesture绑定手势priorityGesture绑定优先识别手势parallelGesture绑定可与子组件手势同时触发的手势手势事件为非冒泡事件通过这个可以改成冒泡事件。另外可以通过更改GestureMask的参数来选择是否屏蔽掉子组件的手势。最后onAction为响应手势事件即为Tap手势识别成功回调。
手势类型有七种
名称描述TapGesture点击手势支持单次点击、多次点击识别。LongPressGesture长按手势。PanGesture平移手势滑动最小距离为5vp时识别成功。PinchGesture捏合手势。RotationGesture旋转手势。SwipeGesture滑动手势滑动最小速度为100vp/s时识别成功。GestureGroup手势识别组多种手势组合为复合手势支持连续识别、并行识别和互斥识别。
每种手势类型都有一个fingers参数用来限制可以几指触发另外还有各种独有的参数有directionspeedangledistancedirectionrepeatrepeat
组合手势 手势识别组合即多种手势组合为复合手势支持连续识别、并行识别和互斥识别。 用mode设置组合手势识别模式有顺序识别、并发识别和互斥识别
s时识别成功。 | | GestureGroup | 手势识别组多种手势组合为复合手势支持连续识别、并行识别和互斥识别。 |
每种手势类型都有一个fingers参数用来限制可以几指触发另外还有各种独有的参数有directionspeedangledistancedirectionrepeatrepeat
组合手势 手势识别组合即多种手势组合为复合手势支持连续识别、并行识别和互斥识别。 用mode设置组合手势识别模式有顺序识别、并发识别和互斥识别
