OpenHarmony南向设备开发：子系统普通组件开发

最新推荐文章于 2024-10-25 16:56:45 发布
最新推荐文章于 2024-10-25 16:56:45 发布
阅读量814 收藏 15
点赞数 30
分类专栏： OpenHarmony 鸿蒙5.0 南向设备开发 文章标签： harmonyos 华为 ubuntu linux android 嵌入式硬件 驱动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/River_ly/article/details/142822321
版权

往期鸿蒙全套实战精彩文章必看内容：

普通组件开发

普通组件均继承于基类UIView，不可以添加子组件，常用的普通组件有button、image、label等。

图1 普通组件树结构

UIView为基础类，UIAbstractProgress、UIArcLabel（旋转字体）、UIButton（按键）、UICanvas（画布）、UILabel（字体）、UIImageView（图片）从UIView继承。UIBoxProgress、UICircleProgress从UIAbstractProgress继承，UILabelButton和UIRepeatButton从UIButton继承，UIImageAnimatorView和UITextureMapper从UIImageView继承。

UIButton

使用场景

UIButton组件，提供可点击功能，同时可设置不同状态下样式。

接口说明

表1 button接口说明

方法功能
void SetImageSrc (const char *defaultImgSrc, const char *triggeredImgSrc)设置button图片
void SetImagePosition (const int16_t x, const int16_t y)设置button图片位置
int16_t GetImageX () const获取图片X坐标
int16_t GetImageY () const获取图片Y坐标
const ImageInfo* GetCurImageSrc() const获取当前状态图片
Style&  GetStyleForState (ButtonState state)设置button当前状态的style
voidSetStyleForState (const Style &style, ButtonState state)设置button指定状态的style
void Disable ()去使能button
void Enable ()使能button

开发步骤

  1. 实现点击事件。

    class TestBtnOnClickListener : public OHOS::UIView::OnClickListener {
    bool OnClick(UIView& view, const ClickEvent& event) override
    {
        int16_t width = view.GetWidth() + 10;
        int16_t height = view.GetHeight() + 10;
        view.Resize(width, height);
        view.Invalidate();
        return true;
    }
};

  2. 创建一个UIButton。

    UIButton* button = new UIButton();
button->SetPosition(50, 50);
button->SetWidth(100);
button->SetHeight(50);

  3. 给UIButton注册点击事件回调。

    button->SetOnClickListener(new TestBtnOnClickListener());

  4. 检查Button点击效果如下图所示，Button逐渐变大。

    图2 UIButton点击效果

UIImageView

使用场景

图片组件，提供图片显示，透明度设置，图片旋转、缩放功能。支持的图片格式为RGB565、RGB888、RGBA8888、PNG、JPG。

接口说明

表2 image接口说明

方法功能
void SetSrc (const char *src)设置二进制图片路径
void SetSrc (const ImageInfo *src)设置图片指针
void SetAutoEnable (bool enable)设置组件大小跟随image大小变化
const void* GetSrcType () const获取图片类型
bool GetAutoEnable () const获取组件大小是否跟随image大小变化
void SetBlurLevel(BlurLevel level)设置模糊等级
BlurLevel GetBlurLevel() const获取模糊等级
void SetTransformAlgorithm(TransformAlgorithm algorithm)设置旋转算法
TransformAlgorithm GetTransformAlgorithm() const获取旋转算法

开发步骤（自适应）

  1. 创建一个UIImageView。

    UIImageView* imageView = new UIImageView();
imageView->SetPosition(0, 30);

  2. 设置二进制格式的图片。

    imageView->SetSrc("..\\config\\images\\A021_001.bin");

  3. 检查UIImageView控件大小与图片相同。

    图3 自适应模式图片效果图

开发步骤（平铺模式）

  1. 创建一个UIImageView。

    UIImageView* imageView = new UIImageView();
