梁山網(wǎng)站開發(fā),長沙網(wǎng)站建設(shè)流程,網(wǎng)站刪除關(guān)鍵詞,推廣關(guān)鍵詞怎么設(shè)置視頻演示地址#xff1a; https://www.bilibili.com/video/BV1jomdBBE4H/ #x1f4cb; 目錄 概述特性快速開始API 參考使用示例主題配置最佳實(shí)踐常見問題總結(jié) 概述 ButtonGroup 是控件庫中的按鈕組組件#xff0c;將多個(gè)按鈕組合在一起#xff0c;支持單選和多選兩種…視頻演示地址https://www.bilibili.com/video/BV1jomdBBE4H/ 目錄概述特性快速開始API 參考使用示例主題配置最佳實(shí)踐常見問題總結(jié)概述ButtonGroup是控件庫中的按鈕組組件將多個(gè)按鈕組合在一起支持單選和多選兩種模式適用于選項(xiàng)選擇、篩選、狀態(tài)切換等場景。設(shè)計(jì)理念按鈕組采用統(tǒng)一視覺設(shè)計(jì)具有以下特點(diǎn)組合設(shè)計(jì)多個(gè)按鈕無縫連接形成統(tǒng)一的視覺整體模式靈活支持單選single和多選multiple兩種模式尺寸多樣支持 small、medium、large 三種尺寸狀態(tài)清晰選中狀態(tài)使用主色背景未選中狀態(tài)使用次要背景品牌標(biāo)識左下角自動(dòng)包含品牌標(biāo)識圓圈紅字PC主題統(tǒng)一所有樣式配置都在代碼中方便定制適用場景篩選條件時(shí)間篩選、狀態(tài)篩選、類型篩選選項(xiàng)選擇單選選項(xiàng)、多選選項(xiàng)狀態(tài)切換啟用/禁用、顯示/隱藏標(biāo)簽選擇分類標(biāo)簽、屬性標(biāo)簽特性? 核心特性?單選模式支持單選模式只能選擇一個(gè)選項(xiàng)?多選模式支持多選模式可以選擇多個(gè)選項(xiàng)?圖標(biāo)支持支持文字圖標(biāo)textIcon和圖片圖標(biāo)icon?多種尺寸支持 small、medium、large 三種尺寸?禁用狀態(tài)支持整體禁用和單項(xiàng)禁用?品牌標(biāo)識自動(dòng)包含左下角品牌標(biāo)識?主題配置所有樣式都可通過代碼配置 視覺特點(diǎn)選中狀態(tài)主色背景 白色文字未選中狀態(tài)次要背景 主色文字禁用狀態(tài)灰色背景 灰色文字 50% 透明度無縫連接按鈕之間無縫連接形成統(tǒng)一整體圓角設(shè)計(jì)整體使用圓角內(nèi)部按鈕無圓角快速開始基礎(chǔ)用法import{ButtonGroup,ButtonGroupItem}from../components/baseEntry Component struct MyPage{State selectedValue:string|numberoption1privateitems:ButtonGroupItem[][{label:選項(xiàng)1,value:option1},{label:選項(xiàng)2,value:option2},{label:選項(xiàng)3,value:option3}]build(){Column({space:20}){// 單選模式ButtonGroup({items:this.items,mode:single})// 多選模式ButtonGroup({items:this.items,mode:multiple})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}關(guān)于狀態(tài)管理ButtonGroup使用內(nèi)部狀態(tài)管理選中值。如果需要外部控制選中值可以通過監(jiān)聽點(diǎn)擊事件或使用狀態(tài)管理來實(shí)現(xiàn)。API 參考Props屬性名類型默認(rèn)值說明itemsButtonGroupItem[][]按鈕項(xiàng)列表必需modesingle | multiplesingle選擇模式單選或多選buttonSizesmall | medium | largemedium按鈕尺寸showBrandbooleantrue是否顯示品牌標(biāo)識disabledbooleanfalse是否禁用整個(gè)按鈕組ButtonGroupItem 接口屬性名類型默認(rèn)值說明labelstring-按鈕文字必需valuestring | number-按鈕值必需disabledboolean?undefined是否禁用該項(xiàng)iconResourceStr?undefined圖片圖標(biāo)可選textIconstring?undefined文字圖標(biāo)可選優(yōu)先級高于 icon尺寸規(guī)格尺寸按鈕高度字體大小圖標(biāo)大小內(nèi)邊距small28vp12vp14vp12vp左右medium36vp14vp16vp16vp左右large44vp16vp20vp20vp左右使用示例1. 基礎(chǔ)單選按鈕組Entry Component struct ButtonGroupExample1{privateitems:ButtonGroupItem[][{label:選項(xiàng)1,value:option1},{label:選項(xiàng)2,value:option2},{label:選項(xiàng)3,value:option3}]build(){Column({space:15}){ButtonGroup({items:this.items,mode:single})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}2. 多選按鈕組Entry Component struct ButtonGroupExample2{privateitems:ButtonGroupItem[][{label:選項(xiàng)1,value:option1},{label:選項(xiàng)2,value:option2},{label:選項(xiàng)3,value:option3}]build(){Column({space:15}){ButtonGroup({items:this.items,mode:multiple})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}3. 帶圖標(biāo)的按鈕組Entry Component struct ButtonGroupExample3{privateitems:ButtonGroupItem[][{label:全部,value:all,textIcon:A},{label:待處理,value:pending,textIcon:P},{label:已完成,value:completed,textIcon:√}]build(){Column({space:15}){ButtonGroup({items:this.items,mode:single})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}4. 不同尺寸Entry Component struct ButtonGroupExample4{privateitems:ButtonGroupItem[][{label:小,value:small},{label:中,value:medium},{label:大,value:large}]build(){Column({space:20}){ButtonGroup({items:this.items,mode:single,buttonSize:small})ButtonGroup({items:this.items,mode:single,buttonSize:medium})ButtonGroup({items:this.items,mode:single,buttonSize:large})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}5. 禁用狀態(tài)Entry Component struct ButtonGroupExample5{privateitems:ButtonGroupItem[][{label:可用,value:available},{label:不可用,value:unavailable,disabled:true},{label:維護(hù)中,value:maintenance}]build(){Column({space:20}){// 整個(gè)按鈕組禁用ButtonGroup({items:this.items,mode:single,disabled:true})Divider().margin({top:20,bottom:20})// 部分按鈕禁用ButtonGroup({items:this.items,mode:single})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}6. 篩選場景Entry Component struct FilterExample{build(){Column({space:20}){// 時(shí)間篩選Column({space:10}){Text(時(shí)間篩選).fontSize(16).fontColor(#111827).width(100%)ButtonGroup({items:[{label:全部,value:all},{label:今天,value:today},{label:本周,value:week},{label:本月,value:month}],mode:single,buttonSize:medium})}.width(100%)}.width(100%).height(100%).padding(20)}}7. 狀態(tài)選擇場景Entry Component struct StatusExample{build(){Column({space:20}){// 訂單狀態(tài)多選Column({space:10}){Text(訂單狀態(tài)多選).fontSize(16).fontColor(#111827).width(100%)ButtonGroup({items:[{label:待付款,value:unpaid,textIcon:P},{label:待發(fā)貨,value:unshipped,textIcon:S},{label:已發(fā)貨,value:shipped,textIcon:√},{label:已完成,value:completed,textIcon:C}],mode:multiple,buttonSize:medium})}.width(100%)}.width(100%).height(100%).padding(20)}}主題配置ButtonGroup 的所有樣式都通過ComponentTheme配置所有配置都在代碼中不依賴JSON文件。修改默認(rèn)顏色import{ComponentTheme}from../theme/ComponentTheme// 修改主色影響選中狀態(tài)的背景色ComponentTheme.PRIMARY_COLOR#007AFF// 修改次要背景色影響未選中狀態(tài)的背景色ComponentTheme.BACKGROUND_SECONDARY#F5F5F5// 修改邊框顏色ComponentTheme.BORDER_COLOR#E5E5E5// 修改圓角ComponentTheme.BORDER_RADIUS8批量配置import{ComponentTheme}from../theme/ComponentTheme// 使用 setTheme 方法批量配置ComponentTheme.setTheme({primaryColor:#007AFF,borderRadius:8,spacing:16})最佳實(shí)踐1. 模式選擇推薦根據(jù)使用場景選擇模式單選模式single用于互斥選項(xiàng)如時(shí)間篩選、狀態(tài)切換多選模式multiple用于可多選的選項(xiàng)如標(biāo)簽選擇、屬性篩選2. 尺寸選擇small用于緊湊空間、工具欄medium默認(rèn)尺寸適用于大多數(shù)場景l(fā)arge用于重要操作或大屏幕顯示3. 選項(xiàng)數(shù)量建議選項(xiàng)數(shù)量在 2-5 個(gè)之間選項(xiàng)過多時(shí)考慮使用下拉菜單或其他組件選項(xiàng)文字保持簡潔避免過長4. 圖標(biāo)使用使用文字圖標(biāo)textIcon確保兼容性圖標(biāo)應(yīng)與文字含義相關(guān)保持圖標(biāo)風(fēng)格統(tǒng)一5. 禁用狀態(tài)使用整體禁用disabled控制整個(gè)按鈕組使用單項(xiàng)禁用item.disabled控制單個(gè)選項(xiàng)禁用狀態(tài)應(yīng)清晰可見6. 響應(yīng)式設(shè)計(jì)在小屏幕上考慮使用 smaller 尺寸保持按鈕之間的合理間距確保觸摸目標(biāo)足夠大至少 28vp常見問題Q1: ButtonGroup 和其他按鈕有什么區(qū)別A: 主要區(qū)別在于使用場景PrimaryButton/SecondaryButton/TextButton/IconButton單個(gè)按鈕用于操作ButtonGroup多個(gè)按鈕組合用于選項(xiàng)選擇、篩選ButtonGroup 更適合需要從多個(gè)選項(xiàng)中選擇的場景。Q2: 什么時(shí)候使用單選什么時(shí)候使用多選A: 根據(jù)業(yè)務(wù)需求選擇單選模式single選項(xiàng)互斥只能選擇一個(gè)如時(shí)間篩選、狀態(tài)切換多選模式multiple選項(xiàng)不互斥可以選擇多個(gè)如標(biāo)簽選擇、屬性篩選Q3: 如何獲取選中的值A(chǔ):ButtonGroup使用內(nèi)部狀態(tài)管理。如果需要外部獲取選中值可以通過以下方式監(jiān)聽點(diǎn)擊事件在按鈕點(diǎn)擊時(shí)獲取值狀態(tài)管理使用全局狀態(tài)管理如 Redux、MobX自定義事件創(chuàng)建自定義事件系統(tǒng)Q4: 可以動(dòng)態(tài)更新選項(xiàng)嗎A: 可以。通過更新items數(shù)組來動(dòng)態(tài)更新選項(xiàng)State items:ButtonGroupItem[][{label:選項(xiàng)1,value:option1}]// 動(dòng)態(tài)添加選項(xiàng)this.items.push({label:選項(xiàng)2,value:option2})this.items[...this.items]// 觸發(fā)更新Q5: 如何自定義按鈕樣式A: 可以通過ComponentTheme自定義全局樣式ComponentTheme.PRIMARY_COLOR#34C759// 選中狀態(tài)背景色ComponentTheme.BACKGROUND_SECONDARY#F0F0F0// 未選中狀態(tài)背景色ComponentTheme.BORDER_RADIUS12// 圓角大小Q6: 按鈕組可以垂直排列嗎A: 當(dāng)前版本支持水平排列。如果需要垂直排列可以使用多個(gè)ButtonGroup垂直排列自定義實(shí)現(xiàn)垂直布局的按鈕組總結(jié)ButtonGroup 是控件庫中的按鈕組組件具有以下核心特性組合設(shè)計(jì)多個(gè)按鈕無縫連接形成統(tǒng)一整體模式靈活支持單選和多選兩種模式尺寸多樣三種尺寸滿足不同場景需求功能完整支持圖標(biāo)、禁用等多種功能易于使用簡單的 API開箱即用主題配置所有樣式都可通過代碼配置品牌標(biāo)識自動(dòng)包含品牌標(biāo)識保持視覺統(tǒng)一關(guān)鍵要點(diǎn)? 使用mode屬性選擇單選或多選模式? 使用buttonSize屬性選擇合適尺寸? 使用items屬性配置按鈕項(xiàng)? 使用disabled屬性控制按鈕組狀態(tài)? 使用textIcon或icon添加圖標(biāo)? 通過ComponentTheme自定義全局樣式適用場景篩選條件選擇選項(xiàng)選擇狀態(tài)切換標(biāo)簽選擇屬性篩選下一篇預(yù)告TextInput文本輸入框詳解本文檔屬于《鴻蒙PC UI控件庫開發(fā)系列文章》第6篇