listItem组件中，当style设置为ListItemStyle.CARD时，如何修改或删除press时的样式 HarmonyOS 鸿蒙Next

listItem组件中，当style设置为ListItemStyle.CARD时，如何修改或删除press时的样式 HarmonyOS 鸿蒙Next 在默认样式中，press时，有个渐显灰色背景，如何去除或修改？

listItem 尝试在 stateStyles中设置 pressed的背景，是无法修改的。

PS: ComposeListItem、Button也有类似交互样式，stateStyles设置 pressed的背景是可以覆盖的。

3 回复

自定义样式

  • 使用通用属性：listItem 支持通用属性，如 width、height、padding、margin、backgroundColor 等，可以直接在 listItem 组件上设置这些属性来自定义外观。例如：
ListItem({ style: ListItemStyle.CARD }) {
    Text('列表项内容')
       .fontSize(16)
       .padding({ left: 16, right: 16, top: 12, bottom: 12 })
},
  • 自定义子组件样式：由于 listItem 只能包含单个子组件，可以对子组件进行详细的样式定义，如设置 Text 组件的字体、颜色，Image 组件的大小、裁剪方式等，从而实现整体样式的自定义。
ListItem({ style: ListItemStyle.CARD }) {
    Row() {
        Image($r('app.media.icon'))
           .width(40)
           .height(40)
           .margin({ right: 16 })
        Text('带图标的列表项')
           .fontSize(16)
    }
}
  • 使用样式类：可以先通过 class 定义一组样式，然后在 listItem 及其子组件上应用该样式类。
class ListItemCustomStyle {
    static containerStyle: Style = {
        padding: 16,
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#ccc'
    };
    static textStyle: Style = {
        fontSize: 16,
        fontWeight: 500
    };
}

ListItem({ style: ListItemStyle.CARD }) {
    Text('使用样式类的列表项')
       .apply(ListItemCustomStyle.textStyle)
}.apply(ListItemCustomStyle.containerStyle);

更多关于listItem组件中，当style设置为ListItemStyle.CARD时，如何修改或删除press时的样式 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢回答，press时，有个渐显灰色背景，如何去除或修改呢？

在HarmonyOS中，ListItem组件设置为ListItemStyle.CARD时，默认情况下会有按压效果。要修改或删除按压时的样式，可以通过以下方式实现：

  1. 修改按压样式：

    • 使用state_pressed属性来定义按压时的样式。你可以在ResourceTable中定义自定义的按压效果，然后在ListItem的background属性中引用。
    • 例如：
      <element name="custom_pressed_bg">
    <state_pressed>
        <background color="#FFDDDDDD"/>
    </state_pressed>
</element>
      然后在ListItem中引用：
      <ListItem
    style="ListItemStyle.CARD"
    background="$media:custom_pressed_bg"/>

  2. 删除按压样式：

    • 如果希望完全移除按压效果，可以将background设置为透明或与正常状态一致。
    • 例如：
      <ListItem
    style="ListItemStyle.CARD"
    background="#FFFFFFFF"/>

通过这种方式，你可以自定义或删除ListItem在按压时的样式。

回到顶部