網絡圖片
Image（‘https：//............）
本地圖片
你要把圖片放在指定的目錄里
main---->resources---->base---->media
Image($r('app.media.product))

6）給容器之間加間隔，可以下面這樣寫，這也是與html不一樣的地方，方便了很多

如何調整組件之間的距離？
給外層容器組件加 { space: 數字 }Column({space:20}){
Text()
Button()
}
這樣text和button就會有20px的間隔

7）圓角，正圓和膠囊

  Column() {// 1. 正圓 （頭像）Image($r('app.media.cat')).width(100).height(100).borderRadius(50)// 2. 膠囊按鈕 (左右半圓)Text('今天還沒打卡呦~').width(240).height(60).borderRadius(30).backgroundColor(Color.Pink).margin({ top: 20 })}.padding(20)

8）背景多了一些新的東西

 // backgroundImagePosition// 1. 傳入對象, 設置位置坐標，背景圖片的左頂點//    { x: 坐標值, y: 坐標值 }//    注意：坐標值的單位，和寬高的默認單位不同的，顯示出來大小會不同//// 2. Alignment 枚舉，設置一些特殊的位置（中央、左頂點...）//    Center  TopStart左頂點 TopEnd右頂點 BottomEnd右下...Text().width(300).height(200).backgroundColor(Color.Pink).backgroundImage($r('app.media.flower')).backgroundImagePosition({x: 400,y: 300}).backgroundImagePosition(Alignment.BottomEnd)}.padding(20)

9）這里引出來一個新的單位，不是px，是vp
px轉換為vp的方法vp2px

 Text().width('300vp').height('200vp').backgroundColor(Color.Pink).backgroundImage($r('app.media.flower')).backgroundImagePosition({x: vp2px(150),y: vp2px(100)})}.padding(20)

10）主軸對齊方式（column和row都可以為主軸），這里和flex差不多，它這里面也還可以引入flex，grid

    Column() {Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 })Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 }).margin(5)Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 }).margin(5)Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 })}.width('100%').height('100%').backgroundColor('#ccc')// 設置排布主方向的對齊方式（主軸）// 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)

11）交叉軸對齊方式

