效果圖:
示例代碼
// 使用 DevEco Studio 3.1.1 Release 及以上版本,API 版本為 api 9 及以上。
// 主要功能及注意事項:
// 該組件展示了一個乘客選擇列表。列表中的每個項目包含一個復選框和對應的乘客姓名,
// 用戶點擊任意一項即可切換其選中狀態。組件通過限制最多只能選擇5名乘客,
// 并在超過限制時通過promptAction模塊彈出 toast 提示用戶。
// 注意,代碼中的Checkbox組件目前設置為不可更改(enabled(false)),
// 在實際應用中可以根據需求決定是否允許用戶手動改變復選框狀態。
// 導入提示操作模塊
import promptAction from '@ohos.promptAction';
// 定義數據模型類ItemData
class ItemData {
// 名字屬性
name: string;
// 是否選中屬性
isSelect: boolean;
// 構造函數初始化數據
constructor(name: string, isSelect: boolean) {
this.name = name;
this.isSelect = isSelect;
}
}
// 標記為入口文件并創建組件
@Entry
@Component
struct test {
// 狀態變量arr用于存儲ItemData對象數組
@State arr: Array< ItemData > = [
new ItemData('趙大', false),
new ItemData('錢二', false),
new ItemData('張三', false),
new ItemData('李四', false),
new ItemData('王五', false),
new ItemData('周六', false),
new ItemData('李七', false),
new ItemData('朱八', false)
];
// 構建UI組件的方法
build() {
// 創建垂直方向布局
Column() {
// 顯示提示文本
Text('請選擇乘客,最多限五人')
.margin({ top: '60lpx', left: '50lpx', bottom: '10lpx' });
// 遍歷存儲乘客信息的數據數組
ForEach(this.arr, (item: ItemData, index: number) = > {
// 創建水平方向布局
Row() {
// 創建復選框組件,禁用修改(此處可能是樣式演示,實際應用中可去除.enabled(false))
Checkbox()
.enabled(false)
.select(item.isSelect)
.width('41lpx')
.height('41lpx')
.selectedColor("#FF53B175");
// 顯示乘客姓名文本
Text(item.name)
.fontSize('27lpx')
.margin({ left: '10lpx' })
.fontWeight(400)
.fontColor(item.isSelect ? "#FF53B175" : "#FF181725")
// 當行組件點擊事件處理
}
.onClick(() = > {
// 反轉當前項的選中狀態
item.isSelect = !item.isSelect;
// 計算已選中乘客數量
let isSelectCount = 0;
for (let i = 0; i < this.arr.length; i++) {
if (this.arr[i].isSelect) {
isSelectCount++;
}
}
// 如果已選中超過5人,則恢復當前項未選中狀態并彈出提示
if (isSelectCount > 5) {
item.isSelect = !item.isSelect;
try {
// 使用promptAction模塊顯示toast消息
promptAction.showToast({
message: '最多限五人',
duration: 2000,
bottom: '375lpx'
});
} catch (error) {
// 忽略錯誤
}
return;
}
// 更新數組中對應項的狀態
this.arr[index] = new ItemData(item.name, item.isSelect);
})
// 設置行組件的邊距
.margin({ left: '40lpx', top: '10lpx' })
})
} // 設置Column組件的整體樣式
.width('100%')
.height('100%')
.backgroundColor("#FFF2F3F2")
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start);
}
}
審核編輯 黃宇
鴻蒙OS開發 | 更多內容↓點擊 | HarmonyOS與OpenHarmony技術 |
---|---|---|
鴻蒙技術文檔 | 開發知識更新庫gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md 在這。 | 或+mau123789學習,是v喔 |
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。
舉報投訴
-
鴻蒙
+關注
關注
59文章
2532瀏覽量
43795 -
鴻蒙OS
+關注
關注
0文章
191瀏覽量
4886
發布評論請先 登錄
相關推薦
熱點推薦
鴻蒙5開發寶藏案例分享---一多開發實例(游戲)
?【開發者必看】鴻蒙隱藏寶箱大公開!這些實戰案例讓你的開發效率翻倍!
哈嘍各位開發者小伙伴!今天要和大家分享一個讓我拍大腿的發現——原來鴻蒙
發表于 06-03 18:22
鴻蒙5開發案例分享揭秘---一多開發實例(商務辦公)
?【鴻蒙開發寶藏案例大揭秘】原來官方文檔里藏了這么多好東西!
大家好呀~最近在肝鴻蒙項目時意外扒出了官方文檔里的\"藏寶庫\"!原來那些讓人頭禿的跨端適配難題,官方早就準備好
發表于 06-03 16:24
鴻蒙5開發寶藏案例分享---一多開發實例(地圖導航)
案例!最近在肝鴻蒙項目時意外發現了這個地圖導航的\"一多\"開發實例,簡直像發現新大陸!這就帶大家沉浸式體驗這個超實用的開發模板~
? 先劃重點:這個案例完美演示了如何用一套代碼搞定
發表于 06-03 16:17
鴻蒙5開發寶藏案例分享---一多開發實例(旅行訂票)
? 鴻蒙開發寶藏大發現!一多開發實戰案例解析(旅行訂票篇)
大家好!今天在翻鴻蒙開發者文檔時,意外發現了官方藏著一整片\"案例綠洲\"!尤其
發表于 06-03 16:16
鴻蒙5開發寶藏案例分享---一多開發實例(購物比價)
【鴻蒙開發寶藏案例大公開!】手把手教你用\"一多\"能力打造跨端購物比價App
小伙伴們好呀!今天要和大家分享一個鴻蒙開發的隱藏寶典——官方購物比價應用
發表于 06-03 16:07
鴻蒙5開發寶藏案例分享---一多開發實例(社區評論)
應用” 的一多開發實例,看完直呼“原來還能這樣玩?!” ? 必須整理出來和大家嘮嘮,順便帶大家手把手拆解幾個核心案例!
?** 一多開發是啥?一句話總結:**
一次開發,自動適配手機、
發表于 06-03 16:03
鴻蒙5開發寶藏案例分享---一多開發實例(長視頻)
【?鴻蒙開發寶藏案例大起底!原來官方藏了這么多干貨!】
大家好呀~最近在折騰鴻蒙應用開發的時候,意外發現了官方文檔里藏著一堆超實用的開發案例
發表于 06-03 15:58
DevEco Studio 聯合小藝接入 DeepSeek,步驟更簡單開發鴻蒙更專業
CodeGenie,在底部 Agents 中選擇 DeepSeek-R1(Beta),就可以直接開始使用 DeepSeek 的能力輔助開發原生鴻蒙應用了!
我們來結合鴻蒙原生應用
發表于 03-13 15:11
【「極速探索HarmonyOS NEXT 」閱讀體驗】 初印象:一本純血鴻蒙應用開發入門的好書
相關的知識;接著介紹了鴻蒙的開發語法,它選擇了ArkTS語法進行了一個簡單的說明,鴻蒙應用程序的框架選擇了UIAbility介紹了它的基本概
發表于 03-04 12:41
Flexus X 實例安裝 H5ai 目錄列表程序
在數字化的時代浪潮中,華為云以其卓越的技術實力和可靠的服務品質,成為眾多企業和開發者的首選。華為云 Flexus 云服務器 X 實例,作為新一代云服務器,更是以其柔性算力為中小企業和開發者帶來全新體驗。本次我將為大家展示在華為云

