鸿蒙HarmonyOS中的ArkUI组件库特性与常用组件实例演示
9人参与 • 2026-01-31 • ar
本文介绍了harmonyos的arkui组件库及其核心特性,详细讲解了15个常用组件的使用方法,并通过创建一个电商首页组件展示了组件的布局和交互效果优化,文章还提供了项目运行步骤和效果验证,帮助读者掌握组件的开发和优化技巧。
学习目标：
- 理解arkui组件的分类与核心特性；
- 掌握15个常用arkui组件的用法（布局容器、文本、按钮、输入框、列表、网格等）；
- 实现一个电商首页组件（包含轮播图、分类导航、商品列表、底部导航栏）；
- 优化组件交互效果（悬停、点击、滑动动画）。
学习重点：
- 弹性布局（flex）与网格布局（grid）的深度应用；
- 自定义组件与系统组件的结合使用；
- 响应式布局的实现（适配不同设备尺寸）。
一、 arkui组件库概述 📚
1.1 组件分类
harmonyos next的arkui组件库分为基础组件和高级组件：
| 分类 | 组件示例 |
|---|---|
| 基础组件 | text、image、button、input、textarea、checkbox、radio、slider、switch |
| 容器组件 | column、row、flex、grid、griditem、list、listitem、stack |
| 高级组件 | swiper（轮播图）、tabcontent（标签页）、carousel（卡片轮播）、waterflow（瀑布流） |
1.2 核心特性
- 声明式ui：通过代码描述ui结构，编译器自动渲染；
- 数据驱动：组件属性与状态数据绑定，数据变化自动更新ui；
- 响应式布局：自动适配不同设备尺寸；
- 组件复用：支持自定义组件，提高代码复用率；
- 高性能渲染：采用方舟编译器编译，渲染效率比传统web开发高10-20倍。
二、 常用组件实战 🛠️
2.1 实战目标
基于第1篇的「myfirstharmonyapp」项目架构，创建一个电商首页组件，包含以下功能：
- 轮播图（swiper）：展示促销活动；
- 分类导航（grid）：显示商品分类；
- 商品列表（list）：展示热门商品；
- 底部导航栏（tabbar）：实现页面切换。
2.2 🔧 项目结构调整
在「entry/src/main/ets」目录下创建以下文件夹：
components：存放自定义组件；models：存放数据模型；utils：存放工具函数。
2.3 🔧 数据模型与工具函数
1. 数据模型
⌨️ entry/src/main/ets/models/homemodel.ets
// 轮播图数据模型
export interface bannermodel {
id: number;
imageurl: string;
linkurl: string;
}
// 分类导航数据模型
export interface categorymodel {
id: number;
name: string;
iconurl: string;
}
// 商品数据模型
export interface goodsmodel {
id: number;
name: string;
imageurl: string;
price: number;
originalprice: number;
sales: number;
}
// 底部导航栏数据模型
export interface tabbarmodel {
id: number;
name: string;
iconurl: string;
selectediconurl: string;
pageurl: string;
}
2. 工具函数
⌨️ entry/src/main/ets/utils/imageutils.ets
// 图片加载工具函数
export function getimageurl(imagepath: string): string {
return `$r('app.media.${imagepath}')`;
}
3. 模拟数据
⌨️ entry/src/main/ets/models/homedata.ets
import { bannermodel, categorymodel, goodsmodel, tabbarmodel } from './homemodel';
import { getimageurl } from '../utils/imageutils';
// 轮播图模拟数据
export const bannerdata: array<bannermodel> = [
{ id: 1, imageurl: getimageurl('banner1'), linkurl: 'pages/productdetailpage' },
{ id: 2, imageurl: getimageurl('banner2'), linkurl: 'pages/productdetailpage' },
{ id: 3, imageurl: getimageurl('banner3'), linkurl: 'pages/productdetailpage' }
];
// 分类导航模拟数据
export const categorydata: array<categorymodel> = [
{ id: 1, name: '手机', iconurl: getimageurl('category1') },
{ id: 2, name: '平板', iconurl: getimageurl('category2') },
{ id: 3, name: '笔记本', iconurl: getimageurl('category3') },
{ id: 4, name: '智能穿戴', iconurl: getimageurl('category4') },
{ id: 5, name: '家居', iconurl: getimageurl('category5') },
{ id: 6, name: '出行', iconurl: getimageurl('category6') }
];
// 商品模拟数据
export const goodsdata: array<goodsmodel> = [
{ id: 1, name: '华为mate 60 pro', imageurl: getimageurl('goods1'), price: 6999, originalprice: 7999, sales: 12345 },
{ id: 2, name: '华为p60 pro', imageurl: getimageurl('goods2'), price: 5999, originalprice: 6999, sales: 8765 },
{ id: 3, name: '华为nova 12 pro', imageurl: getimageurl('goods3'), price: 3999, originalprice: 4999, sales: 6543 },
{ id: 4, name: '华为matebook x pro', imageurl: getimageurl('goods4'), price: 8999, originalprice: 9999, sales: 4321 },
{ id: 5, name: '华为watch gt 4', imageurl: getimageurl('goods5'), price: 1499, originalprice: 1699, sales: 2109 }
];
// 底部导航栏模拟数据
export const tabbardata: array<tabbarmodel> = [
{ id: 1, name: '首页', iconurl: getimageurl('tab1'), selectediconurl: getimageurl('tab1_selected'), pageurl: 'pages/index' },
{ id: 2, name: '分类', iconurl: getimageurl('tab2'), selectediconurl: getimageurl('tab2_selected'), pageurl: 'pages/categorypage' },
{ id: 3, name: '购物车', iconurl: getimageurl('tab3'), selectediconurl: getimageurl('tab3_selected'), pageurl: 'pages/cartpage' },
{ id: 4, name: '我的', iconurl: getimageurl('tab4'), selectediconurl: getimageurl('tab4_selected'), pageurl: 'pages/mypage' }
];
2.4 🔧 自定义组件实现
1. 轮播图组件
⌨️ entry/src/main/ets/components/bannercomponent.ets
import { bannermodel } from '../models/homemodel';
import router from '@ohos.router';
@component
export struct bannercomponent {
@prop data: array<bannermodel> = [];
build() {
swiper() {
foreach(this.data, (item: bannermodel) => {
image(item.imageurl)
.width('100%')
.height(200)
.objectfit(imagefit.cover)
.borderradius(12)
.onclick(() => {
router.pushurl({ url: item.linkurl });
});
}, (item: bannermodel) => item.id.tostring());
}
.width('100%')
.height(200)
.autoplay(true)
.indicator({
style: indicatorstyle.number,
isshow: true,
size: 12
})
.loop(true)
.duration(3000);
}
}
2. 分类导航组件
⌨️ entry/src/main/ets/components/categorycomponent.ets
import { categorymodel } from '../models/homemodel';
import router from '@ohos.router';
@component
export struct categorycomponent {
@prop data: array<categorymodel> = [];
build() {
grid() {
foreach(this.data, (item: categorymodel) => {
griditem() {
column({ space: 8 }) {
image(item.iconurl)
.width(50)
.height(50)
.objectfit(imagefit.contain);
text(item.name)
.fontsize(14)
.textcolor('#666666');
}
.width('100%')
.height('100%')
.onclick(() => {
router.pushurl({ url: 'pages/categorypage' });
});
}
.width('33.33%')
.height('auto');
}, (item: categorymodel) => item.id.tostring());
}
.width('100%')
.height('auto')
.columnstemplate('1fr 1fr 1fr')
.rowstemplate('1fr 1fr')
.columnsgap(20)
.rowsgap(20);
}
}
3. 商品列表组件
⌨️ entry/src/main/ets/components/goodslistcomponent.ets
import { goodsmodel } from '../models/homemodel';
import router from '@ohos.router';
@component
export struct goodslistcomponent {
@prop data: array<goodsmodel> = [];
build() {
list({ space: 16 }) {
foreach(this.data, (item: goodsmodel) => {
listitem() {
goodsitemcomponent({ goods: item });
}
.width('100%')
.height('auto');
}, (item: goodsmodel) => item.id.tostring());
}
.width('100%')
.height('auto')
.padding(0, 16, 0, 16);
}
}
@component
struct goodsitemcomponent {
@prop goods: goodsmodel;
build() {
column({ space: 12 }) {
// 商品图片
image(this.goods.imageurl)
.width('100%')
.height(200)
.objectfit(imagefit.cover)
.borderradius(12);
// 商品信息
column({ space: 8 }) {
text(this.goods.name)
.fontsize(16)
.fontweight(fontweight.bold)
.textcolor('#000000')
.maxlines(2)
.ellipsis({ overflow: textoverflow.ellipsis });
// 价格与销量
row({ space: 16 }) {
column({ space: 4 }) {
text(`¥${this.goods.price}`)
.fontsize(18)
.fontweight(fontweight.bold)
.textcolor('#ff0000');
text(`¥${this.goods.originalprice}`)
.fontsize(14)
.textcolor('#999999')
.decoration({ type: textdecorationtype.linethrough });
}
.alignitems(horizontalalign.start);
text(`已售${this.goods.sales}`)
.fontsize(14)
.textcolor('#666666');
}
.width('100%')
.justifycontent(flexalign.spacebetween);
}
.width('100%')
.alignitems(horizontalalign.start)
.padding(0, 0, 0, 8);
}
.width('100%')
.height('auto')
.padding(16)
.backgroundcolor('#ffffff')
.borderradius(12)
.onclick(() => {
router.pushurl({ url: 'pages/productdetailpage' });
});
}
}
4. 底部导航栏组件
⌨️ entry/src/main/ets/components/tabbarcomponent.ets
import { tabbarmodel } from '../models/homemodel';
import router from '@ohos.router';
@component
export struct tabbarcomponent {
@prop data: array<tabbarmodel> = [];
@prop selectedindex: number = 0;
build() {
row({ space: 0 }) {
foreach(this.data, (item: tabbarmodel, index: number) => {
column({ space: 4 }) {
image(index === this.selectedindex ? item.selectediconurl : item.iconurl)
.width(24)
.height(24)
.objectfit(imagefit.contain);
text(item.name)
.fontsize(12)
.textcolor(index === this.selectedindex ? '#007dff' : '#666666');
}
.width('25%')
.height('100%')
.justifycontent(flexalign.center)
.onclick(() => {
router.pushurl({ url: item.pageurl });
});
}, (item: tabbarmodel) => item.id.tostring());
}
.width('100%')
.height(56)
.backgroundcolor('#ffffff')
.borderradius(16, 16, 0, 0)
.padding(0, 8, 0, 8);
}
}
2.5 🔧 首页页面实现
⌨️ entry/src/main/ets/pages/index.ets（替换默认代码）
import { bannercomponent } from '../components/bannercomponent';
import { categorycomponent } from '../components/categorycomponent';
import { goodslistcomponent } from '../components/goodslistcomponent';
import { tabbarcomponent } from '../components/tabbarcomponent';
import { bannerdata, categorydata, goodsdata, tabbardata } from '../models/homedata';
@entry
@component
struct index {
@state selectedindex: number = 0;
build() {
column({ space: 0 }) {
// 页面内容
scroll() {
column({ space: 24 }) {
// 轮播图
bannercomponent({ data: bannerdata });
// 分类导航
categorycomponent({ data: categorydata });
// 热门商品标题
text('热门商品')
.fontsize(18)
.fontweight(fontweight.bold)
.textcolor('#000000')
.width('100%')
.padding(0, 0, 0, 16);
// 商品列表
goodslistcomponent({ data: goodsdata });
}
.width('100%')
.padding(20);
}
.width('100%')
.height('100%')
.layoutweight(1);
// 底部导航栏
tabbarcomponent({
data: tabbardata,
selectedindex: this.selectedindex
});
}
.width('100%')
.height('100%')
.backgroundcolor('#f5f5f5');
}
}
三、 组件交互效果优化 🎬
3.1 悬停动画
为商品列表组件添加悬停动画，提升用户体验：
⌨️ entry/src/main/ets/components/goodslistcomponent.ets（修改goodsitemcomponent）
@component
struct goodsitemcomponent {
@prop goods: goodsmodel;
@state ishover: boolean = false;
build() {
column({ space: 12 }) {
// 商品图片
image(this.goods.imageurl)
.width('100%')
.height(200)
.objectfit(imagefit.cover)
.borderradius(12)
.scale({ x: this.ishover ? 1.05 : 1, y: this.ishover ? 1.05 : 1 })
.transition({ duration: 300, curve: curve.easeout });
// 商品信息
// ...
}
.width('100%')
.height('auto')
.padding(16)
.backgroundcolor('#ffffff')
.borderradius(12)
.onclick(() => {
router.pushurl({ url: 'pages/productdetailpage' });
})
.onhover(() => {
this.ishover = true;
})
.onhoverend(() => {
this.ishover = false;
});
}
}
3.2 点击动画
为按钮组件添加点击动画，反馈用户操作：
⌨️ entry/src/main/ets/components/goodslistcomponent.ets（添加立即购买按钮）
@component
struct goodsitemcomponent {
@prop goods: goodsmodel;
@state ishover: boolean = false;
@state ispressed: boolean = false;
build() {
column({ space: 12 }) {
// 商品图片
// ...
// 商品信息
column({ space: 8 }) {
// 商品名称
// ...
// 价格与销量
// ...
// 立即购买按钮
button('立即购买')
.width('100%')
.height(48)
.backgroundcolor('#007dff')
.onclick(() => {
console.log('点击了立即购买按钮');
})
.onpress(() => {
this.ispressed = true;
})
.onpressend(() => {
this.ispressed = false;
})
.scale({ x: this.ispressed ? 0.95 : 1, y: this.ispressed ? 0.95 : 1 })
.transition({ duration: 100, curve: curve.easeout });
}
.width('100%')
.alignitems(horizontalalign.start)
.padding(0, 0, 0, 8);
}
.width('100%')
.height('auto')
.padding(16)
.backgroundcolor('#ffffff')
.borderradius(12)
.onclick(() => {
router.pushurl({ url: 'pages/productdetailpage' });
})
.onhover(() => {
this.ishover = true;
})
.onhoverend(() => {
this.ishover = false;
});
}
}
四、 项目运行与效果验证 📱
4.1 图片资源准备
在「entry/src/main/resources/base/media」目录下添加以下图片资源（图片格式为.png，尺寸符合要求）：
banner1.png、banner2.png、banner3.png（轮播图）；category1.png、category2.png、category3.png、category4.png、category5.png、category6.png（分类导航）；goods1.png、goods2.png、goods3.png、goods4.png、goods5.png（商品列表）；tab1.png、tab1_selected.png、tab2.png、tab2_selected.png、tab3.png、tab3_selected.png、tab4.png、tab4_selected.png（底部导航栏）。
4.2 🔧 项目运行
① 在deveco studio中点击「run」按钮；
② 选择调试设备，点击「ok」；
③ 等待编译安装完成，应用会自动在设备上启动。
效果验证
✅ 轮播图：自动轮播促销活动，点击可跳转；
✅ 分类导航：显示6个商品分类，点击可跳转；
✅ 商品列表：显示5个热门商品，悬停有动画效果；
✅ 底部导航栏：实现4个页面的切换；
✅ 响应式布局：自动适配不同设备尺寸。
五、 总结与未来学习路径 🚀
5.1 总结
本文完成：
- 对arkui组件库分类与核心特性的理解；
- 15个常用arkui组件的实战应用；
- 一个完整的电商首页组件的创建；
- 组件交互效果的优化（悬停、点击动画）。
到此这篇关于鸿蒙harmonyos中的arkui组件库特性与常用组件实例演示的文章就介绍到这了,更多相关鸿蒙harmonyos的arkui组件库内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
赞 (0)
您想发表意见！！点此发布评论
发表评论