imageView->SetPosition(0, 30);

  2. 设置图片。

    imageView->SetSrc("..\\config\\images\\A021_001.bin");

  3. 取消图片自适应，设置图片大小，平铺显示效果。

    imageView->SetAutoEnable(false);
imageView->Resize(454, 150);

  4. 检查UIImageView控件显示为平铺效果。

    图4 平铺模式图片效果图

UILabel

使用场景

标签（label）是在一块区域上显示文本字符串的组件，可设置区域背景色、文字的显示样式和长文本的显示效果等。

接口说明

表3 label接口说明

方法功能
void SetText(const char* text);设置文字
const char* GetText() const;获取text
void SetLineBreakMode(const uint8_t lineBreakMode);设置label模式，例如截断，自动扩展等。
uint8_t GetLineBreakMode() const获取label模式
void SetTextColor(ColorType color)设置文本颜色
ColorType GetTextColor() const获取文本颜色
void SetAlign(UITextLanguageAlignment horizontalAlign,
UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP);		设置文本对齐方式
UITextLanguageAlignment GetHorAlign() const获取文本水平对齐方式
UITextLanguageAlignment GetVerAlign() const获取文本竖直对齐方式
void SetDirect(UITextLanguageDirect direct)设置文本显示方向
UITextLanguageDirect GetDirect() const获取文本显示方向
void SetFontId(uint8_t fontId);设置动态字体id
uint8_t GetFontId() const获取动态字体id
void SetFont(const char *name, uint8_t size);设置字的名字和大小
void SetAnimatorSpeed(uint16_t animSpeed);设置字体旋转的速度
uint16_t GetTextWidth();获取字体的宽
uint16_t GetTextHeight();获取字体的高
void SetRollStartPos(int16_t pos)设置旋转的位置
int16_t GetRollStartPos() const获取旋转的位置
void SetTextRotation(LabelRotateDegree angle)设置文本旋转角度枚举值
LabelRotateDegree GetTextRotation() const获取文本旋转角度枚举值
uint16_t GetTextRotateDegree() const获取文本旋转角度数值

开发步骤（默认模式）

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置文本数据。

    label->SetText("label");

  4. 检查label大小和显示效果正常，如下图所示。

    图5 默认模式显示效果图

开发步骤（背景色和透明度）

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置背景颜色及透明度效果。

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetStyle(STYLE_BACKGROUND_OPA, 127);
label->SetText("Label");

  4. 检查label背景色为Gray，如下图所示。

    图6 设置背景色显示效果图

开发步骤（字符间距）

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置字体颜色和字间距效果。

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetStyle(STYLE_LETTER_SPACE, 5);
label->SetText("Label");

  4. 检查label字符间距为5，如下图所示。

    图7 设置文字颜色、字间距显示效果图

开发步骤（大小自适应）

当文本过长时，可根据文本信息自动调整label组件大小，也可以设置文本截断或者文本滚动效果。

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置字体颜色为Gray，组件大小自适应文本内容。

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT);
label->SetText("123\n567890");

  4. 检查label大小自适应文本内容，如下图所示。

    图8 自适应模式显示效果图

开发步骤（省略号模式）

省略号模式指文本内容显示不下时，在末尾显示省略号。

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置换行模式为DOT模式

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS);
label->SetText("123567890");

  4. 检查label DOT模式效果，如下图所示，末尾显示省略号。

    图9 DOT模式显示效果图

开发步骤（滚动模式）

文本滚动显示。

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置换行模式为滚动模式

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetStyle(STYLE_BACKGROUND_OPA, 127);
label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE);
label->SetText("123567890");

  4. 检查label滚动模式效果，如下图所示。

    图10 滚动模式显示效果图

