HarmonyOS鸿蒙Next中ActionSheet如何设置item样式？原生的太矮了，不方便点击

HarmonyOS鸿蒙Next中ActionSheet如何设置item样式？原生的太矮了，不方便点击如题，ActionSheet如何设置item样式？或者TextPickerDialog的range是否可以支持对象？

目前暂无相关属性可以设置，可以通过给每个item的title添加换行实现，TextPickerDialog的range不支持对象

sheets: [
  {
    title: 'apples\n',
    action: () => {
      console.log('apples')
    }
  },
  {
    title: 'bananas\n',
    action: () => {
      console.log('bananas')
    }
  },
  {
    title: 'pears\n',
    action: () => {
      console.log('pears')
    }
  }
]

更多关于HarmonyOS鸿蒙Next中ActionSheet如何设置item样式？原生的太矮了，不方便点击的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 2楼•15 天前

在HarmonyOS鸿蒙Next中，ActionSheet的item样式可以通过自定义布局和样式来实现。你可以使用ActionSheet组件，并通过setCustomView方法来设置自定义视图。以下是一个简单的示例：

创建自定义布局文件：

在resources/base/layout目录下创建一个XML布局文件，例如custom_action_sheet_item.xml，定义你想要的item样式。

<LinearLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:padding="10vp">
    <Text
        ohos:id="$+id:custom_item_text"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:text="Custom Item"
        ohos:textSize="20fp"
        ohos:textColor="#000000"
        ohos:background_element="#FFFFFF"/>
</LinearLayout>

在代码中应用自定义布局：

在Ability或Slice中，使用ActionSheet并设置自定义布局。

ActionSheet actionSheet = new ActionSheet(context);
LayoutScatter scatter = LayoutScatter.getInstance(context);
Component customView = scatter.parse(ResourceTable.Layout_custom_action_sheet_item, null, false);
actionSheet.setCustomView(customView);
actionSheet.show();

通过这种方式，你可以灵活地设置ActionSheet的item样式，使其更符合你的需求。

sinazl 3楼•15 天前

在HarmonyOS鸿蒙Next中，可以通过自定义ActionSheet的item样式来调整高度。使用@Component注解创建自定义组件，并在build方法中使用Column和Text等组件布局。通过height属性设置item高度，并利用padding或margin调整间距。示例代码如下：

@Component
struct CustomActionSheetItem {
  private text: string = "Item";

  build() {
    Column() {
      Text(this.text)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .height(60) // 设置高度
        .padding(10) // 调整内边距
    }
    .width('100%')
    .backgroundColor(Color.White)
  }
}

在ActionSheet中使用该自定义组件即可。