SAPUI5如何将时间日期文本与条件显示图标合并到表格同一列

解决方案 #

你之前给Text控件绑定icon属性不生效的原因是：SAPUI5的sap.m.Text控件本身没有icon这个配置属性，所以这个写法本身不被框架支持。

你可以通过在列单元格内嵌套布局容器的方式实现需求，具体修改如下： #

1. 修改视图代码 #

删掉原来单独的「Alerta」列，在剩下的时间日期列的单元格内用HBox水平容器同时承载时间文本和图标控件：

<Table id="tablaPacientes" class="sapUiResponsiveMargin" width="auto" alternateRowColors="true" items="{path: '/EspCoSet'}">
    <columns>
        <Column hAlign="Center" width="10%"> <!-- 宽度可根据实际展示效果自行调整 -->
            <Text text="{i18n>ColumnaHoraMedicacion}"/>
        </Column>
        <!-- 移除原来的Alerta列 -->
    </columns>
    <items>
        <ColumnListItem id="itemsPat">
            <!-- 用HBox包裹文本和图标，设置居中对齐 -->
            <HBox justifyContent="Center" alignItems="Center" width="100%">
                <Text text="{ parts: [ { path: 'Hora' }, {path: 'Fecha'} ], formatter: '.formatter.getHora' }"></Text>
                <!-- 图标放在文本后面，保留原有的可见性绑定逻辑，添加边距和文本隔开 -->
                <core:Icon src="sap-icon://syringe" visible="{= ${Chora} === true}" class="sapUiTinyMarginBegin"/>
            </HBox>
        </ColumnListItem>
    </items>
</Table>

2. 可选优化 #

如果需要调整展示顺序，比如把图标放在时间文本前面，只需要调换HBox内Icon和Text的顺序即可。如果要调整二者的间距，可以修改Icon的margin类，比如sapUiSmallMarginBegin等，或者自定义样式类。

原来的formatter里的getIcon方法如果没有其他地方使用可以直接删除，现在直接用表达式绑定visible属性就能满足「仅当Chora为true时显示图标」的需求。

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