?2.0控件-按鈕

?2.1.控件-文本框

        Text(this.message).fontSize(40) // 設置文本的文字大小.fontWeight(FontWeight.Bolder) // 設置文本的粗細.fontColor(Color.Red) // 設置文本的顏色-------------------------------------------------------------------------
//設置邊框Text('待完善').fontColor(Color.Red).padding(5).border({width: 1, // 寬度（必須）color: Color.Red, // 顏色style: BorderStyle.Dashed // 樣式(實線、虛線、點線)}).margin({ bottom: 20 })
-------------------------------------------------------------------------
//設置單邊框Text('單邊框').padding(5)// 單邊框，可以通過 left right bottom top 配置四個方向邊框.border({width: { left: 1, right: 2 },color: { left: Color.Red, right: Color.Green },style: {left: BorderStyle.Dashed,right: BorderStyle.Dotted}})
---------------------------------------------------------------------// 添加圓角：// 1. .borderRadius(數值) 四個角圓角相同// 2. .borderRadius({ 方位詞: 值 }) 單獨給某個角設置圓角Text('添加圓角').width(100).height(60).backgroundColor(Color.Orange)// .borderRadius(15) // 通過不同數值，可以設置不同大小的圓角// .borderRadius({//   topLeft: 10,//   topRight: 20,//   bottomRight: 30,//   bottomLeft: 40// }).borderRadius({topLeft: 20,bottomRight: 20})
---------------------------------------------------------------------
//添加背景圖片
Text('我是內容文本').fontColor(Color.White).width(300).height(200).backgroundColor(Color.Pink)// backgroundImage(加載的背景圖片, 是否平鋪ImageRepeat枚舉).backgroundImage($r('app.media.flower'), ImageRepeat.XY )
--------------------------------------------------------------------
//設置背景圖片的位置// backgroundImagePosition// 1. 傳入對象, 設置位置坐標，背景圖片的左頂點//    { x: 坐標值, y: 坐標值 }//    注意：坐標值的單位，和寬高的默認單位不同的，顯示出來大小會不同//// 2. Alignment 枚舉，設置一些特殊的位置（中央、左頂點...）//    Center  TopStart左頂點 TopEnd右頂點 BottomEnd右下...Column() {Text().width(300).height(200).backgroundColor(Color.Pink).backgroundImage($r('app.media.flower')).backgroundImagePosition({x: 400,y: 300}).backgroundImagePosition(Alignment.BottomEnd)}.padding(20)}
------------------------------------------------------
//設置圖片位置vp轉pxText().width('300vp').height('200vp').backgroundColor(Color.Pink).backgroundImage($r('app.media.flower')).backgroundImagePosition({x: vp2px(150),y: vp2px(100)})
---------------------------------------------------------
//設置背景圖是否縮放Text().width(330).height(200).backgroundColor(Color.Pink).backgroundImage($r('app.media.jd_bg')).backgroundImagePosition(Alignment.Center).backgroundImageSize(ImageSize.Cover)// 1. 直接寫 寬高尺寸 對象// .backgroundImageSize({//   width: 150,//   // height: 100// })// 2. 設置 背景尺寸 的枚舉 ImageSize// (1) Contain: 等比例縮放，展示整張圖片，可能會留白// (2) Cover: 等比例縮放，讓圖片鋪滿整個容器，不會留白，但是有可能會有部分內容顯示不全

2.2 控件-行和列

//列   Column() {}.width('100%').height('100%').backgroundColor('#ffe8eeee')//行Row() {}.justifyContent(FlexAlign.SpaceEvenly).width('90%').height(30).onClick(() => {router.pushUrl({url: "pages/LanguageChoice"})})
-------------------------------------------------------------------// 控制組件間的距離，可以給 Column 設置 { space: 間隙大小 }Column({ space: 15 }) {}---------------------------------------------------------------
// 設置排布主方向的對齊方式（主軸）// 1. Start  （排布主方向）主軸起始位置對齊// 2. Center  主軸居中對齊// 3. End     主軸結束位置對齊// 4. SpaceBetween 貼邊顯示，中間的元素均勻分布間隙// 5. SpaceAround 間隙環繞  0.5  1  1  1  0.5 的間隙分布，靠邊只有一半的間隙// 6. SpaceEvenly 間隙均勻環繞，靠邊也是完整的一份間隙// justifyContent(枚舉FlexAlign)  ctrl+p  cmd+p// .justifyContent(FlexAlign.Center)// .justifyContent(FlexAlign.SpaceBetween)// .justifyContent(FlexAlign.SpaceAround).justifyContent(FlexAlign.SpaceEvenly)

2.3控件-輸入框

   TextInput({placeholder: '請輸入密碼'}).type(InputType.Password)

2.4控件控制-權重

// // layoutWeight 自適應伸縮: 按照[份數權重]，分配[剩余空間]Text('左側').layoutWeight(1).height(40).backgroundColor(Color.Pink)Text('右側固定').width(80).height(40).backgroundColor(Color.Orange)

2.5控件-圖片顯示

      Image($r('app.media.ic_like')).width(12).fillColor('#999')
