0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkTS声明式开发:跨平台支持列表【组件内容填充方式】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-06-15 09:11 次阅读

组件内容填充方式

用于决定在组件的宽高动画过程中,如何将动画最终的组件内容绘制在组件上。

说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]点击或者复制转到。
从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称参数类型必填描述
renderFit[RenderFit]设置宽高动画过程中的组件内容填充方式。 当不设置renderFit属性时,取默认值RenderFit.TOP_LEFT。

RenderFit枚举说明

名称描述示意图
CENTER保持动画终态的内容大小,并且内容始终与组件保持中心对齐。![renderfit_center]
TOP保持动画终态的内容大小,并且内容始终与组件保持顶部中心对齐。![renderfit_top]
BOTTOM保持动画终态的内容大小,并且内容始终与组件保持底部中心对齐。![renderfit_bottom]
LEFT保持动画终态的内容大小,并且内容始终与组件保持左侧对齐。![renderfit_left]
RIGHT保持动画终态的内容大小,并且内容始终与组件保持右侧对齐。![renderfit_right]
TOP_LEFT保持动画终态的内容大小,并且内容始终与组件保持左上角对齐。![renderfit_top_left]
TOP_RIGHT保持动画终态的内容大小,并且内容始终与组件保持右上角对齐。![renderfit_top_right]
BOTTOM_LEFT保持动画终态的内容大小,并且内容始终与组件保持左下角对齐。![renderfit_bottom_left]
BOTTOM_RIGHT保持动画终态的内容大小,并且内容始终与组件保持右下角对齐。![renderfit_bottom_right]
RESIZE_FILL不考虑动画终态内容的宽高比,并且内容始终缩放到组件的大小。![renderfit_resize_fill]
RESIZE_CONTAIN保持动画终态内容的宽高比进行缩小或放大,使内容完整显示在组件内,且与组件保持中心对齐。![renderfit_resize_contain]
RESIZE_CONTAIN_TOP_LEFT保持动画终态内容的宽高比进行缩小或放大,使内容完整显示在组件内。当组件宽方向有剩余时,内容与组件保持左侧对齐,当组件高方向有剩余时,内容与组件保持顶部对齐。![renderfit_resize_contain_top_left]
RESIZE_CONTAIN_BOTTOM_RIGHT保持动画终态内容的宽高比进行缩小或放大,使内容完整显示在组件内。当组件宽方向有剩余时,内容与组件保持右侧对齐,当组件高方向有剩余时,内容与组件保持底部对齐。![renderfit_resize_contain_bottom_right]
RESIZE_COVER保持动画终态内容的宽高比进行缩小或放大,使内容两边都大于或等于组件两边,且与组件保持中心对齐,显示内容的中间部分。![renderfit_resize_cover]
RESIZE_COVER_TOP_LEFT保持动画终态内容的宽高比进行缩小或放大,使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时,内容与组件保持左侧对齐,显示内容的左侧部分。当内容高方向有剩余时,内容与组件保持顶部对齐,显示内容的顶侧部分。![renderfit_resize_cover_top_left]
RESIZE_COVER_BOTTOM_RIGHT保持动画终态内容的宽高比进行缩小或放大,使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时,内容与组件保持右侧对齐,显示内容的右侧部分。当内容高方向有剩余时,内容与组件保持底部对齐,显示内容的底侧部分。![renderfit_resize_cover_bottom_right]HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿

新文档.png

说明:

  • 示意图中,蓝色区域表示内容,橙黄色区域表示节点大小。
  • 不同的内容填充方式在宽高动画过程中效果不一致,开发者需要选择合适的内容填充方式以实现需要的动画效果。

示例

// xxx.ets
@Entry
@Component
struct RenderFitExample {
  @State width1: number = 100;
  @State height1: number = 30;
  flag: boolean = true;
  build() {
    Column() {
      Text("Hello")
        .width(this.width1)
        .height(this.height1)
        .borderWidth(1)
        .textAlign(TextAlign.Start)
        .renderFit(RenderFit.LEFT) // 设置LEFT的renderFit,动画过程中,动画的终态内容与组件保持左对齐
        .margin(20)

      Text("Hello")
        .width(this.width1)
        .height(this.height1)
        .textAlign(TextAlign.Center)
        .borderWidth(1)
        .renderFit(RenderFit.CENTER) // 设置CENTER的renderFit,动画过程中,动画的终态内容与组件保持中心对齐
        .margin(20)

      Button("animate")
        .onClick(() = > {
          animateTo({ curve: Curve.Ease }, () = > {
            if (this.flag) {
              this.width1 = 150;
              this.height1 = 50;
            } else {
              this.width1 = 100;
              this.height1 = 30;
            }
            this.flag = !this.flag;
          })
        })
    }.width("100%").height("100%").alignItems(HorizontalAlign.Center)
  }
}

