UI5 SingleSelectMaster模式下ListItemType.Inactive元素异常高亮及hover问题

嘿，我懂你的困扰——虽然Inactive类型的ListItem不会触发itemPress事件，但在SingleSelectMaster模式下还是会被选中高亮，还有烦人的hover效果，这确实不符合预期！我来给你两个关键步骤搞定它：

1. 阻止Inactive项被选中（去掉高亮） #

UI5里的selectable属性是控制ListItem能否被选中的核心，默认情况下即使是Inactive类型，它依然是可选中状态。所以你只需要给那些Inactive的ListItem加上selectable="false"：

<List itemPress="toDetailPage" mode="SingleSelectMaster" >
  <items>
    <!-- Active项保持原有配置 -->
    <CustomListItem type="Active">
      <HBox class="sapUiSmallMargin">
        <!-- 你的Active项内容 -->
      </HBox>
    </CustomListItem>
    <!-- Inactive项添加selectable="false" -->
    <CustomListItem type="Inactive" selectable="false">
      <HBox class="sapUiSmallMargin">
        <!-- 你的Inactive项内容 -->
      </HBox>
    </CustomListItem>
  </items>
</List>

加上这个属性后，Inactive项就不会被选中，自然也就不会出现高亮状态了。

2. 去掉Inactive项的hover效果 #

UI5默认给ListItem加了hover样式，我们可以通过自定义CSS类来覆盖它。首先给Inactive项加一个自定义类，比如no-hover-item：

<CustomListItem type="Inactive" selectable="false" class="no-hover-item">
  <!-- 内容 -->
</CustomListItem>

然后在你的视图对应的CSS文件（比如viewName.view.css）里添加以下样式：

.no-hover-item:hover {
  background-color: transparent !important;
  /* 或者设置成和列表默认背景一致的颜色，避免hover时突兀变色 */
}

这样就能完全消除Inactive项的hover效果了。

动态绑定场景的处理 #

如果你的ListItem类型是通过模型动态绑定的，别忘了同步绑定selectable和class属性：

<CustomListItem 
  type="{= ${yourModel>/itemType} === 'Inactive' ? 'Inactive' : 'Active' }"
  selectable="{= ${yourModel>/itemType} !== 'Inactive' }"
  class="{= ${yourModel>/itemType} === 'Inactive' ? 'no-hover-item' : '' }"
>
  <!-- 动态内容 -->
</CustomListItem>

这样就能根据数据自动处理每一项的选中状态和hover效果啦！

内容的提问来源于stack exchange，提问作者Flo