----------------------------------------------Image($r('app.media.position_earphone')).width(20).backgroundColor('#55b7f4').borderRadius(10).padding(3).fillColor(Color.White).margin({ left: 6, right: 6 })

2.6控件-角標

      Badge({count: 1,position: BadgePosition.RightTop,style: {fontSize: 14,badgeSize: 20,badgeColor: '#fa2a2d'}}) {Image($r('app.media.bg_01')).width(100)}

2.7 控件-絕對定位

 // position絕對定位：可以控制組件位置，可以實現層疊效果// 語法：// .position({//   x: 50,//   y: 50// })// 特點：// 1. 相對于父組件左頂點進行偏移（調整位置）// 2. 原本的位置不占了，且可以任意調整位置，不影響其他元素// 后面的組件明顯層次更高，會蓋住前面的組件// 需求：不動結構的情況下，調整組件的層級 .zIndex(數字)Column() {Text('大兒子').width(80).height(80).backgroundColor(Color.Green).zIndex(3)Text('二兒子定位').width(80).height(80).backgroundColor(Color.Yellow).position({x: 50,y: 50}).zIndex(4)Text('三兒子').width(80).height(80).backgroundColor(Color.Orange).zIndex(2)}.width(300).height(300).backgroundColor(Color.Pink)

2.8 控件-AlertDialog

  AlertDialog.show({message: '最小值為1, 不能再減了'})

?2.9 控件設置-設置字符串，顏色，圖片等

//設置文字
$r('app.string.EntryAbility_label')
//設置顏色
$r('app.color.main_text')

2.10 控件-Swiper

  // Swiper 輪播組件的基本使用// 1. Swiper 包內容// 2. Swiper 設尺寸Swiper() {Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}.width('100%').height(150).loop(true) // 開啟循環.autoPlay(true) // 自動播放.interval(5000) // 自動播放間隔.vertical(true) // 縱向---------------------------定制小圓點--------------------------------// Swiper 輪播組件的基本使用// 1. Swiper 包內容// 2. Swiper 設尺寸Swiper() {Text('1').backgroundColor(Color.Orange)Text('2').backgroundColor(Color.Yellow)Text('3').backgroundColor(Color.Brown)}.width('100%').height(200)// 常用屬性.loop(true) // 開啟循環.autoPlay(true) // 自動播放.interval(5000) // 自動播放間隔.vertical(false) // 橫向/縱向// 定制小圓點// .indicator(false).indicator(Indicator.dot().itemWidth(20).itemHeight(20).color(Color.Black).selectedItemWidth(25).selectedItemHeight(25).selectedColor(Color.White))---------------------輪播案例------------------------// 1. Swiper輪播容器 (填入內容)Swiper() {Image($r('app.media.1')).objectFit(ImageFit.Cover)Image($r('app.media.2')).objectFit(ImageFit.Cover)Image($r('app.media.3')).objectFit(ImageFit.Cover)Image($r('app.media.4')).objectFit(ImageFit.Cover)Image($r('app.media.5')).objectFit(ImageFit.Cover)}// 2. 設置尺寸.width('100%').height('100%')// 3. 定制方向和小圓點.vertical(true) // 縱向輪播.indicator(Indicator.dot() // 小圓點樣式.color(Color.White).selectedColor(Color.Orange))

2.11控件-Scroll

   // 如果希望內容溢出, 能夠滾動Scroll() {Column({ space: 10 }) {ForEach(Array.from({ length: 10 }), (item: string, index) => {Text('測試文本' + (index + 1)).width('100%').height(100).textAlign(TextAlign.Center).backgroundColor(Color.Orange).fontSize(20).fontColor(Color.White).borderRadius(10)})}.padding(10).width('100%')}.width('100%').height(400).scrollable(ScrollDirection.Vertical)-------------------------------常用屬性----------------------------------// 如果希望內容溢出, 能夠滾動Scroll() {Column({ space: 10 }) {ForEach(Array.from({ length: 10 }), (item: string, index) => {Text('測試文本' + (index + 1)).width('100%').height(100).textAlign(TextAlign.Center).backgroundColor(Color.Orange).fontSize(20).fontColor(Color.White).borderRadius(10)})}.padding(10).width('100%')}.width('100%').height(400).scrollable(ScrollDirection.Vertical) // 設置滾動方向.scrollBar(BarState.Auto) // On一直顯示 Off一直隱藏 Auto滑動顯示.scrollBarColor(Color.Blue) // 滾動條顏色.scrollBarWidth(5) // 滾動條寬度.edgeEffect(EdgeEffect.Spring) // 滑動效果.onScroll((x, y) => {console.log('已經滑動的距離:', this.myScroll.currentOffset().yOffset)})
