灵活的列布局箭头无法正常工作

Question

我创建了一个灵活的列布局，不幸的是它不能正常工作。 当我想展开左侧部分时，我必须点击两次箭头而不是一次：

我想弄清楚，但不幸的是找不到错误。

灵活的列布局视图：

<mvc:View xmlns="sap.f" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m" displayBlock="true" controllerName="io.example.fclpoc.controller.App"
    height="100%">
    <FlexibleColumnLayout id="fcl" stateChange="onStateChanged" layout="{/layout}" backgroundDesign="Solid"></FlexibleColumnLayout>
</mvc:View>

和控制器：

sap.ui.define([
    "sap/ui/model/json/JSONModel",
    "sap/ui/core/ResizeHandler",
    "sap/ui/core/mvc/Controller",
    "sap/f/FlexibleColumnLayout"
], function (JSONModel, ResizeHandler, Controller, FlexibleColumnLayout) {
    "use strict";

    return Controller.extend("io.example.fclpoc.controller.App", {
        onInit: function () {
            this.oRouter = this.getOwnerComponent().getRouter();
            this.oRouter.attachRouteMatched(this.onRouteMatched, this);
            this.oRouter.attachBeforeRouteMatched(this.onBeforeRouteMatched, this);
        },

        onBeforeRouteMatched: function (oEvent) {

            var oModel = this.getOwnerComponent().getModel();
            var sLayout = oEvent.getParameters().arguments.layout;

            // If there is no layout parameter, query for the default level 0 layout (normally OneColumn)
            if (!sLayout) {
                var oNextUIState = this.getOwnerComponent().getHelper().getNextUIState(0);
                sLayout = oNextUIState.layout;
            }

            // Update the layout of the FlexibleColumnLayout
            if (sLayout) {
                oModel.setProperty("/layout", sLayout);
            }
            
        },

        _updateLayout: function (sLayout) {
            var oModel = this.getOwnerComponent().getModel();

            // If there is no layout parameter, query for the default level 0 layout (normally OneColumn)
            if (!sLayout) {
                var oNextUIState = this.getOwnerComponent().getHelper().getNextUIState(0);
                sLayout = oNextUIState.layout;
            }

            // Update the layout of the FlexibleColumnLayout
            if (sLayout) {
                oModel.setProperty("/layout", sLayout);
            }
        },

        onRouteMatched: function (oEvent) {
            var sRouteName = oEvent.getParameter("name"),
                oArguments = oEvent.getParameter("arguments");

            this._updateUIElements();

            // Save the current route name
            this.currentRouteName = sRouteName;
        },

        onStateChanged: function (oEvent) {
            var bIsNavigationArrow = oEvent.getParameter("isNavigationArrow"),
                sLayout = oEvent.getParameter("layout");

            this._updateUIElements();

            // Replace the URL with the new layout if a navigation arrow was used
            if (bIsNavigationArrow) {
                this.oRouter.navTo(this.currentRouteName, {
                    layout: sLayout
                }, true);
            }
        },

        // Update the close/fullscreen buttons visibility
        _updateUIElements: function () {
            var oModel = this.getOwnerComponent().getModel();
            var oUIState = this.getOwnerComponent().getHelper().getCurrentUIState();
            oModel.setData(oUIState);
        },

        onExit: function () {
            this.oRouter.detachRouteMatched(this.onRouteMatched, this);
            this.oRouter.detachBeforeRouteMatched(this.onBeforeRouteMatched, this);
        }
    });
});

我还查看了调试控制台：

但是没有发生错误。我还将我的代码与https://sapui5.hana.ondemand.com/#/entity/sap.f.FlexibleColumnLayout/sample/sap.f.sample.FlexibleColumnLayoutWithTwoColumnStart/code/webapp/controller/FlexibleColumnLayout.controller.js 进行了比较，但找不到差异。

我做错了什么？

可以在这里找到应用程序https://github.com/softshipper/fclpoc

更新

我已经在我的边缘浏览器中运行了该应用程序，但它没有安装任何扩展程序。行为是相同的。 这是边缘的控制台输出：

Answer 1

这不是对“我的应用为什么要这样做”这个问题的直接回答。更多的是自助。

基本上，如果您在 App 控制器中的每个方法中设置一个断点，您将看到布局首先移动到正确的位置，然后再移动到错误的位置（它发生得如此之快以至于没有调试器你看不到）。

布局在整个过程中被设置多次。有时改变什么都没有，有时没有。最后，您的一种方法设置了错误的布局。

PS：你有一个语义错误，而不是句法错误（应用按照你的要求去做），所以控制台中没有错误。