sap.ui.layout.SplitPane不应用SplitterLayoutData

Question

我试图将左侧sap.ui.layout.SplitPane的大小设置为：

<Page title="Where used">
  <l:ResponsiveSplitter defaultPane="default">
    <l:PaneContainer>
      <l:SplitPane requiredParentWidth="400">
        <l:layoutData>
          <l:SplitterLayoutData size="20%"/>
        </l:layoutData>
        <Panel height="100%">
          <Label text="Hello"/>
        </Panel>
      </l:SplitPane>
      <l:SplitPane requiredParentWidth="400">
        <Panel height="100%">
          <Label text="Hello"/>
        </Panel>
      </l:SplitPane>
    </l:PaneContainer>
  </l:ResponsiveSplitter>
</Page>

正如您在代码中所看到的，我试图用

<l:SplitterLayoutData size="20%"/>

但这个尺寸根本不适用。我做错了什么？

我看了这个例子：https://github.com/SAP/openui5/blob/master/src/sap.ui.layout/test/sap/ui/layout/ResponsiveSplitter.html#L106，[结果]

Answer 1

请检查这个：JS Fiddle

oResponsiveSplitter = new sap.ui.layout.ResponsiveSplitter({
    defaultPane: "defaultPane",
    rootPaneContainer: [
        new sap.ui.layout.PaneContainer({
            orientation: "Horizontal",
            panes: [
                new sap.ui.layout.PaneContainer({
                    // orientation: "Horizontal",
                    panes: [
                        new sap.ui.layout.SplitPane({
                            demandPane: true,
                            content:  new sap.m.Panel({
                                headerText: "1",
                                content: new sap.m.Text({text: lorem + lorem})
                            }),
                            requiredParentWidth: 400
                        }),
                        new sap.ui.layout.SplitPane({
                            demandPane: false,
                            content:  new sap.m.Panel({
                                headerText: "2",
                                content: new sap.m.Text({text: lorem + lorem})
                            }),
                            requiredParentWidth: 400,
                            layoutData: new sap.ui.layout.SplitterLayoutData({
                                size: "20%"
                            })
                        }),
                        new sap.ui.layout.SplitPane({
                            demandPane: true,
                            content: new sap.m.Panel({
                                headerText: "3",
                                content: new sap.m.Text({text: lorem + lorem})
                            }),
                            requiredParentWidth: 400,
                        }),
                    ]
                })
            ]
        })
    ]
});

我想这能解决你的问题。

此外，我了解在这里，当布局是水平的时，SplitterLayoutData大小可以按预期工作。