renderfit

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • API
    API
    +关注

    关注

    2

    文章

    1446

    浏览量

    61293
  • 组件
    +关注

    关注

    1

    文章

    475

    浏览量

    17672
  • 鸿蒙
    +关注

    关注

    55

    文章

    2254

    浏览量

    42323
收藏 人收藏

    评论

    相关推荐

    鸿蒙ArkTS的起源和简介

    主流的前端开发方式。同步的,在运行时方面,通过渲染引擎的增强(平台无关的自绘制机制、声明UI后端设计、动态布局/多态UI组件等),语言编译
    发表于 01-16 16:23

    HarmonyOS/OpenHarmony应用开发-ArkTS声明开发范式

    基于ArkTS声明开发范式的方舟开发框架是一套开发极简、高性能、
    发表于 01-17 15:09

    鸿蒙ArkTS声明开发平台支持列表【点击事件】

    组件被点击时触发的事件。
    的头像 发表于 05-26 21:25 137次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【点击事件】

    鸿蒙ArkTS声明开发平台支持列表【触摸事件】

    当手指在组件上按下、滑动、抬起时触发。
    的头像 发表于 05-27 09:34 215次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【触摸事件】

    鸿蒙ArkTS声明开发平台支持列表【按键事件】

    按键事件指组件与键盘、遥控器等按键设备交互时触发的事件,适用于所有可获焦组件,例如Button。对于Text,Image等默认不可获焦的组件,可以设置focusable属性为true后使用按键事件。
    的头像 发表于 05-28 18:12 592次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【按键事件】

    鸿蒙ArkTS声明开发平台支持列表【焦点事件】

    焦点事件指页面焦点在可获焦组件间移动时触发的事件,组件可使用焦点事件来处理相关逻辑。
    的头像 发表于 05-27 22:17 122次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【焦点事件】

    鸿蒙ArkTS声明开发平台支持列表组件快捷键事件】

    开发者可以设置组件的自定义组合键,组合键的行为与click行为一致,组件在未获得焦点状态下也可以响应自定义组合键,每个组件可以设置多个组合键。
    的头像 发表于 05-28 15:49 163次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【<b class='flag-5'>组件</b>快捷键事件】

    鸿蒙ArkTS声明开发平台支持列表【Flex布局】 通用属性

    从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > - 仅当父组件是 Flex、Column、Row 、GridRow时生效。
    的头像 发表于 05-30 14:38 215次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【Flex布局】 通用属性

    鸿蒙ArkTS声明开发平台支持列表【显隐控制】 通用属性

    控制当前组件显示或隐藏。注意,即使组件处于隐藏状态,在页面刷新时仍存在重新创建过程,因此当对性能有严格要求时建议使用[条件渲染]代替。 默认值:Visibility.Visible 从API version 9开始,该接口支持
    的头像 发表于 06-03 14:46 382次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【显隐控制】 通用属性

    鸿蒙ArkTS声明开发平台支持列表【形状裁剪】 通用属性

    参数为相应类型的组件,按指定的形状对当前组件进行裁剪;参数为boolean类型时,设置是否按照父容器边缘轮廓进行裁剪。 默认值:false 从API version 9开始,该接口支持Ark
    的头像 发表于 06-04 15:22 202次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【形状裁剪】 通用属性

    鸿蒙ArkTS声明开发平台支持列表【菜单控制】 通用属性

    组件绑定弹出菜单,弹出菜单以垂直列表形式显示菜单项,可通过长按、点击或鼠标右键触发。
    的头像 发表于 06-06 09:17 180次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【菜单控制】 通用属性

    鸿蒙ArkTS声明开发平台支持列表组件标识】 通用属性

    id为组件的唯一标识,在整个应用内唯一。本模块提供组件标识相关接口,可以获取指定id组件的属性,也提供向指定id组件发送事件的功能。
    的头像 发表于 06-06 15:51 144次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【<b class='flag-5'>组件</b>标识】 通用属性

    鸿蒙ArkTS声明开发平台支持列表【多态样式】 通用属性

    设置组件不同状态的样式。 从API version 9开始,该接口支持ArkTS卡片中使用。
    的头像 发表于 06-07 09:48 173次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【多态样式】 通用属性

    鸿蒙ArkTS声明开发平台支持列表【分布迁移标识】 通用属性

    组件的分布迁移标识,指明了该组件在分布迁移场景下可以将特定状态恢复到对端设备。
    的头像 发表于 06-07 21:15 147次阅读

    鸿蒙ArkTS声明开发平台支持列表组件内容模糊】 通用属性

    为当前组件提供内容模糊能力。 value: 内容模糊样式。模糊样式由模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数组成。 options: 可选参数,内容模糊选项。
    的头像 发表于 06-10 18:32 407次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【<b class='flag-5'>组件</b><b class='flag-5'>内容</b>模糊】 通用属性