UI5 添加/删除/更改响应式拆分器拆分窗格答案

【问题标题】：UI5 Add/remove/change responsive splitter split paneUI5 添加/删除/更改响应式拆分器拆分窗格
【发布时间】：2018-01-18 00:17:11
【问题描述】：

我正在尝试修改视图中的拆分窗格。

我的观点是这样的：

<mvc:View 
    controllerName="svm.controller.Controller" 
    xmlns:l="sap.ui.layout" 
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns:core="sap.ui.core"
    xmlns="sap.m">
    <l:ResponsiveSplitter defaultPane="default" width="100%" height="100%">
        <l:PaneContainer>
            <l:SplitPane id="default" height="100%">
                <Panel headerText="header">
                </Panel>
            </l:SplitPane>
            <l:SplitPane height="100%">
                <Panel headerText="header2">
                </Panel>
            </l:SplitPane>
        </l:PaneContainer>
    <l:ResponsiveSplitter>
</mvc:View>

我要做的第一件事是更改窗格的起始宽度。修改面板的大小很容易，但面板不会更改为与其面板相同的宽度。将窗格设置为 width="20%" 和 width="80%" 不会移动拆分器开始的位置。

我还希望我的一个窗格在应用程序启动时不存在，并且基本上可以在切换时添加和删除，包括它的面板和里面的所有内容。

有没有办法用 javascript 或最好用 xml 来做这些事情？

【问题讨论】：

标签： javascript xml sapui5

【解决方案1】：

这并不容易。你必须使用SplitterLayoutData（这是实验性的）

将以下行添加到控制器的 onInit() 函数中：

        var oSplitterLayoutData= new SplitterLayoutData({size: "30%"});
        var oPane= this.byId("default");
        oPane.setLayoutData(oSplitterLayoutData);

或在 XML 视图的面板中：

    <mvc:View
        controllerName="sap.ui.demo.basicTemplate.controller.App"
            xmlns:l="sap.ui.layout"
            xmlns:mvc="sap.ui.core.mvc"
            xmlns:core="sap.ui.core"
            xmlns="sap.m">
        <l:ResponsiveSplitter defaultPane="default" width="100%" height="100%">
        <l:PaneContainer>
            <l:SplitPane id="default" height="100%">
                <Panel headerText="header">
                    <layoutData><l:SplitterLayoutData size="30%" /></layoutData>
                </Panel>
            </l:SplitPane>
            <l:SplitPane height="100%">
                <Panel headerText="header2">
                </Panel>
            </l:SplitPane>
        </l:PaneContainer>
        </l:ResponsiveSplitter>
    </mvc:View>

【讨论】：