HarmonyOS 鸿蒙Next actionsheet如何设置按钮高度

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

HarmonyOS 鸿蒙Next actionsheet如何设置按钮高度

actionsheet如何设置按钮高度
actionsheet每个选项高度怎么设置，没在api中找到

Harmonyos Next教程
2 回复
通过换行符或者icon占位方案实现，示例demo如下： 
@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如何设置按钮高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，设置Next actionsheet按钮高度可以通过自定义布局和样式来实现。以下是实现方法：

  1. 自定义布局：

    • 在resources/layout目录下创建一个自定义布局文件（例如custom_actionsheet_item.xml），其中定义每个按钮的高度。
    • 使用CommonButton或Button组件，并通过height属性设置按钮的高度。

  2. 使用自定义布局：

    • 在Next actionsheet的代码中，通过setActionSheetItemLayoutResource()方法设置自定义布局资源ID。
    • 例如：actionsheet.setActionSheetItemLayoutResource(ResourceTable.Layout_custom_actionsheet_item);

  3. 适配样式：

    • 确保自定义布局中的按钮样式与Next actionsheet整体风格一致，可能需要调整padding、margin等属性。

示例代码片段：

<!-- custom_actionsheet_item.xml -->
<DirectionalLayout
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:orientation="horizontal"
    ohos:alignment="center">
    <Button
        ohos:id="$+id:button"
        ohos:width="0vp"
        ohos:weight="1"
        ohos:height="60vp"
        ohos:text="Button Text" />
</DirectionalLayout>

// 在代码中设置自定义布局
actionsheet.setActionSheetItemLayoutResource(ResourceTable.Layout_custom_actionsheet_item);

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

回到顶部