HarmonyOS实战—实现跑马灯效果

简介: HarmonyOS实战—实现跑马灯效果

1. Text文本框展示大段内容文字

  • 文本中展示大段文字,除了这种方式之外,还有其他方式

在这里插入图片描述

  • 可以使用跑马灯的形式展示,但需要两个前提条件,如下:

下面两个都是默认属性,也可以省略不写
在这里插入图片描述

  • ohos:truncation_mode="ellipsis_at_start",表示前面的内容省略掉,以“...”的形式,如:
<Text
    ohos:id="$+id:text1"
    ohos:height="100vp"
    ohos:width="100vp"
    ohos:background_element="#55121212"
    ohos:text="小明:你说我这穷日子过到啥时侯是个头啊?小红:那得看你能活多久了"
    ohos:text_size="40vp"
    ohos:truncation_mode="ellipsis_at_start"
   />

在这里插入图片描述

  • 把宽度改为 300vp

在这里插入图片描述

  • 如果想显示前面的内容,省略后面的内容,只要把 ohos:truncation_mode="ellipsis_at_end"

在这里插入图片描述

  • ohos:truncation_mode="auto_scrolling"表示滚动效果
  • ohos:auto_scrolling_count="10"表示跑马灯滚动的次数,10表示滚动十次,unlimited表示无限次数
  • ohos:auto_scrolling_duration="2000"表示跑的速度,2000是时间单位,毫秒,多少时间跑完,表示2秒跑完这段内容

2. 实现案例

  • 新建项目:TextLargeApplication

ability_main

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text1"
        ohos:height="100vp"
        ohos:width="300vp"
        ohos:background_element="#55121212"
        ohos:text="小明:你说我这穷日子过到啥时侯是个头啊?小红:那得看你能活多久了"
        ohos:text_size="40vp"
        ohos:truncation_mode="auto_scrolling"
        ohos:auto_scrolling_count="unlimited"
        ohos:auto_scrolling_duration="2000"
        />

</DirectionalLayout>

MainAbilitySlice

package com.xdr630.textlargeapplication.slice;

import com.xdr630.textlargeapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1.获取Text
        Text text1 = (Text) findComponentById(ResourceTable.Id_text1);

        //2.给Text文本添加单击事件
        //表示当单击一下的时候,开启跑马灯效果
        text1.setClickedListener(this);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        //开启跑马灯效果
        //两种方式获取文本的对象
        //1.方法的参数,参数表示被点击组件的对象
        //2.可以把 onStart 方法中的Text对象,挪到成员位置

        //使用第一种方法实现:
        //先强转,因为开启跑马灯的方法不是父类component里的方法,而是Text文本里的方法
        //所以,把component强转为Text
        Text t = (Text) component;
        t.startAutoScrolling();
    }
}
  • 运行:

在这里插入图片描述

  • 因为设置了auto_scrolling_count="unlimited属性,所以会无限次的滚动。当然也可以设置滚动多少次,以及滚动的时间。

在这里插入图片描述

目录
相关文章
|
1月前
|
Dart Android开发
鸿蒙Flutter实战:05-使用第三方插件
在鸿蒙Flutter开发中,使用原生功能需借助插件。可自编原生ArkTS代码或采用第三方插件。自编代码通过PlatformView或MethodChannel实现;第三方插件需确保适配鸿蒙,否则须配置替代插件或自行开发。
63 1
鸿蒙Flutter实战:05-使用第三方插件
|
1月前
|
Java 开发工具
鸿蒙Flutter实战:02-Windows环境搭建踩坑指南
本指南介绍如何搭建鸿蒙Flutter开发环境,包括下载Flutter SDK、配置环境变量(如FLUTTER_STORAGE_BASE_URL、PUB_HOSTED_URL、DEVECO_SDK_HOME等)和检查工具版本。还提到避免项目路径过深、与SDK同盘存放等注意事项,以及解决VsCode无法识别设备的方法。
49 0
|
16天前
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
45 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
16天前
|
开发工具 芯片 开发者
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
35 2
鸿蒙Flutter实战:12-使用模拟器开发调试
|
22天前
|
IDE 开发工具
鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0
本文介绍了如何使用 Flutter SDK 3.22.0 搭建鸿蒙开发环境。首先安装 Flutter SDK 3.22.0,并通过 FVM 管理多个版本。接着配置项目,使用 `fvm use custom_3.22.0` 设置自定义 SDK 版本。添加鸿蒙平台支持并进行项目签名,最后通过 `fvm flutter run` 运行项目。详细步骤包括安装、项目配置、签名和运行,确保开发环境顺利搭建。
57 7
鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0
|
21天前
|
UED
<大厂实战经验> Flutter&鸿蒙next 中使用 initState 和 mounted 处理异步请求的详细解析
在 Flutter 开发中,处理异步请求是常见需求。本文详细介绍了如何在 `initState` 中触发异步请求,并使用 `mounted` 属性确保在适当时机更新 UI。通过示例代码,展示了如何安全地进行异步操作和处理异常,避免在组件卸载后更新 UI 的问题。希望本文能帮助你更好地理解和应用 Flutter 中的异步处理。
62 3
|
21天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
102 1
|
29天前
|
JavaScript 数据管理 编译器
揭秘 ArkTS 与 TypeScript 的神秘差异:鸿蒙系统开发者的必备知识与实战技巧
【10月更文挑战第18天】ArkTS 是华为为鸿蒙系统(HarmonyOS)推出的开发语言,作为 TypeScript 的超集,它针对鸿蒙系统的分布式特性和需求进行了优化和扩展。ArkTS 强化了分布式数据管理、类型系统、编译与运行时性能,并支持声明式 UI 和专为鸿蒙设计的 API,使开发者能够更高效地开发跨设备协同工作的应用。
75 6
|
1月前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
77 3
|
1月前
|
Web App开发 JavaScript 前端开发
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
本文介绍如何在鸿蒙 Flutter 开发中调试 Webview,包括配置允许调试、找到 devtools 端口、开启端口转发、在 Chrome 中调试 Webview等。
30 0
鸿蒙Flutter实战:04-如何使用DevTools调试Webview

相关实验场景

更多
下一篇
无影云桌面