----------------------------控制器------------------------------------
Button('控制滾動條位置').margin(20).onClick(() => {
//劃到某位置this.myScroll.scrollEdge(Edge.End)})Button('獲取已經滾動的距離').onClick(() => {//當前滑動的位置const y = this.myScroll.currentOffset().yOffsetAlertDialog.show({message: `y: ${y}`})})

2.12 控件-Tabs

?

//基礎用法    
Tabs() {TabContent() {Text('首頁內容') // 有且只能一個子組件}.tabBar('首頁') // 配置導航TabContent() {Text('推薦內容') // 有且只能一個子組件}.tabBar('推薦')TabContent() {Text('發現內容') // 有且只能一個子組件}.tabBar('發現')TabContent() {Text('我的內容') // 有且只能一個子組件}.tabBar('我的')}-----------------------------常用屬性---------------------------Tabs({ barPosition: BarPosition.Start }) {TabContent() {Text('首頁內容') // 有且只能一個子組件}.tabBar('首頁') // 配置導航TabContent() {Text('推薦內容') // 有且只能一個子組件}.tabBar('推薦')TabContent() {Text('發現內容') // 有且只能一個子組件}.tabBar('發現')TabContent() {Text('我的內容') // 有且只能一個子組件}.tabBar('我的')}.vertical(false) // 調整導航水平或垂直.scrollable(false) // 是否開啟手勢滑動.animationDuration(0) // 點擊滑動的動畫時間
----------------------------基礎導航欄-----------------------------
@Entry
@Component
struct Index {// 準備狀態, 存儲激活的索引@State selectedIndex: number = 0@BuildermyBuilder (itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {// 如果激活的是自己, 圖片/文本 都需要調整樣式 → 需要區分不同的 tabBarColumn() {Image(itemIndex == this.selectedIndex ? selImg : img).width(30)Text(title).fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)}}build() {Tabs({ barPosition: BarPosition.End }) {TabContent() {Text('購物車內容')}.tabBar(this.myBuilder(0, '購物車', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))TabContent() {Text('我的內容')}.tabBar(this.myBuilder(1, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))}.onChange((index: number) => {// console.log('激活的索引', index)this.selectedIndex = index}).animationDuration(0).scrollable(false)}
}
-----------------------小米中間有個圖片導航欄---------------------------------
@Entry
@Component
struct Index {// 準備狀態, 存儲激活的索引@State selectedIndex: number = 0@BuildermyBuilder (itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {// 如果激活的是自己, 圖片/文本 都需要調整樣式 → 需要區分不同的 tabBarColumn() {Image(itemIndex == this.selectedIndex ? selImg : img).width(30)Text(title).fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)}}@BuildercenterBuilder () {Image($r('app.media.ic_reuse_02')).width(40).margin({ bottom: 10 })}build() {Tabs({ barPosition: BarPosition.End }) {TabContent() {Text('首頁內容')}.tabBar(this.myBuilder(0, '首頁', $r('app.media.ic_tabbar_icon_0'), $r('app.media.ic_tabbar_icon_0_selected')))TabContent() {Text('分類內容')}.tabBar(this.myBuilder(1, '分類', $r('app.media.ic_tabbar_icon_1'), $r('app.media.ic_tabbar_icon_1_selected')))// 特殊形狀的TabTabContent() {Text('活動內容')}.tabBar(this.centerBuilder())TabContent() {Text('購物車內容')}.tabBar(this.myBuilder(3, '購物車', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))TabContent() {Text('我的內容')}.tabBar(this.myBuilder(4, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))}.onChange((index: number) => {// console.log('激活的索引', index)this.selectedIndex = index}).animationDuration(0).scrollable(false)}
}

2.13控件-List

      // 中間List() {ForEach(Array.from({ length: 20 }), () => {ListItem() {Row(){}.width('100%').height(100).backgroundColor(Color.Brown)}.padding(10)})}.width('100%').layoutWeight(1) // 讓容器高度自適應.backgroundColor(Color.Orange).listDirection(Axis.Vertical) // 調整主軸方向(橫向縱向).lanes(3, 5) // 調整 列數 和 間距.alignListItem(ListItemAlign.Center) // 列對齊方式.scrollBar(BarState.Auto) // Auto按需自動顯示滾動條// .divider({//   strokeWidth: 3, // 線寬//   color: Color.Blue, // 顏色//   startMargin: 10, // 左邊線距離邊緣的間隙//   endMargin: 10 // 右邊線距離邊緣的間隙// })

2.14控件-Grid

// 1. 定義接口 (每個列表項的數據結構)
interface ImageCount {url: stringcount: number
}@Entry
@Component
struct Index {// 2. 基于接口, 準備數據@State images: ImageCount[] = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 1 },{ url: 'app.media.bg_02', count: 2 },{ url: 'app.media.bg_03', count: 3 },{ url: 'app.media.bg_04', count: 4 },{ url: 'app.media.bg_05', count: 5 }]build() {Column() {Grid() {ForEach(this.images, (item: ImageCount, index: number) => {GridItem() {Badge({count: item.count,position: BadgePosition.RightTop,style: {fontSize: 14,badgeSize: 20,badgeColor: '#fa2a2d'}}) {Image($r(item.url)).width(80)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({ top: 100 })Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({ top: 50 })}}
}

2.14控件-Video

2.15控件-彈窗

2.16控件-web瀏覽器

3.3點擊事件

     Button('點我,顯示對話框').onClick(() => {// console.log('消息:', '你好點擊事件')// 彈個框AlertDialog.show({message: '你好~ 這是個彈框'})})