鸿蒙 APP 开发：ArkUI 组件库详解与常用组件实战

鸿蒙 APP 开发：ArkUI 组件库详解与常用组件实战 | 极客日志

分类	组件示例
基础组件	Text、Image、Button、Input、TextArea、Checkbox、Radio、Slider、Switch
容器组件	Column、Row、Flex、Grid、GridItem、List、ListItem、Stack
高级组件	Swiper（轮播图）、TabContent（标签页）、Carousel（卡片轮播）、WaterFlow（瀑布流）

// 轮播图数据模型
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;
}

// 图片加载工具函数
export function getImageUrl(imagePath: string): string {
  return `$r('app.media.${imagePath}')`;
}

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' }
];

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);
  }
}

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);
  }
}

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' });
    });
  }
}

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);
  }
}

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');
  }
}

@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;
    });
  }
}

@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;
    });
  }
}

鸿蒙 APP 开发：ArkUI 组件库详解与常用组件实战

ArkUI 组件库详解与常用组件实战

内容承接与核心价值

一、ArkUI 组件库概述

1.1 组件分类

1.2 核心特性

二、常用组件实战

2.1 实战目标

2.2 项目结构调整

2.3 数据模型与工具函数

1. 数据模型

2. 工具函数

3. 模拟数据

2.4 自定义组件实现

1. 轮播图组件

2. 分类导航组件

3. 商品列表组件

4. 底部导航栏组件

2.5 首页页面实现

三、组件交互效果优化

3.1 悬停动画

3.2 点击动画

四、项目运行与效果验证

4.1 图片资源准备

4.2 项目运行

效果验证

五、总结

更多推荐文章

相关免费在线工具

鸿蒙 APP 开发：ArkUI 组件库详解与常用组件实战

ArkUI 组件库详解与常用组件实战

内容承接与核心价值

一、ArkUI 组件库概述

1.1 组件分类

1.2 核心特性

二、常用组件实战

2.1 实战目标

2.2 项目结构调整

2.3 数据模型与工具函数

1. 数据模型

2. 工具函数

3. 模拟数据

2.4 自定义组件实现

1. 轮播图组件

2. 分类导航组件

3. 商品列表组件

4. 底部导航栏组件

2.5 首页页面实现

三、组件交互效果优化

3.1 悬停动画

3.2 点击动画

四、项目运行与效果验证

4.1 图片资源准备

4.2 项目运行

效果验证

五、总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具