初一十五啊
关注
专栏目录
鸿蒙南向开发实战：普通组件开发
shudaoshanQAQ的博客
04-25 967
普通组件均继承于基类UIView，不可以添加子组件，常用的普通组件有button、image、label等
OpenHarmony 实战开发——图形框架解析
m0_70748458的博客
07-07 898
众所周知，动画是系统和应用与用户交互的重要环节。动画效果的好坏会直接影响用户的体验。动画效果依赖图形系统，华为作为 OpenAtom OpenHarmony（以下简称“OpenHarmony”）开源项目贡献者，自主研发了一套以统一渲染为基础、高性能动效引擎为驱动的图形系统——OpenHarmony 图形栈。
OpenHarmony开发之图形UI组件解析
1
03-21 762
图形UI组件实现了一套系统级的图形引擎。该组件为应用开发提供UIKit接口，包括了动画、布局、图形转换、事件处理，以及丰富的UI组件。组件内部直接调用HAL接口，或者使用WMS(Window Manager Service)提供的客户端与硬件交互，以完成事件响应、图像绘制等操作。图 1图形子系统架构图。
【鸿蒙南向开发】OpenHarmony——Graphic子系统之开机动画
HarmonyOS_666的博客
08-06 1378
标准系统提供了图形接口能力和窗口管理接口能力， 支持应用程序框架子系统和ACE等子系统使用。故可以根据不同硬件系统选择编译不同模块，选择适配轻量系统或者标准系统。图形子系统主要包括UI组件、布局、动画、字体、输入事件、窗口管理、渲染绘制等模块。以下主要分析标准系统能力。代码版本是OpenHarmony3.1版本。开机动画是鸿蒙系统启动后，运行的第一个和图形渲染相关的进程，相关依赖相对独立便于分析，是分析图形子系统比较好的切入点。图形子系统主要依赖窗口、surface、render service。
鸿蒙系统开发实践--4.图形图像子系统
mingxing10192016的博客
06-11 1032
图形图像子系统内容见上图。 官方网站地址：https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/subsystems/%E5%B8%83%E5%B1%80%E5%AE%B9%E5%99%A8%E7%B1%BB%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E6%8C%87%E5%AF%BC.md 容器类组件开发 容器类组件，指能包含其它UI组件的组件，容器类组件继承于UIViewGroup（...
鸿蒙南向开发环境的搭建（OpenHarmony）
m0_70748458的博客
04-26 2300
在嵌入式开发中，很多开发者习惯于使用Windows进行代码的编辑，比如使用Windows的Visual StudioCode进行OpenHarmony代码的开发。但当前阶段，大部分的开发板源码还不支持在Windows环境下进行编译，如Hi3861、Hi3516系列开发板。因此，建议使用Ubuntu的编译环境对源码进行编译。
OpenHarmony开发实战：ArkTS基础知识，2024年最新HarmonyOS鸿蒙技术面试
2301_78399616的博客
04-20 1087
我们通过点击系统导航返回按钮来演示onBackPress回调方法的使用，在指定的时间段内，如果满足退出条件，onBackPress将返回false，系统默认关闭当前页面。否则，提示用户需要再点击一次才能退出，同时onBackPress返回true，表示用户自己处理导航返回事件。代码如下：@Entry@Component});有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：GridRow）
m0_64420071的博客
03-14 1301
ArkTS声明式开发（容器组件：GridRow）
鸿蒙OpenHarmony【小型系统 编写“Hello World”程序】（基于Hi3516开发板）
m0_62167422的博客
04-27 1226
而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点如果。
鸿蒙OpenHarmony【轻量系统编写“Hello World”程序】 （基于Hi3861开发板）
m0_62167422的博客
04-21 1408
而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点如果。
鸿蒙基础知识-自定义组件
程序猿中的小白
02-20 4804
一.概述 在实际的开发过程中，往往系统自己自带的组件是不能满足开发需求的，需要自己按照系统的规则去定制自己的组件； 鸿蒙os中的所有的组件的基类直接或者间接Component类，像Button，text，Image等等，能容纳别的组件的组件我们一般称之为容器类组件，这类组件的基类直接或者间接是ComponentContainer，像DirectionalLayout，DependentLayout等等； 二.自定义Component组件 1.继承Component类 public class T
OpenHarmony 设备开发 命令行方式 搭建开发环境
qq_38562020的博客
01-10 1177
到这里基本完成，这一溜下来，真佩服当初那些开发系统的工程师，最早放出鸿蒙系统的时候，是内部版本，先放出来看看大家的感受接收点反馈，所以这些琐碎的安装也就流出来了，现在的环境安装已经打包了，都自动完成这些流程了。下面正式开始： 这里要说明一下，环境配置的过程有一定的时效性，OpenHarmony更新很快，新版本编译依赖可能会改变，Ubuntu源里的软件也会更新变化。所以这个过程只代表当前情况。7. 下载源码，下载oh3版，源码大小比较小，后面的版本支持的内容多，源码很庞大，写Hi3861也用不上。
OpenHarmony 3D显示框架详解
程序猿老樊的博客
04-30 3306
由于 Mesa 3D 的 API 是和 OpenGL 相同，具体的 OpenGL 版本浏览 Mesa 3D 官方网站，我们可以这么认为它就是 OpenGL 的软件模拟，GPU 光栅处理器的一个实现。但是支持3D的显示扩展，我们可以使用OpenGL进行3D显示，Mesa库编译到OpenHarmony后，我们就可以使用OpenGL的2D，3D功能了，利用Openharmony里边Mesa3D，可以用OpenGL ES 接口在OpenHarmony里写3d的程序或者游戏。
OpenHarmony 设备开发命令行环境搭建【Ubuntu22.04】
weixin_54073049的博客
07-17 2709
需要分两步进行安装，按照OpenHarmony官网的步骤会报错。，需要将shell环境修改为。软件来替代官网软链接的方式。将repo添加到环境变量。
OpenHarmony 物联网设备开发环境搭建
Halifax
12-20 2487
前言 我们介绍的是华为官方推荐的 Windows + Ubuntu 混合开发的环境，使用Windows平台的DevEco Device Tool 进行可视化界面进行相关操作，通过远程连接的方式对接Ubuntu下的DevEco Device Tool，然后对Ubuntu下的源码进行开发、编译、烧录等操作。 目前官方不支持Mac系统，所以目前大家最好使用Windows+Ubuntu混合进行设备开发。 本篇文章用的是最新的DevEco Device Tool 3.1 Beta1工具 环境搭建 一、系统要求 W
鸿蒙开发图形图像：【图形子系统】
2301_76813281的博客
03-22 1246
图形子系统主要包括UI组件、布局、动画、字体、输入事件、窗口管理、渲染绘制等模块，构建基于轻量OS的应用框架，满足硬件资源较小的物联网设备的OpenHarmony系统应用开发。图 1图形子系统架构图View：应用组件，包括UIView、UIViewGroup、UIButton、UILabel、UILabelButton、UIList、UISlider等。Animator：动画模块，开发者可以自定义动画。Layout：布局控件，包括FlexLayout、GridLayout、ListLayout等。
鸿蒙OpenHarmony【图形图像之小型系统图形框架集成】子系统
最新发布
asd95279527p的博客
10-25 635
当前，小型系统图形模块以子系统的形式在 OpenHarmony 中运行。开发者只需适配实现OpenHarmony HDF 层 API 即可。由于使用场景不同，图形子系统也支持在不同平台集成运行
鸿蒙南向开发实战：容器类组件开发
shudaoshanQAQ的博客
04-25 1303
容器类组件，指能包含其它UI组件的组件.......
鸿蒙前端开发基础：OpenHarmony JS入门与组件实战
接下来，教程深入讲解了组件化开发，介绍了鸿蒙系统中的组件，如chart组件的使用，以及如何自定义组件并实现组件间的通信，如父组件通过props向子组件传递数据和slot插槽分发机制。这部分内容对于理解模块化开发和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值