HarmonyOS 鸿蒙Next 省市区三级选择功能分享ArkTS语言
HarmonyOS 鸿蒙Next 省市区三级选择功能分享ArkTS语言
import { listData } from '../pages/Area'
import { MyDataSource } from '../util/DataSource'
@Entry
@Component
struct TestPage1 {
@State provinceButtonTitle: string = "请选择地区";
provinceArray: string[] = [] //'北京市', '天津市', '河北省', '山西省', '陕西省'
//-----------------------------------------------------------
@State positionA: string = ""; // "海南省海口市琼山区";//位置
//自定义省份选择器弹窗
provinceDialogController: CustomDialogController = new CustomDialogController({
builder: ProvincePicker({
positionA: $positionA,
province: $provinceButtonTitle,
provincesStringArray: this.provinceArray
}),
autoCancel: true,
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -20 },
customStyle: true
})
//-----------------------------------------------------------
build() {
Column {
Text(this.provinceButtonTitle)
.width('90%')
.height(50)
.fontSize(30)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
.padding({ left: 20 })
.onClick(() => {
this.provinceDialogController.open(); //打开省份选择器弹窗
})
}.width('100%').height('100%')
.backgroundColor(Color.White)
.padding({ top: 5 })
}
}
/**
* 省份选择器
*/
@CustomDialog //该装饰器用于修饰自定义弹窗
struct ProvincePicker {
@State isProvince: string = '选择省份'
@State isCityAA: string = '';
@State area: string = '选择地区'
@State alphabetIndex: number = 0
@State location: boolean = true
private tabValue: string[] = ['A', 'B', 'C', 'F', 'G', 'H', 'J', 'L', 'N', 'Q', 'S', 'T', 'X', 'Y', 'Z']
private scroller: Scroller = new Scroller()
private controller: CustomDialogController
private provincesStringArray: string[] = [] //全部省份
@Link province: string; //单个省份
@Link positionA: string; //地址
@State tempArea: string = "这里显示选中的地区"; //临时地区
private zhiXiaCity: string[] = ['北京', '天津', '上海', '重庆']; //四个直辖市
build() {
Column {
Row {
Button(this.tempArea,
{ type: ButtonType.Normal, stateEffect: true })
.fontSize(14)
.fontColor(Color.White)
.layoutWeight(1)
.height(40)
Button("确定",
{ type: ButtonType.Normal, stateEffect: true })
.fontSize(14)
.layoutWeight(1)
.height(40)
.backgroundColor(Color.Blue)
.onClick(() => {
this.positionA = this.tempArea;
this.province = this.tempArea;
this.controller.close()
})
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height(40)
.borderWidth(1)
Column () {
Stack ({ alignContent: Alignment.End }) {
Column () {
//列表内容-------------------------------------------
List ({ space: 15, initialIndex: 0, scroller: this.scroller }) {
LazyForEach(new MyDataSource(listData), (firstItem) => {
ListItem() {
Column () {
Text(`${firstItem.name}`) //字母A B C D ...
.height(25)
.fontSize(24)
.fontColor('#000000')
.width('100%')
.margin({ top: 10 })
Divider() //分割线
.strokeWidth(0.8)
.color('#000000')
.opacity(0.2)
.margin({ right: 10, top: 10 })
ForEach(firstItem.province, (item, index) => {
Text(`${item.name === undefined ? item : item.name}`) //省
.height(20)
.fontSize(18)
.fontColor(Color.Blue)
.width('100%')
.margin({ top: 10 })
.onClick(() => {
if (this.isProvince === item.name) {
this.isProvince = ''
} else {
this.isProvince = item.name === undefined ? item : item.name
}
})
if (this.isProvince === item.name) { //比较省名称
List () {
ForEach(item.city, (itemA, indexA) => {
ListItem () {
Column () {
//市
Text(`${itemA.name === undefined ? itemA : itemA.name}`)
.width('100%')
.height(20)
.fontSize(16)
.margin({ top: 4 })
.onClick(() => {
if (this.isCityAA === itemA.name) {
this.isCityAA = ''
} else {
this.isCityAA = itemA.name === undefined ? itemA : itemA.name
}
})
if (this.isCityAA === itemA.name) { //比较名称
//地区-------------------------------------
Grid () {
ForEach(itemA.area, (areaName) => {
GridItem () {
Text(`${areaName}`)
.margin({ top: 10, bottom: 10 })
.fontSize(14)
.maxLines(5)
.fontColor(Color.White)
.borderRadius(5)
.padding(5)
.backgroundColor(Color.Blue)
.onClick(() => {
var isZhiXiaCity = false; //是否是直辖市
var tempProvince = `${item.name}`; //省一级（含直辖市）
//和直辖市数组进行比较，判断是否是直辖市
for (var index = 0; index < this.zhiXiaCity.length; index++) {
const element = this.zhiXiaCity[index];
if (tempProvince === element) { //则代表市四个直辖市中的一个
isZhiXiaCity = true; //是直辖市
break;
}
}
if (isZhiXiaCity) { //如果是直辖市
this.tempArea = `${itemA.name}${areaName}`;
} else { //如果不是直辖市
this.tempArea = `${item.name}${itemA.name}${areaName}`;
}
})
}
})
}
// .backgroundColor(Color.Green)
.margin({ right: 10, top: 10 })
.width('90%')
.height('100%')
.columnsTemplate('1fr 1fr 1fr 1fr')
//地区-------------------------------------
}
}
}
})
}
.height('100%')
.width('100%')
}
})
}
}
})
}
.height('85%')
.width('100%')
.edgeEffect(EdgeEffect.None)
.listDirection(Axis.Vertical)
.onScrollIndex((firstIndex: number) => {
this.alphabetIndex = firstIndex
})
//列表内容-------------------------------------------
}
Column () {
AlphabetIndexer({ arrayValue: this.tabValue, selected: this.alphabetIndex })
.height('100%')
.font({ size: 13 })
.popupColor('#FFFFFF') // 弹出框颜色
.selectedBackgroundColor(0xCCCCCC) // 选中背景颜色
.popupBackground(0xCCCCCC) // 弹出框背景颜色
.usingPopup(true) // 是否显示弹出框
.selectedFont({ size: 16, style: FontStyle.Normal }) // 选中的样式
.selectedColor('#969494') // 选中颜色
.popupFont({ size: 20, weight: FontWeight.Bolder }) // 弹出框的演示
.alignStyle(this.location ? IndexerAlign.Right : IndexerAlign.Left)
.onSelect((TabIndex: number) => {
this.scroller.scrollToIndex(TabIndex)
})
}
.position({ x: '100%' })
.margin({ top: 4 })
.height(500)
}
}
}
.width('90%')
.height('90%')
.borderRadius(8)
.backgroundColor('#ffffffff')
}
}
综合借鉴借鉴了网上经验，综合改写了下，可用，尚不完善，大家根据需要视情况修改使用。
完整代码请移步下载
更多关于HarmonyOS 鸿蒙Next 省市区三级选择功能分享ArkTS语言的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于HarmonyOS 鸿蒙Next 省市区三级选择功能分享ArkTS语言的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
针对帖子标题“HarmonyOS 鸿蒙Next 省市区三级选择功能分享ArkTS语言”的问题，以下是一个简洁的回答：
在HarmonyOS鸿蒙Next系统中，使用ArkTS语言实现省市区三级选择功能，可以通过以下方式进行：
首先，你需要定义数据结构来存储省、市、区的信息。这可以通过JSON格式的数据或者自定义的类来实现。确保数据结构中包含必要的层级关系，如省包含市，市包含区。
接着，在ArkTS中，你可以使用组件（Component）来构建界面。为每个层级（省、市、区）创建一个选择组件，如下拉列表（Dropdown）或选择器（Picker）。这些组件应能够响应用户的选择事件。
当用户选择一个省时，触发事件更新市的列表；同样，当用户选择一个市时，更新区的列表。这可以通过监听组件的选择事件，并根据选择结果动态更新相关组件的数据源来实现。
为了提升用户体验，你可以在组件上添加一些交互效果，如加载动画，在用户选择时显示，以提示数据正在更新。
最后，确保你的应用能够正确处理数据更新和组件渲染，以避免界面卡顿或数据不一致的问题。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，