build() {// Column 交叉軸的對齊方式（水平往右）// alignItems(HorizontalAlign.Start)  Center EndColumn() {Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 })Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 }).margin({ top: 5, bottom: 5 })Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 })}.alignItems(HorizontalAlign.End).width('100%').height('100%').backgroundColor('#ccc')

12）layoutWeight 自適應伸縮: 按照[份數權重]，分配[剩余空間]

    Column() {// layoutWeight 自適應伸縮: 按照[份數權重]，分配[剩余空間]Row() {Text('左側').layoutWeight(1).height(40).backgroundColor(Color.Pink)Text('右側固定').width(80).height(40).backgroundColor(Color.Orange)}.width(300).height(40).backgroundColor('#fff')Row() {Text('老大').layoutWeight(1).height(40).backgroundColor(Color.Gray)Text('老二').layoutWeight(2).height(40).backgroundColor(Color.Orange)Text('老三').layoutWeight(3).height(40).backgroundColor(Color.Pink)Text('小寶').width(50).height(40).backgroundColor(Color.Brown)}.width(300).height(40).backgroundColor('#fff').margin({ top: 30 })}.padding(10).width('100%').height('100%').backgroundColor('#ccc')

13）flex

  // Flex默認主軸水平往右，交叉軸垂直往下 → Row// 1. 主軸方向//    direction: FlexDirection.Row / Column// 2. 主軸對齊方式//    justifyContent: FlexAlign.SpaceAround// 3. 交叉軸對齊方式//    alignItems: ItemAlign.Stretch / Start / Center / End// 單行或者單列的情況，優先還是使用線性布局（本質基于Flex設計的，且還做了性能優化）// Flex布局：伸縮布局。當子盒子的總和溢出父盒子，默認進行壓縮顯示。// 4. 換行 wrap//    FlexWrap.Wrap 換行//    FlexWrap.NoWrap 不換行Flex({wrap: FlexWrap.Wrap}) {Text().width(80).height(80).backgroundColor(Color.Pink).border({ width: 1, color: Color.Blue })Text().width(80).height(80).backgroundColor(Color.Pink).border({ width: 1, color: Color.Blue })Text().width(80).height(80).backgroundColor(Color.Pink).border({ width: 1, color: Color.Blue })Text().width(80).height(80).backgroundColor(Color.Pink).border({ width: 1, color: Color.Blue })Text().width(80).height(80).backgroundColor(Color.Pink).border({ width: 1, color: Color.Blue })}.width(300).height(300).backgroundColor('#5f9a5c')

14）絕對定位和zindex

   // 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)

15）層疊布局

 // 層疊布局Stack({alignContent: Alignment.Bottom}) {Text('大兒子').width(250).height(250).backgroundColor(Color.Green).zIndex(3)Text('二兒子').width(150).height(150).backgroundColor(Color.Orange).zIndex(4)Text('三兒子').width(50).height(50).backgroundColor(Color.Yellow).zIndex(5)}.width(300).height(600).backgroundColor(Color.Pink)

下面是前端的一個綜合示例：B站-視頻卡片

@Entry
@Component
struct Index {build() {Column() {// b站視頻卡片Column() {// 1. 上面圖片區域（層疊布局）Stack({ alignContent: Alignment.Bottom }) {Image($r('app.media.bz_img')).borderRadius({topLeft: 10,topRight: 10})Row() {Row({ space: 5 }){Image($r('app.media.bz_play')).width(14).fillColor(Color.White)Text('288萬').fontSize(12).fontColor(Color.White)}.margin({ right: 10 })Row({ space: 5 }){Image($r('app.media.bz_msg')).width(14).fillColor(Color.White)Text('8655').fontSize(12).fontColor(Color.White)}Blank()Text('4:33').fontSize(12).fontColor(Color.White)}.height(24).padding({ left: 5, right: 5 }).width('100%')}.width('100%').height(125)// 2. 底部文字區域Column() {Text('【鳳凰傳奇新歌】歡迎來到國風統治區：嗩吶一響神曲《鐵衣流派推廣曲》').fontSize(13).lineHeight(16).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(2)Row() {Text('19萬點贊').fontSize(10).fontColor('#e66c43').backgroundColor('#fef0ef').padding(5).borderRadius(2)Image($r('app.media.bz_more')).width(14)}.margin({ top: 6 }).width('100%').justifyContent(FlexAlign.SpaceBetween)}.padding(5)}.width(200).height(200).backgroundColor(Color.White).borderRadius(10).margin({ top: 10 })}.width('100%').height('100%').backgroundColor('#ccc')}
}

4.上面說了一些前端的部分，下面說一下后端部分

1）字符串拼接+模板字符串的用法

用``還有${}
// let hobby: string = '打拳'
// console.log('簡介信息', `姓名: ${name}, 年紀: ${age}歲, 愛好: ${hobby}`)

2)一些js的基礎知識

1）數字轉字符串
// 將數字轉字符串, toString()  toFixed()
// 1. 數據.toString() 原樣轉字符串
console.log('toString:', money.toString())// 2. 數據.toFixed(保留幾位小數)  四舍五入
console.log('toFixed:', money.toFixed())
console.log('toFixed:', money.toFixed(2))
2）點擊事件還是onclickText('我是文本').onClick(() => {// 彈個框AlertDialog.show({message: '你好~ 我是文本組件'})})

3）鴻蒙多了一個狀態變量

普通變量：只能在初始化時渲染，后續將不會再刷新。
狀態變量：需要裝飾器裝飾，改變會引起 UI 的渲染刷新 （必須設置 類型 和 初始值）
struct Index {// 組件內的[普通變量] this.xxxmyAge: number = 18// 組件內的[狀態變量] this.xxx@State myMsg: string = 'hello 黑馬'build() {Column() {Text(myName).onClick(() => {myName = '貂蟬'console.log('myName', myName)})Text(this.myAge.toString()).onClick(() => {this.myAge = 200console.log('myAge', this.myAge)})Text(this.myMsg).onClick(() => {this.myMsg = '你好 狀態'})}}
}

簡單后端的例子：抽卡

// 定義接口 (每個列表項的數據結構)
interface ImageCount {url: stringcount: number
}// 0 1 2 3 4 5
// [0,1) * 6  =>  [0,6)
// 求隨機數: Math.random
// 向下取整: Math.floor
// console.log('隨機數', Math.floor(Math.random() * 6))@Entry
@Component
struct Index {// 隨機的生肖卡序號 0-5@State randomIndex: number = -1 // 表示還沒開始抽// 基于接口, 準備數據@State images: ImageCount[] = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 0 },{ url: 'app.media.bg_02', count: 0 },{ url: 'app.media.bg_03', count: 0 },{ url: 'app.media.bg_04', count: 0 },{ url: 'app.media.bg_05', count: 0 }]// 控制遮罩的顯隱@State maskOpacity: number = 0 // 透明度@State maskZIndex: number = -1 // 顯示層級// 控制圖片的縮放@State maskImgX: number = 0 // 水平縮放比@State maskImgY: number = 0 // 垂直縮放比// 控制中大獎遮罩的顯隱@State isGet: boolean = false@State arr: string[] = ['pg', 'hw', 'xm'] // 獎池@State prize: string = '' // 默認沒中獎build() {Stack() {// 初始化的布局結構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 }).onClick(() => {// 點擊時, 修改遮罩參數, 讓遮罩顯示this.maskOpacity = 1this.maskZIndex = 99// 點擊時, 圖片需要縮放this.maskImgX = 1this.maskImgY = 1// 計算隨機數 Math.random()  [0,1) * (n + 1)this.randomIndex = Math.floor(Math.random() * 6)})}.width('100%').height('100%')// 抽卡遮罩層 (彈層)Column({ space: 30 }) {Text('獲得生肖卡').fontColor('#f5ebcf').fontSize(25).fontWeight(FontWeight.Bold)Image($r(`app.media.img_0${this.randomIndex}`)).width(200)// 控制元素的縮放.scale({x: this.maskImgX,y: this.maskImgY}).animation({duration: 500})Button('開心收下').width(200).height(50).backgroundColor(Color.Transparent).border({ width: 2, color: '#fff9e0' }).onClick(() => {// 控制彈層顯隱this.maskOpacity = 0this.maskZIndex = -1// 圖像重置縮放比為 0this.maskImgX = 0this.maskImgY = 0// 開心收下, 對象數組的情況需要更新, 需要修改替換整個對象// this.images[this.randomIndex].count++this.images[this.randomIndex] = {url: `app.media.img_0${this.randomIndex}`,count: this.images[this.randomIndex].count + 1}// 每次收完卡片, 需要進行簡單的檢索, 判斷是否集齊// 需求: 判斷數組項的count, 是否都大于0, 只要有一個等于0,就意味著沒集齊let flag: boolean = true // 假設集齊// 驗證是否集齊for (let item of this.images) {if (item.count == 0) {flag = false // 沒集齊break // 后面的沒必要判斷了}}this.isGet = flag// 判斷是否中獎了, 如果是 需要抽獎if (flag) {let randomIndex: number = Math.floor(Math.random() * 3)this.prize = this.arr[randomIndex]}})}.justifyContent(FlexAlign.Center).width('100%').height('100%')// 顏色十六進制色值,如果是八位,前兩位,就是透明度.backgroundColor('#cc000000')// 設置透明度.opacity(this.maskOpacity).zIndex(this.maskZIndex)// 動畫 animation, 當我們元素有狀態的改變,可以添加animation做動畫.animation({duration: 200})// 抽大獎的遮罩層if (this.isGet) {Column({ space: 30 }) {Text('恭喜獲得手機一部').fontColor('#f5ebcf').fontSize(25).fontWeight(700)Image($r(`app.media.${this.prize}`)).width(300)Button('再來一次').width(200).height(50).backgroundColor(Color.Transparent).border({ width: 2, color: '#fff9e0' }).onClick(() => {this.isGet = falsethis.prize = ''this.images = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 0 },{ url: 'app.media.bg_02', count: 0 },{ url: 'app.media.bg_03', count: 0 },{ url: 'app.media.bg_04', count: 0 },{ url: 'app.media.bg_05', count: 0 }]})}.justifyContent(FlexAlign.Center).width('100%').height('100%').backgroundColor('#cc000000')}}}
}

5.輪播swiper組件

最簡單的例子Column() {// Swiper 輪播組件的基本使用// 1. Swiper 包內容// 2. Swiper 設尺寸Swiper() {Text('1').backgroundColor(Color.Orange)Text('2').backgroundColor(Color.Yellow)Text('3').backgroundColor(Color.Brown)}.width('100%').height(100)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) // 縱向
// 定制小圓點// .indicator(false).indicator(Indicator.dot().itemWidth(20).itemHeight(20).color(Color.Black).selectedItemWidth(25).selectedItemHeight(25).selectedColor(Color.White))
完整代碼
@Entry
@Component
struct Index {build() {Column() {// 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))}}
}

6.@Extend-擴展組件(樣式,事件)

@Extend(Text)
function textExtend(color: ResourceColor, txt: string) {
.textAlign(TextAlign.Center)
.backgroundColor(color)
.fontColor(Color.White)
.fontSize(30)
.onClick(() => {
AlertDialog.show({
message: txt
})
})
}
Text('1')
.textExtend(Color.Red, '輪播圖1')

7.@Styles: 抽取通用屬性、事件

// 1. 全局定義
@Styles function commonStyles() {
.width(100)
.height(100)
.onClick(()=>{ })
}
@Component
struct FancyDemo {
// 2. 在組件內定義@Styles setBg() {
.backgroundColor(this.Color)
}
builder(){
Text().commonStyles()
.setBg()
}
}

8.@Builder：自定義構建函數（結構、樣式、事件）

類似于vue里面的混入（Mixins）

// 全局 Builder
@Builder
function navItem(icon: ResourceStr, txt: string) {Column({ space: 10 }) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(() => {AlertDialog.show({message: '點了' + txt})})
}@Entry
@Component
struct BuilderDemo {@State message: string = '@Builder';@BuildernavItem(icon: ResourceStr, txt: string) {Column({ space: 10 }) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(() => {AlertDialog.show({message: '點了' + txt + this.message})})}build() {Column({ space: 20 }) {Text(this.message).fontSize(30)Row() {Row() {navItem($r('app.media.ic_reuse_01'), '阿里拍賣')navItem($r('app.media.ic_reuse_02'), '菜鳥')this.navItem($r('app.media.ic_reuse_03'), '巴巴農場')this.navItem($r('app.media.ic_reuse_04'), '阿里藥房')}}}.width('100%').height('100%')}}

9.滾動容器 Scroll

@Entry
@Component
struct Index {build() {Column() {// 如果希望內容溢出, 能夠滾動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) // 滑動效果}}
}

10.容器組件 Tabs

@Entry
@Component
struct Index {build() {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 {titles: string[] = ['首頁','關注','熱門','軍事','體育','八卦','數碼','財經','美食','旅行']build() {// 生成10個面板 → 10個小導航Tabs() {ForEach(this.titles, (item: string, index) => {TabContent() {Text(`${item}內容`)}.tabBar(item)})}// barMode屬性, 可以實現滾動導航欄.barMode(BarMode.Scrollable)}
}