官網(wǎng)案例
gitee源碼地址
相關(guān)概念
頁面狀態(tài)管理: 用于管理頁面級變量的狀態(tài)。
自定義彈窗: 通過CustomDialogController類顯示自定義彈窗。
List列表: 列表包含一系列相同寬度的列表項(xiàng)。
build() {
Column() {
//標(biāo)題
this.titleBar()
//內(nèi)容區(qū)域
TargetInformation(
...
)
//子目標(biāo)
TargetList(
...
)
}
一、標(biāo)題
main
├── ets
│ ├── entryability
│ │ └── EntryAbility.ts
│ └── pages //核心代碼的位置
│ └── Index.ets
├── resources
│ ├── base
│ │ ├── element
│ │ │ ├── color.json
│ │ │ └── string.json
│ │ ├── media
│ │ │ └── icon.png
│ │ └── profile
│ │ └── main_pages.json
│ ├── en_US
│ │ └── element
│ │ └── string.json
│ ├── rawfile
│ └── zh_CN
│ └── element
│ └── string.json
└── module.json5
index.ets代碼
@Entry
@Component
struct Index {
build() {
Column() {
this.titleBar()
}
.width('100%')
.height('100%')
.backgroundColor('#f1f3f5')
}
@Builder titleBar(){
Text('工作目標(biāo)')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Start)
.width('86.7%')
.margin({top:20,bottom:10})
}
}
首先，實(shí)現(xiàn)了標(biāo)題的功能
image.png
二、內(nèi)容區(qū)域
新建文件夾view，新建TargetInformation類
image.png
在index.ets中導(dǎo)入TargetInformation
Column() {
//標(biāo)題
this.titleBar()
//內(nèi)容區(qū)域
TargetInformation()
}
在TargetInformation 先定義邊框背景
@Component
export default struct TargetInformation {
build() {
Column() {
//TODO
this.TargetItem()
}
.padding(16)
.width('93.3%')
.height(187)
.backgroundColor(Color.White)
.borderRadius(24)
}
}
至此，我們完成了一個空白的背景頁面
image.png
=> 開始填充背景頁面
@Component
export default struct TargetInformation {
build() {
Column() {
this.TargetItem()
}
.padding(16)
.width('93.3%')
.height(187)
.backgroundColor(Color.White)
.borderRadius(24)
}
@Builder TargetItem(){
Row(){
Image($r('app.media.ic_main'))
.width(96)//寬度
.height(96)//高度
.objectFit(ImageFit.Fill)//圖片填充方式
.borderRadius(12)//圖片圓角
Column(){
Text('第一季度運(yùn)營目標(biāo)')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.width('86.7%')
Text('第一季度運(yùn)營目標(biāo)')
.opacityTextStyle()
.fontWeight(15)
.margin({top:12})
}
.margin({left:'5%'})
.alignItems(HorizontalAlign.Start)
}
}
}
@Extend(Text) function opacityTextStyle() {
.fontColor('#182431')
.fontSize(12)
.opacity(0.4)
.fontWeight(FontWeight.Medium)
}
image.png
tips:
圖片控件是用 $r 的方式，圖片資源在app.media文件夾下
=> 繼續(xù)完善內(nèi)容區(qū)域
@Component
export default struct TargetInformation {
build() {
Column() {
this.TargetItem()
this.OverallProgress()
}
.padding(16)
.width('93.3%')
.height(187)
.backgroundColor(Color.White)
.borderRadius(24)
}
@Builder TargetItem(){
Row(){
Image($r('app.media.ic_main'))
.width(96)//寬度
.height(96)//高度
.objectFit(ImageFit.Fill)//圖片填充方式
.borderRadius(12)//圖片圓角
Column(){
Text('第一季度運(yùn)營目標(biāo)')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.width('86.7%')
Text('實(shí)現(xiàn)用戶量與用戶活躍度提升')
.opacityTextStyle()
.fontSize(15)
.margin({top:12})
}
.margin({left:'5%'})
.alignItems(HorizontalAlign.Start)
}
}
@Builder OverallProgress(){
Row(){
Column(){
Text('整體進(jìn)度')
.fontColor('#182431')
.fontSize(16)
.fontWeight(FontWeight.Bold)
Row(){
Text('更新時間:')
.opacityTextStyle()
Text('2023-12-13 22:42')
.opacityTextStyle()
}
}
.alignItems(HorizontalAlign.Start)
Stack(){
Row(){
Text('1')
.fontSize(14)
.fontColor('#007dff')
.fontWeight(FontWeight.Bold)
Text('/3')
.fontSize(14)
.fontWeight(FontWeight.Bold)
}
Progress({
value:1,
total:3,
type:ProgressType.Ring
})
.color('#007dff')
.style({
strokeWidth:4.8
})
.width(48)
.height(48)
}
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.height(48)
.margin({top:15})
}
}
@Extend(Text) function opacityTextStyle() {
.fontColor('#182431')
.fontSize(12)
.opacity(0.4)
.fontWeight(FontWeight.Medium)
}
image.png
至此，我們完成了內(nèi)容區(qū)域，但是會發(fā)現(xiàn)數(shù)據(jù)都是寫死的，我們從index.ets傳過來。
修改index.ets中的代碼
struct Index {
@State latestUpdateDate: string = '2023-12-13 23:00'
@State totalTasksNumber: number = 3
@State completedTasksNumber: number = 1
build() {
Column() {
//標(biāo)題
...
//內(nèi)容區(qū)域
TargetInformation({
latestUpdateDate: this.latestUpdateDate,
totalTasksNumber: this.totalTasksNumber,
completedTasksNumber: this.completedTasksNumber
})
}
...
}
...
}
修改TargetInformation.ets中的代碼
@Component
export default struct TargetInformation {
@Prop latestUpdateDate:string
@Prop totalTasksNumber:number
@Prop completedTasksNumber:number
...
@Builder OverallProgress(){
Row(){
Column(){
...
Row(){
Text('更新時間:')
.opacityTextStyle()
Text(this.latestUpdateDate)
.opacityTextStyle()
}
}
.alignItems(HorizontalAlign.Start)
Stack(){
Row(){
Text(this.completedTasksNumber.toString())
.fontSize(14)
.fontColor('#007dff')
.fontWeight(FontWeight.Bold)
Text(`/${this.totalTasksNumber}`)
.fontSize(14)
.fontWeight(FontWeight.Bold)
}
Progress({
value:this.completedTasksNumber,
total:this.totalTasksNumber,
type:ProgressType.Ring
})
.color('#007dff')
.style({
strokeWidth:4.8
})
.width(48)
.height(48)
}
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.height(48)
.margin({top:15})
}
}
...
image.png
至此，內(nèi)容區(qū)域大功告成，我們只需要從index.ets中修改latestUpdateDate、totalTasksNumber、completedTasksNumber即可。