Flexus 云服務器 X 實例實踐:部署 Alist 文件列表程序
引言 在當今數字化時代,華為云以其卓越的技術實力和可靠的服務品質成為眾多企業和開發者的首選。華為云 Flexus 云服務器 X 實例作為新一代柔性算力云服務器,為我們部署 Alist 文件列表程序

鴻蒙原生開發手記:01-元服務開發
簡介
元服務是鴻蒙中的一種輕量應用形態,無需下載,直接運行。類似于微信小程序,但與小程序不同的是,元服務更加輕量。
元服務使用原生開發,是系統級提供的,無論從易用性、性能、體驗上,都要比小程序好
發表于 11-14 17:28
華為發布鴻蒙原生智能,OS深度融合AI,小藝升級為系統級智能體
6月21日,華為開發者大會(HDC 2024)于東莞松山湖舉行,會上,華為發布鴻蒙原生智能(Harmony Intelligence),并宣布HarmonyOS NEXT面向開發者和先鋒用戶開放

HDC2024華為發布鴻蒙原生智能:AI與OS深度融合,開啟全新的AI時代
6月21日,華為開發者大會2024(HDC.2024)召開。 HarmonyOS NEXT將AI與OS深度融合,構筑全新鴻蒙原生智能框架。大會現場,華為常務董事、終端BG董事長、智能汽車解決方案BU

評論