鴻蒙HarmonyOS中的ArkUI組件庫(kù)特性與常用組件實(shí)例演示
更新時(shí)間：2026年01月31日 15:18:19 作者：星辰徐哥
本文介紹了HarmonyOS的ArkUI組件庫(kù)及其核心特性,詳細(xì)講解了15個(gè)常用組件的使用方法,并通過(guò)創(chuàng)建一個(gè)電商首頁(yè)組件展示了組件的布局和交互效果優(yōu)化,文章還提供了項(xiàng)目運(yùn)行步驟和效果驗(yàn)證,幫助讀者掌握組件的開(kāi)發(fā)和優(yōu)化技巧
本文介紹了HarmonyOS的ArkUI組件庫(kù)及其核心特性,詳細(xì)講解了15個(gè)常用組件的使用方法,并通過(guò)創(chuàng)建一個(gè)電商首頁(yè)組件展示了組件的布局和交互效果優(yōu)化,文章還提供了項(xiàng)目運(yùn)行步驟和效果驗(yàn)證,幫助讀者掌握組件的開(kāi)發(fā)和優(yōu)化技巧。
學(xué)習(xí)目標(biāo)：
- 理解ArkUI組件的分類(lèi)與核心特性；
- 掌握15個(gè)常用ArkUI組件的用法（布局容器、文本、按鈕、輸入框、列表、網(wǎng)格等）；
- 實(shí)現(xiàn)一個(gè)電商首頁(yè)組件（包含輪播圖、分類(lèi)導(dǎo)航、商品列表、底部導(dǎo)航欄）；
- 優(yōu)化組件交互效果（懸停、點(diǎn)擊、滑動(dòng)動(dòng)畫(huà)）。
學(xué)習(xí)重點(diǎn)：
- 彈性布局（Flex）與網(wǎng)格布局（Grid）的深度應(yīng)用；
- 自定義組件與系統(tǒng)組件的結(jié)合使用；
- 響應(yīng)式布局的實(shí)現(xiàn)（適配不同設(shè)備尺寸）。
一、 ArkUI組件庫(kù)概述 ??
1.1 組件分類(lèi)
HarmonyOS Next的ArkUI組件庫(kù)分為基礎(chǔ)組件和高級(jí)組件：
| 分類(lèi) | 組件示例 |
|---|---|
| 基礎(chǔ)組件 | Text、Image、Button、Input、TextArea、Checkbox、Radio、Slider、Switch |
| 容器組件 | Column、Row、Flex、Grid、GridItem、List、ListItem、Stack |
| 高級(jí)組件 | Swiper（輪播圖）、TabContent（標(biāo)簽頁(yè)）、Carousel（卡片輪播）、WaterFlow（瀑布流） |
1.2 核心特性
- 聲明式UI：通過(guò)代碼描述UI結(jié)構(gòu)，編譯器自動(dòng)渲染；
- 數(shù)據(jù)驅(qū)動(dòng)：組件屬性與狀態(tài)數(shù)據(jù)綁定，數(shù)據(jù)變化自動(dòng)更新UI；
- 響應(yīng)式布局：自動(dòng)適配不同設(shè)備尺寸；
- 組件復(fù)用：支持自定義組件，提高代碼復(fù)用率；
- 高性能渲染：采用方舟編譯器編譯，渲染效率比傳統(tǒng)Web開(kāi)發(fā)高10-20倍。
二、 常用組件實(shí)戰(zhàn) ???
2.1 實(shí)戰(zhàn)目標(biāo)
基于第1篇的「MyFirstHarmonyApp」項(xiàng)目架構(gòu)，創(chuàng)建一個(gè)電商首頁(yè)組件，包含以下功能：
- 輪播圖（Swiper）：展示促銷(xiāo)活動(dòng)；
- 分類(lèi)導(dǎo)航（Grid）：顯示商品分類(lèi)；
- 商品列表（List）：展示熱門(mén)商品；
- 底部導(dǎo)航欄（TabBar）：實(shí)現(xiàn)頁(yè)面切換。
2.2 ?? 項(xiàng)目結(jié)構(gòu)調(diào)整
在「entry/src/main/ets」目錄下創(chuàng)建以下文件夾：
components：存放自定義組件；models：存放數(shù)據(jù)模型；utils：存放工具函數(shù)。
2.3 ?? 數(shù)據(jù)模型與工具函數(shù)
1. 數(shù)據(jù)模型
?? entry/src/main/ets/models/HomeModel.ets
// 輪播圖數(shù)據(jù)模型
export interface BannerModel {
id: number;
imageUrl: string;
linkUrl: string;
}
// 分類(lèi)導(dǎo)航數(shù)據(jù)模型
export interface CategoryModel {
id: number;
name: string;
iconUrl: string;
}
// 商品數(shù)據(jù)模型
export interface GoodsModel {
id: number;
name: string;
imageUrl: string;
price: number;
originalPrice: number;
sales: number;
}
// 底部導(dǎo)航欄數(shù)據(jù)模型
export interface TabBarModel {
id: number;
name: string;
iconUrl: string;
selectedIconUrl: string;
pageUrl: string;
}
2. 工具函數(shù)
?? entry/src/main/ets/utils/ImageUtils.ets
// 圖片加載工具函數(shù)
export function getImageUrl(imagePath: string): string {
return `$r('app.media.${imagePath}')`;
}
3. 模擬數(shù)據(jù)
?? entry/src/main/ets/models/HomeData.ets
import { BannerModel, CategoryModel, GoodsModel, TabBarModel } from './HomeModel';
import { getImageUrl } from '../utils/ImageUtils';
// 輪播圖模擬數(shù)據(jù)
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' }
];
// 分類(lèi)導(dǎo)航模擬數(shù)據(jù)
export const categoryData: Array<CategoryModel> = [
{ id: 1, name: '手機(jī)', 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') }
];
// 商品模擬數(shù)據(jù)
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 }
];
// 底部導(dǎo)航欄模擬數(shù)據(jù)
export const tabBarData: Array<TabBarModel> = [
{ id: 1, name: '首頁(yè)', iconUrl: getImageUrl('tab1'), selectedIconUrl: getImageUrl('tab1_selected'), pageUrl: 'pages/Index' },
{ id: 2, name: '分類(lèi)', iconUrl: getImageUrl('tab2'), selectedIconUrl: getImageUrl('tab2_selected'), pageUrl: 'pages/CategoryPage' },
{ id: 3, name: '購(gòu)物車(chē)', 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 ?? 自定義組件實(shí)現(xiàn)
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. 分類(lèi)導(dǎo)航組件
?? 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 });
// 價(jià)格與銷(xiāo)量
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. 底部導(dǎo)航欄組件
?? 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 ?? 首頁(yè)頁(yè)面實(shí)現(xiàn)
?? entry/src/main/ets/pages/Index.ets（替換默認(rèn)代碼）
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 }) {
// 頁(yè)面內(nèi)容
Scroll() {
Column({ space: 24 }) {
// 輪播圖
BannerComponent({ data: bannerData });
// 分類(lèi)導(dǎo)航
CategoryComponent({ data: categoryData });
// 熱門(mén)商品標(biāo)題
Text('熱門(mén)商品')
.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);
// 底部導(dǎo)航欄
TabBarComponent({
data: tabBarData,
selectedIndex: this.selectedIndex
});
}
.width('100%')
.height('100%')
.backgroundColor('#F5F5F5');
}
}
三、 組件交互效果優(yōu)化 ??
3.1 懸停動(dòng)畫(huà)
為商品列表組件添加懸停動(dòng)畫(huà)，提升用戶體驗(yàn)：
?? 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 點(diǎn)擊動(dòng)畫(huà)
為按鈕組件添加點(diǎn)擊動(dòng)畫(huà)，反饋用戶操作：
?? entry/src/main/ets/components/GoodsListComponent.ets（添加立即購(gòu)買(mǎi)按鈕）
@Component
struct GoodsItemComponent {
@Prop goods: GoodsModel;
@State isHover: boolean = false;
@State isPressed: boolean = false;
build() {
Column({ space: 12 }) {
// 商品圖片
// ...
// 商品信息
Column({ space: 8 }) {
// 商品名稱(chēng)
// ...
// 價(jià)格與銷(xiāo)量
// ...
// 立即購(gòu)買(mǎi)按鈕
Button('立即購(gòu)買(mǎi)')
.width('100%')
.height(48)
.backgroundColor('#007DFF')
.onClick(() => {
console.log('點(diǎn)擊了立即購(gòu)買(mǎi)按鈕');
})
.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;
});
}
}
四、 項(xiàng)目運(yùn)行與效果驗(yàn)證 ??
4.1 圖片資源準(zhǔn)備
在「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（分類(lèi)導(dǎo)航）；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（底部導(dǎo)航欄）。
4.2 ?? 項(xiàng)目運(yùn)行
① 在DevEco Studio中點(diǎn)擊「Run」按鈕；
② 選擇調(diào)試設(shè)備，點(diǎn)擊「OK」；
③ 等待編譯安裝完成，應(yīng)用會(huì)自動(dòng)在設(shè)備上啟動(dòng)。
效果驗(yàn)證
? 輪播圖：自動(dòng)輪播促銷(xiāo)活動(dòng)，點(diǎn)擊可跳轉(zhuǎn)；
? 分類(lèi)導(dǎo)航：顯示6個(gè)商品分類(lèi)，點(diǎn)擊可跳轉(zhuǎn)；
? 商品列表：顯示5個(gè)熱門(mén)商品，懸停有動(dòng)畫(huà)效果；
? 底部導(dǎo)航欄：實(shí)現(xiàn)4個(gè)頁(yè)面的切換；
? 響應(yīng)式布局：自動(dòng)適配不同設(shè)備尺寸。
五、 總結(jié)與未來(lái)學(xué)習(xí)路徑 ??
5.1 總結(jié)
本文完成：
- 對(duì)ArkUI組件庫(kù)分類(lèi)與核心特性的理解；
- 15個(gè)常用ArkUI組件的實(shí)戰(zhàn)應(yīng)用；
- 一個(gè)完整的電商首頁(yè)組件的創(chuàng)建；
- 組件交互效果的優(yōu)化（懸停、點(diǎn)擊動(dòng)畫(huà)）。
到此這篇關(guān)于鴻蒙HarmonyOS中的ArkUI組件庫(kù)特性與常用組件實(shí)例演示的文章就介紹到這了,更多相關(guān)鴻蒙HarmonyOS的ArkUI組件庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- 鴻蒙HarmonyOS開(kāi)發(fā):Navigation路由導(dǎo)航功能和實(shí)踐
- 鴻蒙(HarmonyOS)實(shí)現(xiàn)隱私政策彈窗效果
- DevEco Studio 2.0開(kāi)發(fā)鴻蒙HarmonyOS應(yīng)用初體驗(yàn)全面測(cè)評(píng)(推薦)
- 鴻蒙中@State的原理使用詳解(HarmonyOS 5)
- 鴻蒙HarmonyOS App開(kāi)發(fā)造輪子之自定義圓形圖片組件的實(shí)例代碼
- 淺析鴻蒙基礎(chǔ)之Permanent 持久性內(nèi)存對(duì)象(HarmonyOS鴻蒙開(kāi)發(fā)基礎(chǔ)知識(shí))
- 鴻蒙開(kāi)發(fā)之處理圖片位圖操作的方法詳解(HarmonyOS鴻蒙開(kāi)發(fā)基礎(chǔ)知識(shí))
- HarmonyOS開(kāi)發(fā)基礎(chǔ)知識(shí)之Component和ComponentContainer區(qū)別(鴻蒙教程)
- 鴻蒙開(kāi)發(fā)之Button按鈕類(lèi)型及如何通過(guò)代碼設(shè)置(HarmonyOS鴻蒙開(kāi)發(fā)基礎(chǔ)知識(shí))
- 鴻蒙HarmonyOS 分布式任務(wù)調(diào)度的實(shí)現(xiàn)
- 鴻蒙HarmonyOS剪切板的實(shí)現(xiàn)
- 鴻蒙HarmonyOS視頻播放的實(shí)現(xiàn)
- HarmonyOS鴻蒙基本控件的實(shí)現(xiàn)
- HarmonyOS鴻蒙實(shí)現(xiàn)HelloWorld應(yīng)用開(kāi)發(fā)E2E體驗(yàn)
- 鴻蒙游戲開(kāi)發(fā)實(shí)戰(zhàn)從0到1：手把手帶你搭建完整小游戲系統(tǒng)
相關(guān)文章
Android中Image的簡(jiǎn)單實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Android中Image的簡(jiǎn)單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Android Room數(shù)據(jù)庫(kù)容易遇到的問(wèn)題以及解決方法
這篇文章給大家介紹了我們?cè)贏ndroid Room數(shù)據(jù)庫(kù)容易遇到的坑以及解決方法,文中有詳細(xì)的代碼示例供我們參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Android編程內(nèi)存溢出與防范方法,較為詳細(xì)的分析了Android內(nèi)存溢出的常見(jiàn)原因與相應(yīng)的防范措施,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
Android獲取當(dāng)前應(yīng)用分配的最大內(nèi)存和目前使用內(nèi)存的方法
今天小編就為大家分享一篇關(guān)于Android獲取當(dāng)前應(yīng)用分配的最大內(nèi)存和目前使用內(nèi)存的方法，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了Android中Dialog自定義上下文花式菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Android實(shí)現(xiàn)保存圖片到本地并在相冊(cè)中顯示
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)保存圖片到本地并在相冊(cè)中顯示的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Android文本輸入框(EditText)輸入密碼時(shí)顯示與隱藏
這篇文章主要介紹了Android文本輸入框(EditText)輸入密碼時(shí)顯示與隱藏的方法和示例,需要的朋友可以參考下2014-12-12
Android實(shí)現(xiàn)recyclerview城市字母索引列表
大家好，本篇文章主要講的是Android實(shí)現(xiàn)recyclerview城市字母索引列表，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下2022-01-01
Android開(kāi)發(fā)騰訊驗(yàn)證碼遇到的坑
這篇文章主要介紹了Android開(kāi)發(fā)騰訊驗(yàn)證碼遇到的坑,需要的朋友可以參考下2017-12-12
Android屏蔽軟鍵盤(pán)并且顯示光標(biāo)的實(shí)例詳解
這篇文章主要介紹了Android屏蔽軟鍵盤(pán)并且顯示光標(biāo)的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10