82 行
2.4 KiB
Plaintext
82 行
2.4 KiB
Plaintext
import { XDialogCommon } from './XDialogCommon'
|
|
import { XDialogController } from './XDialogController'
|
|
|
|
|
|
@Preview
|
|
@Component
|
|
export struct XDialogList {
|
|
controller: XDialogController | null = null
|
|
onSelected: (index: number, value: string) => void = (index: number, value: string) => {
|
|
}
|
|
onCancel?: () => void = undefined
|
|
title?: string = undefined
|
|
values?: Array<string> | Array<object> = undefined
|
|
autoCancel?: boolean = false
|
|
private dialogController: CustomDialogController | null = null
|
|
|
|
build() {
|
|
// this.buildContent()
|
|
}
|
|
|
|
aboutToAppear(): void {
|
|
|
|
this.dialogController = new CustomDialogController({
|
|
builder: XDialogCommon({
|
|
dialogContent: () => {
|
|
this.buildContent()
|
|
},
|
|
}),
|
|
alignment: DialogAlignment.Center,
|
|
autoCancel: this.autoCancel ?? false,
|
|
cancel: () => {
|
|
this.onCancel && this.onCancel()
|
|
}
|
|
})
|
|
if (this.controller) {
|
|
this.controller.open = () => {
|
|
this.dialogController?.open()
|
|
}
|
|
this.controller.close = () => {
|
|
this.dialogController?.close()
|
|
}
|
|
}
|
|
}
|
|
|
|
@Builder
|
|
buildContent() {
|
|
Column() {
|
|
Text(this.title)
|
|
.fontSize(13)
|
|
.textAlign(TextAlign.Center)
|
|
.width('60%')
|
|
.maxLines(2)
|
|
.ellipsisMode(EllipsisMode.END)
|
|
.textOverflow({
|
|
overflow: TextOverflow.Ellipsis
|
|
})
|
|
.visibility(this.title ? Visibility.Visible : Visibility.None)
|
|
List({ space: 20, initialIndex: 0 }) {
|
|
ForEach(this.values ?? [], (item: string, index: number) => {
|
|
ListItem() {
|
|
Text(item)
|
|
.width('100%')
|
|
.fontSize(16)
|
|
.textAlign(TextAlign.Center)
|
|
.onClick(() => {
|
|
this.onSelected(index, item)
|
|
this.dialogController?.close()
|
|
})
|
|
}
|
|
}, (item: string) => item)
|
|
}
|
|
.listDirection(Axis.Vertical) // 排列方向
|
|
.scrollBar(BarState.Off)
|
|
.friction(0.6)
|
|
.divider({ strokeWidth: 1, color: 0xEEEEEE, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
|
|
.edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
|
|
.width('100%')
|
|
.height(this.values === undefined ? '20%' : this.values?.length < 8 ? `${this.values?.length / 16 * 100}%` : '50%')
|
|
.margin({ top: 20 })
|
|
}.padding({ top: 20, bottom: 20, left: 20, right: 20 })
|
|
}
|
|
} |
