如何隐藏一组 UI 组件答案

【问题标题】：How hide a group of UI component如何隐藏一组 UI 组件
【发布时间】：2016-01-12 09:37:18
【问题描述】：

我有一组组件（例如Label+TextArea）

<Label text="Country"/>
<TextArea value="{model>/country}"/>

现在，为了隐藏组，我不得不为每个组件设置 visible 属性

<Label visible="false" text="Country" />
<TextArea visible="false" value="{model>/country}"/>

我想通过一组属性隐藏整个组，例如通过具有属性 visible 的“容器”来隐藏整个组

<Container visible="false">
    <Label text="Country" />
    <TextArea value="{model>/country}"/>
</Container>

例如，我有一个VerticalLayout，其中包含一个Panel，其中包含一个SimpleForm。 SimpleForm 包含 4 对 Label-TextArea 并且我想要第 1 和第 2 对组合而不添加额外的边距或其他 ui 属性

【问题讨论】：

Label 和 TextArea 之类的东西是“控件”而不是“组件”。

标签： xml sapui5

【解决方案1】：

UI5 中有各种可用的容器控件。 Panel、FlexBox、VerticalLayout、HorizontalLayout、SimpleForm等

<Panel visible="false">
  <content>
    <Label text="Country" />
    <TextArea value="{model>/country}"/>
  </content>
</Panel>

作为替代和更好的方法，而不是将控件包装在父控件中，您可以创建一个模型来维护控件的可见性状态。

var oModel = new sap.ui.model.json.JSONModel({group1Visibile : false});
<view-instance>.setModel(oModel,"controlStates");

<Label text="Country" visible ="{controlStates>/group1Visible}"/>
<TextArea value="{model>/country}" visible ="{controlStates>/group1Visible}"/>

只要对模型的值进行操作，就会反映到所有的控件上。

【讨论】：

Panel、FlexBox、VerticalLayout、HorizontalLayout、SimpleForm等，添加额外的ui样式（例如添加边距）。例如，我有一个 VerticalLayout，其中包含一个 Panel，其中包含一个 SimpleForm。 SimpleForm 包含 4 对 Label-TextArea 并且我想要第 1 和第 2 对组而不添加额外的边距或其他 ui 属性
您可以添加 css 类 .sapUiNoContentPadding、.sapUiNoMargin 以删除边距和填充。 openui5.hana.ondemand.com/explored.html?sap-ui-debug=true#/…

【解决方案2】：

另一种选择是使用 Javascript 和样式类（对于 javascript 视图，我不太使用 xml）：

var oLabel = new sap.m.Label({
    text:"Text", 
    labelFor: oText}).addStyleClass("hideGroup");
var oText = new sap.m.Text({
    text: "Hello World!"
}).addStyleClass("hideGroup");

var oButton = new sap.m.Button({
    text: "Press to Hide/Show Group",
    press: function(){
        var els = document.getElementsByClassName("hideGroup");
        for(var i=0; i<els.length; ++i){
            var s = els[i].style;
            s.visibility = s.visibility==='visible' ? 'hidden' : 'visible';
        }
    }
});

这是一个有效的 JSBIN 示例：LINK 这只是一个示例，您可以根据自己的需要进行调整。

欲了解更多信息，请查看此主题：LINK

【讨论】：