HarmonyOS 鸿蒙Next 列表选择弹窗 (ActionSheet)怎么设置sheets里每行的高度等样式
HarmonyOS 鸿蒙Next 列表选择弹窗 (ActionSheet)怎么设置sheets里每行的高度等样式 列表选择弹窗 (ActionSheet)怎么设置sheets里每行的高度等样式
当前不能直接设置高度,可以先通过换行符或者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或其他布局组件来达到目的。
具体操作如下:
-
自定义布局:首先,你需要创建一个自定义的布局文件,比如使用
List
组件,并在其中定义每行的样式,包括高度、字体大小、颜色等。 -
设置样式:在自定义布局中,通过CSS样式或直接在布局文件中设置组件的属性来调整每行的高度。例如,可以使用
height
属性来设置行高。 -
使用ActionSheet展示自定义布局:在ActionSheet触发时,展示这个自定义布局而不是默认的ActionSheet项。这可能需要一些编程逻辑来处理点击事件和显示逻辑。
-
适配和测试:确保自定义布局在不同屏幕尺寸和分辨率下都能正确显示,并进行必要的适配工作。
如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html,