使用高德api。
使用自定义弹窗。
水平有限,只能做到这种程度了,有大神,能做到滑动选中,上下字体缩放效果的。麻烦给留一份~~
自定义弹窗代码:
import { lazyLoadAddress } from './Clien4JoinAddressRequest';
@CustomDialog
export default struct Client4JoinAddressDialogWidget {
controller: CustomDialogController
private scroller: Scroller = new Scroller()
private scrollerForList: Scroller = new Scroller()
@State provinceList: Array<Map<string, object>> = []; //省份
@State cityList: Array<Map<string, object>> = []; //市
@State countyList: Array<Map<string, object>> = []; //区
@State areaList: Array<Map<string, object>> = []; //街道、县
@State provinceArray: Array<string> = [];
@State cityArray: Array<string> = [];
@State countyArray: Array<string> = [];
@State areaArray: Array<string> = [];
@Link provinceChecked: string
@Link cityChecked: string
@Link countyChecked: string
@Link areaChecked: string
aboutToAppear() {
//省份
lazyLoadAddress()
.then((nodes: Array<Map<string, object>>) => {
// new ArrayList()
this.provinceList = nodes;
this.provinceList.forEach(item => {
this.provinceArray.push(item.get("name").toString())
})
//市份
lazyLoadAddress(this.provinceList[0])
.then((nodes: Array<Map<string, object>>) => {
this.cityList = nodes;
nodes.forEach(item => {
this.cityArray.push(item.get("name").toString())
})
//区
lazyLoadAddress(this.cityList[0])
.then((nodes: Array<Map<string, object>>) => {
this.countyList = nodes;
nodes.forEach(item => {
this.countyArray.push(item.get("name").toString())
})
//街道
lazyLoadAddress(this.countyList[0])
.then((nodes: Array<Map<string, object>>) => {
this.areaList = nodes;
nodes.forEach(item => {
this.areaArray.push(item.get("name").toString())
})
}).catch((error: any) => {
console.error("Error occurred:", error);
});
}).catch((error: any) => {
console.error("Error occurred:", error);
});
}).catch((error: any) => {
console.error("Error occurred:", error);
});
}).catch((error: any) => {
console.error("Error occurred:", error);
});
}
build() {
Column() {
//取消和确定
Row() {
Text("取消区域").fontColor(Color.Gray)
.fontColor(Color.Red)
.margin({ right: px2vp(29) })
.onClick(() => {
this.provinceChecked = ""
this.cityChecked = ""
this.countyChecked = ""
this.areaChecked = ""
this.controller?.close();
})
Text("确定区域").fontColor(Color.Black).margin({ left: px2vp(29) })
.onClick(() => {
this.controller?.close();
})
}.width("100%")
.margin({ top: px2vp(20) }).padding({ left: px2vp(29), right: px2vp(29) })
.justifyContent(FlexAlign.SpaceBetween)
Row() {
this.pickerViewWidget({ provinces: this.provinceArray, type: this.provinceList })
this.pickerViewWidget({ provinces: this.cityArray, type: this.cityList })
this.pickerViewWidget({ provinces: this.countyArray, type: this.countyList })
this.pickerViewWidget({ provinces: this.areaArray, type: this.areaList })
}.padding({ top: px2vp(30) })
.width("100%")
.justifyContent(FlexAlign.SpaceAround)
}
.width("100%")
.height(px2vp(720))
}
@Builder pickerViewWidget($$: {
provinces: Array<string>,
type: Array<Map<string, object>>
}) {
Scroll(this.scroller) {
List({ space: px2vp(20), scroller: this.scrollerForList }) {
ForEach($$.provinces, (item) => {
ListItem() {
Row() {
Text(
item
)
.fontSize(px2fp(46))
.textAlign(TextAlign.Start)
.backgroundColor(Color.White)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Clip })
.onClick(() => {
const type = $$.type[0].get("label")
if (type + ''.trim() === 'province') {
for (let index = 0; index < $$.type.length; index++) {
if ($$.type[index].get("name") === item) {
this.getAddress($$.type[index])
}
}
this.provinceChecked = item;
} else if (type + ''.trim() === 'city') {
for (let index = 0; index < $$.type.length; index++) {
if ($$.type[index].get("name") === item) {
this.getAddress($$.type[index])
}
}
this.cityChecked = item;
}
else if (type + ''.trim() === 'district') {
for (let index = 0; index < $$.type.length; index++) {
if ($$.type[index].get("name") === item) {
this.getAddress($$.type[index])
}
}
this.countyChecked = item;
}
else if (type + ''.trim() === 'street') {
this.areaChecked = item;
}
// $$.provinceChose=item;
})
// Text(`provinces++${item.get("name")}`)
// Text(`${$$.type[0].get("label")}`)
}
}
}, item => item)
}
}
.padding({ top: px2vp(30), bottom: px2vp(90) })
.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
.height("100%")
// .backgroundColor(Color.Red)
.width(px2vp(200))
}
getAddress(node?: Map<string, object>) {
const type = node.get("label")
if (type + ''.trim() === 'province') {
//市份
lazyLoadAddress(node)
.then((nodes: Array<Map<string, object>>) => {
this.cityList = nodes;
this.cityArray = [];
nodes.forEach(item => {
this.cityArray.push(item.get("name").toString())
})
}).catch((error: any) => {
console.error("Error occurred:", error);
});
} else if (type + ''.trim() === 'city') {
//区
lazyLoadAddress(node)
.then((nodes: Array<Map<string, object>>) => {
this.countyList = nodes;
this.countyArray = [];
nodes.forEach(item => {
this.countyArray.push(item.get("name").toString())
})
}).catch((error: any) => {
console.error("Error occurred:", error);
});
}
else if (type + ''.trim() === 'district') {
//街道
lazyLoadAddress(node)
.then((nodes: Array<Map<string, object>>) => {
this.areaList = nodes;
this.areaArray = [];
nodes.forEach(item => {
this.areaArray.push(item.get("name").toString())
})
}).catch((error: any) => {
console.error("Error occurred:", error);
});
}
}
}
使用页面:
@Component
export default struct ChangeMyDeviceInfoView {
@State myDeviceListModelItem: MyDeviceListModelItem = router.getParams()['item']
@State message: string = 'ChangeMyDeviceInfoView'
@State provinceList: Array<String> = []
@State provinceIndex: number = 0
private clientName = ''
private clientTel = '';
private clientAddress = '';
// private client4JoinAddress = '';
private remark = '';
controller: TextInputController = new TextInputController()
@State provinceChecked: string = '北京市';
@State cityChecked: string = '北京城区';
@State countyChecked: string = '东城区';
@State areaChecked: string = '体育馆路街道';
// clien4JoinAddressDialog: CustomDialogController = new CustomDialogController({
// builder: Clien4JoinAddressDialogWidget({})
// })
private customDialogController =
new CustomDialogController({
builder: Client4JoinAddressDialogWidget(
{
provinceChecked: $provinceChecked,
cityChecked: $cityChecked,
countyChecked: $countyChecked,
areaChecked: $areaChecked
}
),
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: px2vp(-30) }, // 弹窗相对alignment位置的偏移量
})
// selectedDate: Date = new Date("2010-1-1")
build() {
Column() {
Button("测试")
.margin(200)
.onClick(() => {
this.customDialogController.open()
// DatePickerDialog.show({
// start: new Date("2000-1-1"),
// end: new Date("2100-12-31"),
// selected: this.selectedDate,
// lunar: true,
// onAccept: (value: DatePickerResult) => {
// this.selectedDate.setFullYear(value.year, value.month, value.day)
// console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
// },
// onCancel: () => {
// console.info("DatePickerDialog:onCancel()")
// },
// onChange: (value: DatePickerResult) => {
// console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
// }
// })
})
Text(this.provinceChecked)
Text(this.cityChecked)
Text(this.countyChecked)
Text(this.areaChecked)
}
效果: