Question

我有一组组件（例如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属性

Answer 1

UI5中提供了各种容器控件。 Panel，FlexBox，VerticalLayout，HorizontalLayout，SimpleForm等。

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

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

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}"/>

只需操纵模型的值就会反映到所有控件上。

Answer 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

如何隐藏一组UI组件

2 个答案: