如何在 SAPUI5 中实现编辑模式？答案

【问题标题】：How to implement an editing mode in SAPUI5?如何在 SAPUI5 中实现编辑模式？
【发布时间】：2023-01-23 20:10:09
【问题描述】：

我目前正在 sapui5 应用程序中构建一个动态表。因此，我正在实施一种编辑模式，该模式通过单击按钮触发。要在查看模式和编辑模式之间更改表格单元格，我定义了以下单元格：

<items>
  <ColumnListItem>
    <cells>
      <Text text="{Name}" visible="{= !${/editMode}}"/>
      <Input value="{Name}" visible="{= ${/editMode}}" change="onChangeName"/>
      <Text .../>
      <Input .../>
          ...
    </cells>
  </ColumnListItem>
</items>

不幸的是，我的代码没有按预期工作。例如，不是第 1 列在“文本”和“输入”节点之间切换，而是文本节点显示在一列中，输入节点显示在下一列中。如何获得同一列中的两个节点？

查看模式（文字文字……）

编辑模式（输入值...）

【问题讨论】：

这回答了你的问题了吗？ How to switch views on demand
这个答案stackoverflow.com/a/42799046/5846045 可能有助于切换到“编辑”视图/部分/块。请参阅“过孔块”部分。
@BoghyonHoffmann 感谢您的评论！你是说我应该为“查看模式”构建一个块，为“编辑模式”构建一个块？
没错，试试看，让我知道结果如何
我使用 <HBox> 标签解决了这个问题。现在我可以对同一列使用 <Input> 和 <Text> 标签。

标签： sapui5

【解决方案1】：

使用 SAPUI5 的 <HBox> 标签 (Click here for documentation) 解决了这个问题代码现在看起来像这样：

<items>
  <ColumnListItem>
    <cells>
      <HBox>
        <Text text="{Name}" visible="{= !${/editMode}}"/>
        <Input value="{Name}" visible="{= ${/editMode}}" change="onChangeName"/>
      </HBox>
      <HBox>
        <Text .../>
        <Input .../>
      </HBox>
          ...
    </cells>
  </ColumnListItem>
</items>

【讨论】：