You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

SAPUI5中ObjectAttribute文本换行显示问题及替代方案

解决SAP UI5 ObjectAttribute文本无法换行的问题

问题回顾

你在SAP UI5应用里尝试用ObjectAttribute展示长文本,希望文本能自动换行,但实际运行时文本被截断了。你原本的代码是这样的:

<List id="__listObjectAttributes" noDataText="Drop list items here" headerText="Shipping Information" items="{Shipments}">
 <items>
 <ObjectListItem id="__listItemShipments" title="{ShipmentTxt}">
 <attributes>
 <ObjectAttribute id="__attributeShipmentId" title="Shipment #" text="{Id}"/>
 <ObjectAttribute id="__attributeShipmentCode" title="Shipment Code" text="{ShipCd}"/>
 <ObjectAttribute id="__attributeShipmentLongText" title="Long Text" text="{LongText}" binding="{ShipmentLongText}"/>
 </attributes>
 </ObjectListItem>
 </items>
</List>

你也查过相关资料,发现关于ObjectAttribute能否换行的说法不一致,现在想知道如果这条路走不通,有没有其他办法在列表里展示可换行的长文本。

靠谱解决方案

没错,ObjectAttribute受限于自身的设计(包括Fiori设计规范的约束),确实很难实现文本换行。这里推荐用**CustomListItem搭配SimpleForm**的方案,这是目前实现需求的最佳方式。

最终实现代码

首先是列表部分的修改:

<List id="__listObjectAttributes" noDataText="Drop list items here" headerText="Shipping Information" items="{Shipments}">
 <items>
 <CustomListItem id="__listItemShipments">
 <content>
 <form:SimpleForm id="__formShipmentList" editable="true" layout="GridLayout" labelMinWidth="100">
 <form:content>
 <!--Id-->
 <Label id="__labelShipmentId" text="Id"/>
 <Text id="__textShipmentId" text="{Id}"/>
 <!--Shipment Code-->
 <Label id="__labelShipmentCode" text="Shipment Code"/>
 <Text id="__textShipmentCode" text="{ShipCd}"/>
 <!--Long text-->
 <Label id="__labelShipmentLongText" text="LongText"/>
 <Text id="__textShipmentLongText" text="{Longtext}" binding="{ShipmentLongText}"/>
 </form:content>
 </form:SimpleForm>
 </content>
 </CustomListItem>
 </items>
</List>

然后需要在你的视图头部引入sap.ui.layout.form命名空间,这样才能使用SimpleForm控件:

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns:form="sap.ui.layout.form" controllerName="shipments.controller.ShipmentDetail">

方案说明

这个方案的核心是用Text控件替代ObjectAttribute——Text控件默认支持文本自动换行,再通过SimpleFormGridLayout来模拟原ObjectListItem的布局结构,既能满足长文本换行的需求,又能保证UI风格和原列表保持一致,同时还能灵活调整布局细节(比如通过labelMinWidth控制标签宽度)。

内容的提问来源于stack exchange,提问作者K. Peters

火山引擎 最新活动