文章目录
- 完整源码
- 整体功能说明
- 代码结构解析
- 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()方法控制弹窗唤起； - 页面采用Stack+Column底层布局，按钮固定底部展示，适配全屏页面结构。
代码结构解析
1. 模块导入
从ArkUI高级弹窗套件中引入列表单选弹窗组件：import { SelectDialog } from '@kit.ArkUI';
2. 全局状态变量
radioIndex：记录单选列表默认选中下标，初始值为0，用于弹窗初始化回显选中状态。
3. 弹窗控制器初始化
通过CustomDialogController创建弹窗控制器，builder参数绑定SelectDialog纯列表弹窗结构，统一配置弹窗标题、选中项、按钮、列表数据源。
4. 页面布局结构
- 外层 Row 铺满全屏；
- Stack 容器内部对齐底部，承载触发按钮；
- 点击按钮调用控制器
open()方法，拉起纯列表弹出框。
SelectDialog 核心参数
| 参数名称 | 类型 | 作用说明 |
|---|---|---|
| title | string | 设置纯列表弹窗顶部标题文本 |
| selectedIndex | number | 设置弹窗单选框默认选中下标，绑定外部变量可实现状态记忆 |
| confirm | Object | 底部操作按钮配置，包含按钮文案value和点击回调action |
| radioContent | Array | 单选列表数据源数组，每一项为独立单选选项 |
radioContent 单选项结构
| 字段 | 说明 |
|---|---|
| title | 列表选项展示文本 |
| action | 当前选项被点击时触发的回调，可修改选中下标、执行业务逻辑 |
总结
- SelectDialog 属于 ArkUI 高级弹窗组件，必须依赖 @kit.ArkUI 模块，低版本SDK无法使用；
- 必须配合
CustomDialogController控制器使用，通过open()方法唤起弹窗； selectedIndex绑定外部变量，可实现弹窗关闭后再次打开保留选中状态；radioContent为数组结构，支持自由扩展多条列表选项，每条选项独立配置点击事件；- 底部
confirm按钮可自定义文案与业务回调，示例为取消按钮，可修改为确定、关闭等业务文案； - 弹窗样式、单选UI样式由系统原生封装，无需自定义布局，开箱即用。
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力
