Sapui5 如何根据需要切换视图

我在同一内容中有两个嵌套视图，我只想显示其中一个。当我按下一个按钮时，它应该切换到另一个。

我建议添加一个视图。稍后，在任何选定的事件上，您可以使用 sap.m.semantic.SemanticPage.removeContent（vContent）删除原始视图，sap.m.SemanticPage.addContent（）添加新视图

---

希望它能帮助您。

我建议添加一个视图。稍后，在任何选定的事件上，您可以使用 sap.m.semantic.SemanticPage.removeContent（vContent）删除原始视图，sap.m.SemanticPage.addContent（）添加新视图

---

希望它能帮助您。

让我们使用一个开关，并将其当前值保存到本地JSON模型。现在，我们将使用此值在两个视图之间切换。如果开关为true，则显示第一个视图，否则显示第二个开关

代码如下：

XML（我刚刚用文本代替视图（同样的事情））：

它是有效的。截图：

以及：

---

让我们拥有一个开关，并将其当前值保存到本地JSON模型。现在，我们将使用此值在两个视图之间切换。如果开关为true，则显示第一个视图，否则显示第二个开关

代码如下：

XML（我刚刚用文本代替视图（同样的事情））：

它是有效的。截图：

以及：

---

为了只显示一个控件（在本例中是一个子视图），我们可能会尝试先实例化所有控件，然后使用

visible

属性隐藏“不需要的”控件，但我们应该记住，这种方法可能会导致一个错误，具体取决于这些控件的复杂性和内容量。对于诸如表和视图之类的控件来说尤其如此，这就是为什么我们应该延迟地实例化此类控件，而不是同时实例化所有控件的原因

幸运的是，UI5已经内置了延迟加载功能

按需交换意见 通过NavContainer+路由器 相应地配置应用描述符文件（manifest.json）中的属性，如所示：

为此，子视图的目标对象需要三个属性：

parent

：指向定义父视图的父目标名称

controlId

：应在其中附加子视图的控件的ID。
在上面的Plunker示例中，控件是一个控件，它还提供了一个滑动动画作为奖励。可以使用

转换：“show”

关闭动画

controlAggregation

：在我们的例子中，

“页面”

（NavContainer的默认聚合）

在定义了这三个属性之后，我们可以通过调用

component.getRouter（）.navTo（“thatChildRouteName”）或导航到子视图。无论哪种方式，子视图都将被延迟创建，我们有一种灵活的方式在不同的子视图之间切换




过孔块
视图可以延迟加载，也可以使用
sap.uxap.BlockBase
切换，请参见：


例如：
文件：






尽管块通常在
sap.uxap.ObjectPageLayout
的部分中使用，但它们也可以单独使用。只需确保在引导时预加载
sap.uxap
及其属性。
为了只显示一个控件（在本例中是一个子视图），我们可能会尝试先实例化所有控件，然后使用
visible
属性隐藏“不需要的”但是我们应该记住，这种方法可能会导致一个错误，这取决于这些控件的复杂性和内容量。对于诸如表和视图之类的控件来说尤其如此，这就是为什么我们应该延迟地实例化此类控件，而不是同时实例化所有控件的原因

幸运的是，UI5已经内置了延迟加载功能

按需交换意见
通过NavContainer+路由器
相应地配置应用描述符文件（manifest.json）中的属性，如所示：

为此，子视图的目标对象需要三个属性：

parent
：指向定义父视图的父目标名称
controlId
：应在其中附加子视图的控件的ID。

在上面的Plunker示例中，控件是一个控件，它还提供了一个滑动动画作为奖励。可以使用
转换：“show”
关闭动画
controlAggregation
：在我们的例子中，
“页面”
（NavContainer的默认聚合）
在定义了这三个属性之后，我们可以通过调用
component.getRouter（）.navTo（“thatChildRouteName”）或导航到子视图。无论哪种方式，子视图都将被延迟创建，我们有一种灵活的方式在不同的子视图之间切换




过孔块
视图可以延迟加载，也可以使用
sap.uxap.BlockBase
切换，请参见：


例如：
文件：






尽管块通常在
sap.uxap.ObjectPageLayout
的部分中使用，但它们也可以单独使用。只需确保在引导时预加载
sap.uxap
及其组件。
此按钮是在嵌套视图内部还是外部？请尝试隐藏视图。在应用程序启动时保持可见视图，并隐藏另一个视图。当您单击按钮时，隐藏当前一个并使其可见隐藏一个。sap.ui.getCore（）.byId（“viewId”）.setVisible（false）通过这种方式或通过这种方式。getView（）.byId（“viewId”）.setVisible（false）。加载视图时，请注意不要同时实例化所有视图。看到此按钮在嵌套视图内还是在嵌套视图外了吗？请尝试隐藏视图。在应用程序启动时，保持可见视图，以显示要显示的内容
        <Switch state='{/showFirstView}' />
        <Text text='TExt 1' visible='{/showFirstView}' />
        <Text text='TExt 2' visible='{=!${/showFirstView}}' />

onInit: function() {
        var model = new sap.ui.model.json.JSONModel({showFirstView:true});
        this.getView().setModel(model);
    },