HarmonyOS 鸿蒙Next 列表选择弹窗 (ActionSheet)怎么设置sheets里每行的高度等样式

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 列表选择弹窗 (ActionSheet)怎么设置sheets里每行的高度等样式 列表选择弹窗 (ActionSheet)怎么设置sheets里每行的高度等样式

4 回复

当前不能直接设置高度,可以先通过换行符或者icon占位方案实现

@Entry
@Component
struct ActionSheetExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('Click to Show ActionSheet')
        .onClick(() => {
          ActionSheet.show({
            title: 'ActionSheet title',
            message: 'message',
            autoCancel: true,
            confirm: {
              value: 'Confirm button',
              action: () => {
                console.log('Get Alert Dialog handled')
              }
            },
            cancel: () => {
              console.log('actionSheet canceled')
            },
            alignment: DialogAlignment.Bottom,
            offset: { dx: 0, dy: -10 },
            sheets: [
              {
                title: 'apples',
                action: () => {
                  //方案一:添加占位符 '/n'
                  console.log('apples'+'/n')
                }
              },
              {
                title: 'bananas',
                //方案二:导入图片,设置图片宽高撑出高度
                icon:$r('app.media.food'),
                action: () => {
                  console.log('bananas')
                }
              },
              {
                title: 'pears',
                action: () => {
                  console.log('pears')
                }
              }
            ]
          })
        })
    }.width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 列表选择弹窗 (ActionSheet)怎么设置sheets里每行的高度等样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个组件用起来简直一言难尽,简直不可用,如果只是一个半成品,就没有放上来的必要,自己自定义弹窗去实现

确实有同样的感觉,这个API清楚是怎么设计出来的,

在HarmonyOS鸿蒙系统中,设置ActionSheet组件里每行的高度等样式,可以通过自定义布局和样式来实现。ActionSheet本身可能不直接支持设置每行高度,但你可以通过嵌套自定义的List或其他布局组件来达到目的。

具体操作如下:

  1. 自定义布局:首先,你需要创建一个自定义的布局文件,比如使用List组件,并在其中定义每行的样式,包括高度、字体大小、颜色等。

  2. 设置样式:在自定义布局中,通过CSS样式或直接在布局文件中设置组件的属性来调整每行的高度。例如,可以使用height属性来设置行高。

  3. 使用ActionSheet展示自定义布局:在ActionSheet触发时,展示这个自定义布局而不是默认的ActionSheet项。这可能需要一些编程逻辑来处理点击事件和显示逻辑。

  4. 适配和测试:确保自定义布局在不同屏幕尺寸和分辨率下都能正确显示,并进行必要的适配工作。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部