文章目录完整源码整体功能说明代码结构解析1. 模块导入2. 全局状态变量3. 弹窗控制器初始化4. 页面布局结构SelectDialog 核心参数radioContent 单选项结构总结完整源码import { SelectDialog } from kit.ArkUI; Entry Component struct Index { // 设置默认选中radio的index radioIndex: number 0; dialogControllerList: CustomDialogController new CustomDialogController({ builder: SelectDialog({ title: 文本标题, selectedIndex: this.radioIndex, confirm: { value: 取消, action: () {}, }, radioContent: [ { title: 文本文本文本文本文本, action: () { this.radioIndex 0 } }, { title: 文本文本文本文本, action: () { this.radioIndex 1 } }, { title: 文本文本文本文本, action: () { this.radioIndex 2 } }, ] }), }) build() { Row() { Stack() { Column() { Button(纯列表弹出框) .width(96) .height(40) .onClick(() { this.dialogControllerList.open() }) }.margin({ bottom: 300 }) } .align(Alignment.Bottom) .width(100%) .height(100%) } .backgroundImageSize({ width: 100%, height: 100% }) .height(100%) } }运行效果如图整体功能说明页面提供触发按钮「纯列表弹出框」点击可唤起SelectDialog 单选列表弹窗弹窗自带顶部标题、单选列表项、底部取消按钮支持记忆默认选中索引再次打开弹窗保留上次单选状态每一个列表选项独立绑定点击回调切换选中下标采用CustomDialogController统一管理弹窗实例通过open()方法控制弹窗唤起页面采用StackColumn底层布局按钮固定底部展示适配全屏页面结构。代码结构解析1. 模块导入从ArkUI高级弹窗套件中引入列表单选弹窗组件import { SelectDialog } from kit.ArkUI;2. 全局状态变量radioIndex记录单选列表默认选中下标初始值为0用于弹窗初始化回显选中状态。3. 弹窗控制器初始化通过CustomDialogController创建弹窗控制器builder参数绑定SelectDialog纯列表弹窗结构统一配置弹窗标题、选中项、按钮、列表数据源。4. 页面布局结构外层 Row 铺满全屏Stack 容器内部对齐底部承载触发按钮点击按钮调用控制器open()方法拉起纯列表弹出框。SelectDialog 核心参数参数名称类型作用说明titlestring设置纯列表弹窗顶部标题文本selectedIndexnumber设置弹窗单选框默认选中下标绑定外部变量可实现状态记忆confirmObject底部操作按钮配置包含按钮文案value和点击回调actionradioContentArray单选列表数据源数组每一项为独立单选选项radioContent 单选项结构字段说明title列表选项展示文本action当前选项被点击时触发的回调可修改选中下标、执行业务逻辑总结SelectDialog 属于 ArkUI 高级弹窗组件必须依赖 kit.ArkUI 模块低版本SDK无法使用必须配合CustomDialogController控制器使用通过open()方法唤起弹窗selectedIndex绑定外部变量可实现弹窗关闭后再次打开保留选中状态radioContent为数组结构支持自由扩展多条列表选项每条选项独立配置点击事件底部confirm按钮可自定义文案与业务回调示例为取消按钮可修改为确定、关闭等业务文案弹窗样式、单选UI样式由系统原生封装无需自定义布局开箱即用。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力