HarmonyOS鸿蒙Next中如图，有这种底部滑出的文本选择器Demo吗？

HarmonyOS鸿蒙Next中如图，有这种底部滑出的文本选择器Demo吗？

cke_225.png


更多关于HarmonyOS鸿蒙Next中如图，有这种底部滑出的文本选择器Demo吗？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

这两个也很棒！

![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/781/678/744/0030086000781678744.20250521134405.34638655676158282933946950769184:50001231000000:2800:57A9C59094657CA45D68EE41E815D458DA0CD3A2DAD7A5ECDAA46B087926E5AD.png

更多关于HarmonyOS鸿蒙Next中如图，有这种底部滑出的文本选择器Demo吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


OpenHarmony三方库中心仓

@pura/harmony-dialog

cke_1264.png

cke_635.png

第三方库harmony-dialog有这个功能：

cke_540.png

https://blog.csdn.net/qq_32922545/article/details/144492075

这种需要封装一下TextPicker组件[1]

可以看看这个文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-methods-textpicker-dialog#%E7%A4%BA%E4%BE%8B1%E5%BC%B9%E5%87%BA%E6%96%87%E6%9C%AC%E9%80%89%E6%8B%A9%E5%BC%B9%E7%AA%97

https://gitee.com/chinasoft_ohos/WheelPicker

可以参考下，样式应该都可以自定义修改

在HarmonyOS鸿蒙Next中，可以通过Picker组件实现底部滑出的文本选择器。Picker支持多种类型的选择器，包括文本、日期和时间等。你可以使用TextPicker来创建文本选择器，并通过showPicker方法将其显示在底部。具体实现可以参考鸿蒙官方文档中的Picker组件使用示例。

在HarmonyOS Next中确实可以实现这种底部滑出的文本选择器效果。这是典型的BottomSheetDialog组件应用场景，结合Picker或TextPicker组件就能实现类似功能。

关键实现步骤：

  1. 使用BottomSheetDialog作为容器
  2. 内部嵌入TextPicker组件
  3. 设置picker的range属性为可选文本数组
  4. 添加确认/取消按钮

示例代码片段：

import { BottomSheetDialog, TextPicker } from '@ohos/common';

let dialog = new BottomSheetDialog(context);
let picker = new TextPicker();
picker.range = ['选项1', '选项2', '选项3']; // 设置选项数据
dialog.setContent(picker);
dialog.show();

这种交互模式在HarmonyOS设计规范中称为"底部操作菜单"，建议参考官方文档中关于模态交互的部分。注意要处理好选中值的回调以及对话框的关闭逻辑。

回到顶部