38x layout uiTransform cannot vary width and height based on sub objects

cocos/ui/layout.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /*
  Copyright (c) 2013-2016 Chukong Technologies Inc.
  Copyright (c) 2017-2023 Xiamen Yaji Software Co., Ltd.
@@ -223,7 +224,7 @@
      * @zh
      * 横向对齐。在 Type 为 Horizontal 时按同个方向固定起始位置排列。
      */
     @visible(function (this: Layout): boolean {
         return this._layoutType === LayoutType.HORIZONTAL;
     })
     @tooltip('i18n:layout.align_horizontal')
@@ -247,7 +248,7 @@
      * @zh
      * 纵向对齐。在 Type 为 Horizontal 或 Vertical 时按同个方向固定起始位置排列。
      */
     @visible(function (this: Layout): boolean {
         return this._layoutType === LayoutType.VERTICAL;
     })
     @tooltip('i18n:layout.align_vertical')
@@ -290,7 +291,7 @@
      * 缩放模式。
      */
     @type(LayoutResizeMode)
     @visible(function (this: Layout): boolean {
         return this._layoutType !== LayoutType.NONE;
     })
     @tooltip('i18n:layout.resize_mode')
@@ -313,7 +314,7 @@
      * @zh
      * 每个格子的大小，只有布局类型为 GRID 的时候才有效。
      */
     @visible(function (this: Layout) {
         if (this.type === LayoutType.GRID && this._resizeMode === LayoutResizeMode.CHILDREN) {
             return true;
         }
@@ -550,7 +551,7 @@
      * 容器内布局约束。
      */
     @type(LayoutConstraint)
     @visible(function (this: Layout): boolean {
         return this.type === LayoutType.GRID;
     })
     @tooltip('i18n:layout.constraint')
@@ -574,7 +575,7 @@
      * @zh
      * 容器内布局约束使用的限定值。
      */
     @visible(function (this: Layout): boolean {
         return this._constraint !== LayoutConstraint.NONE;
     })
     @tooltip('i18n:layout.constraint_number')
@@ -681,6 +682,7 @@
     protected _childrenDirty = false;
     protected _usefulLayoutObj: UITransform[] = [];
     protected _init = false;
+    protected bottomBoundaryOfLayout = 0;
 
     /**
      * @en
@@ -825,6 +827,7 @@
             newChildWidth = (baseWidth - paddingH - (activeChildCount - 1) * this._spacingX) / activeChildCount;
         }
 
+        let maxRowWidth = baseWidth;
         const children = this._usefulLayoutObj;
         for (let i = 0; i < children.length; ++i) {
             const childTrans = children[i];
@@ -886,10 +889,29 @@
             }
 
             nextX += rightBoundaryOfChild;
+            // If the position of the child node is greater than the width of the container,
+            // then the baseWidth plus the difference greater than is the layout width.
+            if (Math.abs(nextX) > baseWidth / 2 && applyChildren) {
+                maxRowWidth = Math.abs(sign * baseWidth / 2 + nextX);
+            }
         }
 
         rowMaxHeight = Math.max(rowMaxHeight, tempMaxHeight);
         const containerResizeBoundary = Math.max(maxHeight, totalHeight + rowMaxHeight) + this._getPaddingV();
+        // if width changes, adjust the container again
+        if (this._resizeMode === LayoutResizeMode.CONTAINER && this._layoutType === LayoutType.GRID
+            // eslint-disable-next-line eqeqeq
+            && (maxRowWidth != baseWidth || (containerResizeBoundary != trans.height && applyChildren))
+        ) {
+            let ySign = 1;
+            if (this._verticalDirection === LayoutVerticalDirection.TOP_TO_BOTTOM) {
+                ySign = -1;
+            }
+            this.bottomBoundaryOfLayout = (Math.abs(ySign - 1) / 2 - layoutAnchor.y) * containerResizeBoundary;
+            this.node._uiProps.uiTransformComp!.setContentSize(maxRowWidth, containerResizeBoundary);
+            // Because the container width changes, the position of the child will also change, and it needs to be adjusted.
+            return this._doLayoutHorizontally(maxRowWidth, true, fnPositionY, true);
+        }
         return containerResizeBoundary;
     }
 
@@ -993,33 +1015,24 @@
         const baseWidth = layoutSize.width;
 
         let sign = 1;
-        let bottomBoundaryOfLayout = -layoutAnchor.y * layoutSize.height;
+        this.bottomBoundaryOfLayout = -layoutAnchor.y * layoutSize.height;
         let paddingY = this._paddingBottom;
         if (this._verticalDirection === LayoutVerticalDirection.TOP_TO_BOTTOM) {
             sign = -1;
-            bottomBoundaryOfLayout = (1 - layoutAnchor.y) * layoutSize.height;
+            this.bottomBoundaryOfLayout = (1 - layoutAnchor.y) * layoutSize.height;
             paddingY = this._paddingTop;
         }
 
-        const fnPositionY = (child: Node, childTrans: UITransform, topOffset: number): number => bottomBoundaryOfLayout + sign * (topOffset + (1 - childTrans.anchorY) * childTrans.height * this._getUsedScaleValue(child.scale.y) + paddingY);
+        const fnPositionY = (child: Node, childTrans: UITransform, topOffset: number): number => this.bottomBoundaryOfLayout + sign * (topOffset + (1 - childTrans.anchorY) * childTrans.height * this._getUsedScaleValue(child.scale.y) + paddingY);
 
         let newHeight = 0;
         if (this._resizeMode === LayoutResizeMode.CONTAINER) {
             // calculate the new height of container, it won't change the position of it's children
             newHeight = this._doLayoutHorizontally(baseWidth, true, fnPositionY, false);
-            bottomBoundaryOfLayout = -layoutAnchor.y * newHeight;
-
-            if (this._verticalDirection === LayoutVerticalDirection.TOP_TO_BOTTOM) {
-                sign = -1;
-                bottomBoundaryOfLayout = (1 - layoutAnchor.y) * newHeight;
-            }
+            this.bottomBoundaryOfLayout = (Math.abs(sign - 1) / 2 - layoutAnchor.y) * newHeight;
         }
 
         this._doLayoutHorizontally(baseWidth, true, fnPositionY, true);
-
-        if (this._resizeMode === LayoutResizeMode.CONTAINER) {
-            this.node._getUITransformComp()!.setContentSize(baseWidth, newHeight);
-        }
     }
 
     protected _doLayoutGridAxisVertical (layoutAnchor: Vec2 | Readonly<Vec2>, layoutSize: Size): void {