ArkUI 组件开发案例参考

Text('Hello HarmonyOS')
 .fontSize(20)
 .fontColor('#333333')
 .fontWeight(FontWeight.Bold)
 .textAlign(TextAlign.Center)
 .maxLines(2)
 .textOverflow({ overflow: TextOverflow.Ellipsis })
 .decoration({ type: TextDecorationType.Underline, color: '#0066FF' })

Image($r('app.media.icon'))
 .width(100)
 .height(100)
 .objectFit(ImageFit.Contain)
 .interpolation(ImageInterpolation.High)
 .alt($r('app.media.placeholder')) // 加载失败占位图
 .onComplete(() => { console.info('Image loaded') })
 .onError(() => { console.error('Image load failed') })

Button('确认提交', { type: ButtonType.Capsule })
 .width(200)
 .height(40)
 .fontSize(16)
 .fontColor(Color.White)
 .backgroundColor('#007DFF')
 .borderRadius(20)
 .stateStyles({
 normal: { .backgroundColor('#007DFF') },
 pressed: { .backgroundColor('#0055CC') },
 disabled: { .backgroundColor('#CCCCCC') }
 })
 .onClick(() => { this.handleSubmit() })

TextInput({ placeholder: '请输入用户名' })
 .type(InputType.Normal)
 .maxLength(20)
 .caretColor('#007DFF')
 .placeholderColor('#999999')
 .onChange((value) => { this.username = value })
 .onSubmit((enterKey) => { this.doLogin() })

// 垂直布局
Column({ space: 10 }) {
 Text('标题')
 Text('内容')
}
.width('100%')
.height(200)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Start)
.padding({ left: 16, right: 16, top: 10, bottom: 10 })
 
// 水平布局
Row({ space: 8 }) {
 Image($r('app.media.avatar')).width(40).height(40)
 Text('用户名')
}
.width('100%')
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)

List({ space: 12, initialIndex: 0 }) {
 ForEach(this.dataList, (item: DataItem) => {
 ListItem() {
 this.ListItemBuilder(item)
 }
 }, (item: DataItem) => item.id.toString())
}
.width('100%')
.height('100%')
.edgeEffect(EdgeEffect.Spring)
.onReachEnd(() => { this.loadMore() })
.onScroll(() => { this.onScrollEvent() })
 
@Builder
ListItemBuilder(item: DataItem) {
 Row() {
 Image(item.icon).width(48).height(48)
 Column() {
 Text(item.title).fontSize(16).fontWeight(FontWeight.Bold)
 Text(item.subtitle).fontSize(12).fontColor('#999999')
 }.layoutWeight(1)
 Text(item.price + '元').fontSize(14).fontColor('#FF4400')
 }.width('100%').padding(12)
}

Scroll() {
 Column() {
 // 大量内容...
 }
}
.width('100%')
.height('100%')
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Auto)
.scrollBarColor('#CCCCCC')
.edgeEffect(EdgeEffect.Spring)
.onScrollFrameBegin((offset) => {
 return { offsetRemain: offset }
})

Tabs({ barPosition: BarPosition.End }) {
 TabContent() {
 this.HomeContent()
 }.tabBar('首页')
 
 TabContent() {
 this.CategoryContent()
 }.tabBar('分类')
 
 TabContent() {
 this.ProfileContent()
 }.tabBar('我的')
}
.vertical(false)
.scrollable(true)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.onChange((index) => { this.currentTab = index })

Grid() {
 ForEach(this.gridData, (item: GridItem) => {
 GridItem() {
 Column() {
 Image(item.icon).width(48).height(48)
 Text(item.name).fontSize(12).margin({ top: 4 })
 }
 }
 }, (item: GridItem) => item.id.toString())
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsGap(10)
.columnsGap(10)
.width('100%')
.height(200)
.padding({ left: 12, right: 12 })

Swiper() {
 ForEach(this.bannerList, (item: BannerItem) => {
 Image(item.imageUrl)
 .width('100%')
 .height(180)
 .objectFit(ImageFit.Cover)
 }, (item: BannerItem) => item.id.toString())
}
.autoPlay(true)
.interval(3000)
.indicator(true)
.loop(true)
.onChange((index) => { this.currentBanner = index })

@CustomDialog
struct MyCustomDialog {
 controller: CustomDialogController
 title: string = '提示'
 message: string = ''
 onConfirm: () => void = () => {}
 
 build() {
 Column({ space: 16 }) {
 Text(this.title).fontSize(18).fontWeight(FontWeight.Bold)
 Text(this.message).fontSize(14).fontColor('#666666')
 Row({ space: 12 }) {
 Button('取消')
 .onClick(() => { this.controller.close() })
 Button('确认')
 .onClick(() => { this.onConfirm(); this.controller.close() })
 }
 }.padding(24).width('80%')
 }
}
 
// 使用：
dialogController: CustomDialogController = new CustomDialogController({
 builder: MyCustomDialog({
 title: '确认删除',
 message: '此操作不可撤销',
 onConfirm: () => { this.doDelete() }
 }),
 autoCancel: true,
 alignment: DialogAlignment.Center
})

Panel(this.showPanel) {
 Column() {
 Text('面板标题').fontSize(18).padding(16)
 // 面板内容
 }
}
.type(PanelTypeType.MINI)
.mode(PanelMode.HALF)
.dragBar(true)
.showClose(true)
.onHeightChange((height: number) => { console.info(`Panel height: ${height}`) })

Refresh({ refreshing: $this.isRefreshing }) {
 List() {
 ForEach(this.dataList, (item) => {
 ListItem() { this.ListItemBuilder(item) }
 })
 }
}
.onRefreshing(() => {
 this.refreshData()
})
.refreshParams({
 refreshingColor: '#007DFF',
 maxDistance: 80
})

LoadingProgress()
 .color('#007DFF')
 .width(48)
 .height(48)

Stepper({ index: $this.currentStep }) {
 StepperItem() {
 Column() { Text('步骤1内容') }
 }.nextLabel('下一步').prevLabel('返回')
 
 StepperItem() {
 Column() { Text('步骤2内容') }
 }.nextLabel('下一步')
 
 StepperItem() {
 Column() { Text('步骤3内容') }
 }.nextLabel('完成')
}
.onFinish(() => { this.handleSubmit() })
.onNext((index) => { this.validateStep(index) })
.onBack((index) => { this.onStepBack(index) })

Row() {
 Text('左侧')
 Blank().layoutWeight(1) // 自动填充剩余空间
 Text('右侧')
}.width('100%')