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属性,所以会无限次的滚动。当然也可以设置滚动多少次,以及滚动的时间。

在这里插入图片描述

目录
相关文章
|
9天前
|
监控 JavaScript 编译器
从“天书”到源码:HarmonyOS NEXT 崩溃堆栈解析实战指南
本文详解如何利用 hiAppEvent 监控并获取 sourcemap、debug so 等核心产物,剖析了 hstack 工具如何将混淆的 Native 与 ArkTS 堆栈还原为源码,助力开发者掌握异常分析方法,提升应用稳定性。
|
10天前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
86 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
15天前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
65 0
|
16天前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
187 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
18天前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
293 3
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
2月前
鸿蒙应用开发从入门到实战(十六):线性布局案例
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文通过简单案例演示如何使用Column和Row组件实现线性布局。
|
2月前
|
开发者 容器
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Column和Row组件的使用以及线性布局的方法。
211 12
|
2月前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供滑块Slider与进度条Progress组件,用于鸿蒙原生APP开发。Slider支持拖动调节音量、亮度等,可设步长、方向及提示气泡;Progress支持线性、环形等多种样式,可自定义颜色、宽度与刻度,实时显示任务进度。
180 2
|
2月前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解滑块Slider和进度条Progress组件的使用。
120 1
|
2月前
|
开发者
鸿蒙应用开发从入门到实战(十二):ArkUI组件Button&Toggle
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解按钮组件Button和Toggle的使用。
222 2

热门文章

最新文章

下一篇
开通oss服务