@cc-component/cc-ex-component 1.1.6 → 1.1.7

package/assets/lib/collectView/lib_collect/yx-flow-layout.ts

@@ -0,0 +1,909 @@
+import { _decorator, math, UITransform } from 'cc';
+import { YXBinaryLayout, YXCollectionView, YXEdgeInsets, YXIndexPath, YXLayoutAttributes } from './yx-collection-view';
+
+const _rectOut = new math.Rect()
+
+enum _yx_flow_layout_alignment {
+
+    /**
+     * 节点在所处行/列内居中
+     */
+    CENTER,
+
+    /**
+     * 这个配置表示向前对齐，节点会向排列开始的方向对齐，具体表现为:  
+     * 当列表为垂直方向列表时，如果节点排列方向是由上至下排列的，这个值就代表上对齐，如果节点排列方向是由下至上排列的，这个值就代表下对齐    
+     * 当列表为水平方向列表时，如果节点排列方向是由左至右排列的，这个值就代表左对齐，如果节点排列方向是由右至左排列的，这个值就代表右对齐    
+     */
+    FORWARD,
+
+    /**
+     * 这个配置表示向后对齐，具体表现跟 FORWARD 相反  
+     */
+    BACKWARD,
+}
+
+
+enum _yx_flow_layout_priority {
+
+    /**
+     * 以 spacing 配置为准，弱化 sectionInset 配置  
+     */
+    CENTER,
+
+    /**
+     * 以 sectionInset 配置为准，弱化 spacing 配置  
+     */
+    SIDE,
+
+    /**
+     * 以 sectionInset.left 为准，弱化 right 配置  
+     * 仅支持垂直滚动列表  
+     */
+    LEFT,
+
+    /**
+     * 以 sectionInset.right 为准，弱化 left 配置  
+     * 仅支持垂直滚动列表  
+     */
+    RIGHT,
+
+    /**
+     * 以 sectionInset.top 为准，弱化 bottom 配置  
+     * 仅支持水平滚动列表  
+     */
+    TOP,
+
+    /**
+     * 以 sectionInset.bottom 为准，弱化 top 配置  
+     * 仅支持水平滚动列表  
+     */
+    BOTTOM,
+}
+
+enum _yx_flow_layout_reverse_mode {
+
+    /**
+     * 默认方案  
+     * 水平排列方向为从左至右排列  
+     * 垂直排列方向为从上至下排列  
+     */
+    NONE = 0,
+
+    /**
+     * 这个标识会将水平排列方向变为从右至左排列  
+     */
+    HORIZONTAL = 1 << 0,
+
+    /**
+     * 这个标识会将垂直排列方向变为从下至上排列  
+     */
+    VERTICAL = 1 << 1,
+}
+
+/**
+ * flow-layout 约定了每个区允许配置一个区头和一个区尾  
+ * 设置 sectionHeaderSize 开启区头  
+ * 设置 sectionFooterSize 开启区尾  
+ * 通过 YXCollectionView 的 supplementaryForItemAt 返回区头/区尾对应的节点  
+ * 
+ * 在使用列表的补充视图 (supplementary) 相关的接口时，可以通过这个 kinds 枚举判断是区头还是区尾   
+ */
+enum _yx_flow_layout_section_kinds {
+    HEADER = 'flow-layout-HEADER',
+    FOOTER = 'flow-layout-FOOTER',
+}
+
+/**
+ * 流式布局
+ * 支持水平/垂直方向排列滚动
+ */
+export class YXFlowLayout extends YXBinaryLayout {
+
+    /**
+     * 是否开启分页滚动效果
+     */
+    pagingEnabled: boolean = false
+
+    /**
+     * 分页吸附动画时间  
+     */
+    pagingAnimationDuration: number = 0.5
+
+    /**
+     * 节点在行(垂直列表)或者列(水平列表)内的对齐方式  
+     */
+    alignment: _yx_flow_layout_alignment = YXFlowLayout.Alignment.CENTER
+    static Alignment = _yx_flow_layout_alignment
+
+    /**
+     * 约束优先级  
+     */
+    priority: _yx_flow_layout_priority = YXFlowLayout.Priority.LEFT
+    static Priority = _yx_flow_layout_priority
+
+    /**
+     * 当 priority 设置为 SIDE 模式，并且最后一行或者最后一列只有一个单元 cell 时，这一个 cell 如何对齐  
+     * 默认是 null，也就是垂直列表时靠左，水平列表时靠上  
+     * 正常情况下，一般不需要关心这个配置，除非列表是 SIDE 模式并且需要调整最后一个单元 cell 的对齐方式时才需要调整这个配置  
+     */
+    lastItemPriority: _yx_flow_layout_priority = null
+
+    /**
+     * 反向排列节点  
+     * @example  
+     * // 水平反向排列  
+     * layout.reverse = YXFlowLayout.Reverse.HORIZONTAL  
+     * 
+     * // 垂直反向排列  
+     * layout.reverse = YXFlowLayout.Reverse.VERTICAL  
+     * 
+     * // 水平/垂直都反向排列  
+     * layout.reverse = YXFlowLayout.Reverse.HORIZONTAL | YXFlowLayout.Reverse.VERTICAL  
+     */
+    reverse: _yx_flow_layout_reverse_mode = YXFlowLayout.Reverse.NONE
+    static Reverse = _yx_flow_layout_reverse_mode
+
+    /**
+     * 元素大小
+     */
+    itemSize: math.Size | ((indexPath: YXIndexPath, layout: YXFlowLayout, collectionView: YXCollectionView) => math.Size) = new math.Size(100, 100)
+    getItemSize(): math.Size {
+        if (this.itemSize instanceof Function == false) {
+            return this.itemSize
+        }
+        throw new Error("YXFlowLayout: 动态配置的布局参数不支持直接获取，请检查自己的布局逻辑并谨慎的通过动态配置自己获取，注意避免死循环");
+    }
+
+    /**
+     * 元素之间垂直间距
+     */
+    verticalSpacing: number | ((section: number, layout: YXFlowLayout, collectionView: YXCollectionView) => number) = 0
+    getVerticalSpacing(): number {
+        if (this.verticalSpacing instanceof Function == false) {
+            return this.verticalSpacing
+        }
+        throw new Error("YXFlowLayout: 动态配置的布局参数不支持直接获取，请检查自己的布局逻辑并谨慎的通过动态配置自己获取，注意避免死循环");
+    }
+
+    /**
+     * 元素之间水平间距
+     */
+    horizontalSpacing: number | ((section: number, layout: YXFlowLayout, collectionView: YXCollectionView) => number) = 0
+    getHorizontalSpacing(): number {
+        if (this.horizontalSpacing instanceof Function == false) {
+            return this.horizontalSpacing
+        }
+        throw new Error("YXFlowLayout: 动态配置的布局参数不支持直接获取，请检查自己的布局逻辑并谨慎的通过动态配置自己获取，注意避免死循环");
+    }
+
+    /**
+     * 边距
+     */
+    sectionInset: YXEdgeInsets | ((section: number, layout: YXFlowLayout, collectionView: YXCollectionView) => YXEdgeInsets) = YXEdgeInsets.ZERO
+    getSectionInset(): YXEdgeInsets {
+        if (this.sectionInset instanceof Function == false) {
+            return this.sectionInset
+        }
+        throw new Error("YXFlowLayout: 动态配置的布局参数不支持直接获取，请检查自己的布局逻辑并谨慎的通过动态配置自己获取，注意避免死循环");
+    }
+
+    /**
+     * 区头大小  
+     */
+    sectionHeaderSize: math.Size | ((section: number, layout: YXFlowLayout, collectionView: YXCollectionView) => math.Size) = null
+    getSectionHeaderSize(): math.Size {
+        if (this.sectionHeaderSize instanceof Function == false) {
+            return this.sectionHeaderSize
+        }
+        throw new Error("YXFlowLayout: 动态配置的布局参数不支持直接获取，请检查自己的布局逻辑并谨慎的通过动态配置自己获取，注意避免死循环");
+    }
+
+    /**
+     * 区尾大小  
+     */
+    sectionFooterSize: math.Size | ((section: number, layout: YXFlowLayout, collectionView: YXCollectionView) => math.Size) = null
+    getSectionFooterSize(): math.Size {
+        if (this.sectionFooterSize instanceof Function == false) {
+            return this.sectionFooterSize
+        }
+        throw new Error("YXFlowLayout: 动态配置的布局参数不支持直接获取，请检查自己的布局逻辑并谨慎的通过动态配置自己获取，注意避免死循环");
+    }
+
+    /**
+     * 访问定义的区头/区尾标识  
+     */
+    static SupplementaryKinds = _yx_flow_layout_section_kinds
+
+    /**
+     * 钉住 header 的位置 ( header 吸附在列表可见范围内 )  
+     * 垂直列表设置了垂直反向排列 或者 水平列表设置了水平反向排列时，此配置不会生效  
+     */
+    sectionHeadersPinToVisibleBounds: boolean = false
+
+    /**
+     * 钉住 footer 的位置 ( footer 吸附在列表可见范围内 )  
+     * 垂直列表设置了垂直反向排列 或者 水平列表设置了水平反向排列时，此配置不会生效  
+     */
+    sectionFootersPinToVisibleBounds: boolean = false
+
+    protected sectionPinToVisibleBoundsSupported = false // 是否支持 Pin 区头/区尾业务  
+    protected originalHeaderRect: Map<number, math.Rect> = new Map() // 保存所有 header 的原始位置
+    protected originalFooterRect: Map<number, math.Rect> = new Map() // 保存所有 footer 的原始位置
+
+    prepare(collectionView: YXCollectionView): void {
+        this.originalHeaderRect.clear()
+        this.originalFooterRect.clear()
+        this.sectionPinToVisibleBoundsSupported = (this.sectionHeadersPinToVisibleBounds || this.sectionFootersPinToVisibleBounds)
+        if (collectionView.scrollDirection == YXCollectionView.ScrollDirection.HORIZONTAL) {
+            if (this.reverse & _yx_flow_layout_reverse_mode.HORIZONTAL) { this.sectionPinToVisibleBoundsSupported = false }
+            this._horizontal(collectionView)
+            return
+        }
+        if (collectionView.scrollDirection == YXCollectionView.ScrollDirection.VERTICAL) {
+            if (this.reverse & _yx_flow_layout_reverse_mode.VERTICAL) { this.sectionPinToVisibleBoundsSupported = false }
+            this._vertical(collectionView)
+            return
+        }
+    }
+
+    initOffset(collectionView: YXCollectionView): void {
+        if (collectionView.scrollDirection == YXCollectionView.ScrollDirection.HORIZONTAL) {
+            collectionView.scrollView.scrollToLeft(0)
+            return
+        }
+        if (collectionView.scrollDirection == YXCollectionView.ScrollDirection.VERTICAL) {
+            collectionView.scrollView.scrollToTop(0)
+            return
+        }
+    }
+
+    targetOffset(collectionView: YXCollectionView, touchMoveVelocity: math.Vec3, startOffset: math.Vec2, originTargetOffset: math.Vec2, originScrollDuration: number): { offset: math.Vec2; time?: number; attenuated?: boolean; } | null {
+        if (this.pagingEnabled == false) {
+            return null
+        }
+        let offset = collectionView.scrollView.getScrollOffset()
+        offset.x = - offset.x
+        let threshold = 0.2
+        if (collectionView.scrollDirection == YXCollectionView.ScrollDirection.HORIZONTAL) {
+            let idx = Math.round(offset.x / collectionView.scrollView.view.width)
+            let r = touchMoveVelocity.x / collectionView.scrollView.view.width
+            if (startOffset && Math.abs(r) >= threshold) {
+                idx = Math.round(startOffset.x / collectionView.scrollView.view.width) + (r > 0 ? -1 : 1)
+            }
+            offset.x = idx * collectionView.scrollView.view.width
+        }
+        if (collectionView.scrollDirection == YXCollectionView.ScrollDirection.VERTICAL) {
+            let idx = Math.round(offset.y / collectionView.scrollView.view.height)
+            let r = touchMoveVelocity.y / collectionView.scrollView.view.height
+            if (startOffset && Math.abs(r) >= threshold) {
+                idx = Math.round(startOffset.y / collectionView.scrollView.view.height) + (r > 0 ? 1 : -1)
+            }
+            offset.y = idx * collectionView.scrollView.view.height
+        }
+        return { offset: offset, time: this.pagingAnimationDuration }
+    }
+
+    protected _horizontal(collectionView: YXCollectionView) {
+        collectionView.scrollView.horizontal = true
+        collectionView.scrollView.vertical = false
+        let contentSize = collectionView.node.getComponent(UITransform).contentSize.clone()
+        let allAttributes: YXLayoutAttributes[] = []
+
+        let numberOfSections = collectionView.getNumberOfSections()
+
+        let sectionMaxX = 0
+        for (let section = 0; section < numberOfSections; section++) {
+            let numberOfItems = collectionView.getNumberOfItems(section)
+            let verticalSpacing = this.verticalSpacing instanceof Function ? this.verticalSpacing(section, this, collectionView) : this.verticalSpacing
+            let horizontalSpacing = this.horizontalSpacing instanceof Function ? this.horizontalSpacing(section, this, collectionView) : this.horizontalSpacing
+            let sectionInset = this.sectionInset instanceof Function ? this.sectionInset(section, this, collectionView) : this.sectionInset
+
+            // header
+            let sectionHeaderSize = this.sectionHeaderSize instanceof Function ? this.sectionHeaderSize(section, this, collectionView) : this.sectionHeaderSize
+            if (sectionHeaderSize && sectionHeaderSize.width > 0 && sectionHeaderSize.height > 0) {
+                let indexPath = new YXIndexPath(section, 0)
+                let attr = YXLayoutAttributes.layoutAttributesForSupplementary(indexPath, _yx_flow_layout_section_kinds.HEADER)
+                attr.zIndex = 1
+                attr.frame.y = sectionInset.top
+                attr.frame.x = sectionMaxX
+                attr.frame.size = sectionHeaderSize
+                allAttributes.push(attr)
+                sectionMaxX = attr.frame.xMax + sectionInset.left
+                this.originalHeaderRect.set(attr.indexPath.section, attr.frame.clone())
+            } else {
+                sectionMaxX += sectionInset.left
+            }
+
+            // cells
+            let whole = new _yx_flow_layout_whole()
+            whole.verticalSpacing = verticalSpacing
+            whole.horizontalSpacing = horizontalSpacing
+            whole.sectionInset = sectionInset
+            whole.offset = sectionMaxX
+            whole.attrs = []
+            whole.containerWidth = 0
+            whole.containerHeight = contentSize.height
+            whole.alignment = this.alignment
+            whole.priority = this.priority
+            whole.lastItemPriority = this.lastItemPriority
+            whole.reverse = this.reverse
+
+            for (let item = 0; item < numberOfItems; item++) {
+                let indexPath = new YXIndexPath(section, item)
+                let itemSize = this.itemSize instanceof Function ? this.itemSize(indexPath, this, collectionView) : this.itemSize
+
+                let attr = whole.layout_horizontal_item(indexPath, itemSize)
+                if (attr == null) {
+                    // 返回 null 表示摆不下了，需要换列排列
+                    whole.layout_horizontal_complet()
+                    whole.offset = whole.offset + whole.containerWidth + horizontalSpacing
+                    whole.containerWidth = 0
+                    whole.attrs = []
+                    attr = whole.layout_horizontal_item(indexPath, itemSize)
+                }
+                if (attr) {
+                    allAttributes.push(attr)
+                }
+                sectionMaxX = Math.max(sectionMaxX, whole.offset + whole.containerWidth)
+            }
+
+            whole.layout_horizontal_complet()
+            sectionMaxX += sectionInset.right
+
+            // footer
+            let sectionFooterSize = this.sectionFooterSize instanceof Function ? this.sectionFooterSize(section, this, collectionView) : this.sectionFooterSize
+            if (sectionFooterSize && sectionFooterSize.width > 0 && sectionFooterSize.height > 0) {
+                let indexPath = new YXIndexPath(section, 0)
+                let attr = YXLayoutAttributes.layoutAttributesForSupplementary(indexPath, _yx_flow_layout_section_kinds.FOOTER)
+                attr.zIndex = 1
+                attr.frame.y = sectionInset.top
+                attr.frame.x = sectionMaxX
+                attr.frame.size = sectionFooterSize
+                allAttributes.push(attr)
+                sectionMaxX = attr.frame.xMax + sectionInset.left
+                this.originalFooterRect.set(attr.indexPath.section, attr.frame.clone())
+            }
+        }
+
+        this._reverse_horizontal(allAttributes, sectionMaxX)
+        this.attributes = allAttributes
+        contentSize.width = Math.max(contentSize.width, sectionMaxX)
+        this.contentSize = contentSize
+    }
+
+    protected _reverse_horizontal(attributes: YXLayoutAttributes[], contentWidth: number) {
+        if (this.reverse & _yx_flow_layout_reverse_mode.HORIZONTAL) {
+            for (let index = 0; index < attributes.length; index++) {
+                const element = attributes[index];
+                element.frame.x = contentWidth - element.frame.x - element.frame.width;
+            }
+        }
+    }
+
+    protected _vertical(collectionView: YXCollectionView) {
+        collectionView.scrollView.horizontal = false
+        collectionView.scrollView.vertical = true
+        let contentSize = collectionView.node.getComponent(UITransform).contentSize.clone()
+        let allAttributes: YXLayoutAttributes[] = []
+
+        let numberOfSections = collectionView.getNumberOfSections()
+
+        let sectionMaxY = 0
+        for (let section = 0; section < numberOfSections; section++) {
+            let numberOfItems = collectionView.getNumberOfItems(section)
+            let verticalSpacing = this.verticalSpacing instanceof Function ? this.verticalSpacing(section, this, collectionView) : this.verticalSpacing
+            let horizontalSpacing = this.horizontalSpacing instanceof Function ? this.horizontalSpacing(section, this, collectionView) : this.horizontalSpacing
+            let sectionInset = this.sectionInset instanceof Function ? this.sectionInset(section, this, collectionView) : this.sectionInset
+
+            // header
+            let sectionHeaderSize = this.sectionHeaderSize instanceof Function ? this.sectionHeaderSize(section, this, collectionView) : this.sectionHeaderSize
+            if (sectionHeaderSize && sectionHeaderSize.width > 0 && sectionHeaderSize.height > 0) {
+                let indexPath = new YXIndexPath(section, 0)
+                let attr = YXLayoutAttributes.layoutAttributesForSupplementary(indexPath, _yx_flow_layout_section_kinds.HEADER)
+                attr.zIndex = 1
+                attr.frame.y = sectionMaxY
+                attr.frame.x = sectionInset.left
+                attr.frame.size = sectionHeaderSize
+                allAttributes.push(attr)
+                sectionMaxY = attr.frame.yMax + sectionInset.top
+                this.originalHeaderRect.set(attr.indexPath.section, attr.frame.clone())
+            } else {
+                sectionMaxY += sectionInset.top
+            }
+
+            // cells
+            let whole = new _yx_flow_layout_whole()
+            whole.verticalSpacing = verticalSpacing
+            whole.horizontalSpacing = horizontalSpacing
+            whole.sectionInset = sectionInset
+            whole.offset = sectionMaxY
+            whole.attrs = []
+            whole.containerWidth = contentSize.width
+            whole.containerHeight = 0
+            whole.alignment = this.alignment
+            whole.priority = this.priority
+            whole.lastItemPriority = this.lastItemPriority
+            whole.reverse = this.reverse
+
+            for (let item = 0; item < numberOfItems; item++) {
+                let indexPath = new YXIndexPath(section, item)
+                let itemSize = this.itemSize instanceof Function ? this.itemSize(indexPath, this, collectionView) : this.itemSize
+
+                let attr = whole.layout_vertical_item(indexPath, itemSize)
+                if (attr == null) {
+                    // 返回 null 表示摆不下了，需要换行排列
+                    whole.layout_vertical_complet()
+                    whole.offset = whole.offset + whole.containerHeight + verticalSpacing
+                    whole.containerHeight = 0
+                    whole.attrs = []
+                    attr = whole.layout_vertical_item(indexPath, itemSize)
+                }
+                if (attr) {
+                    allAttributes.push(attr)
+                }
+                sectionMaxY = Math.max(sectionMaxY, whole.offset + whole.containerHeight)
+            }
+
+            whole.layout_vertical_complet()
+            sectionMaxY += sectionInset.bottom
+
+            // footer
+            let sectionFooterSize = this.sectionFooterSize instanceof Function ? this.sectionFooterSize(section, this, collectionView) : this.sectionFooterSize
+            if (sectionFooterSize && sectionFooterSize.width > 0 && sectionFooterSize.height > 0) {
+                let indexPath = new YXIndexPath(section, 0)
+                let attr = YXLayoutAttributes.layoutAttributesForSupplementary(indexPath, _yx_flow_layout_section_kinds.FOOTER)
+                attr.zIndex = 1
+                attr.frame.y = sectionMaxY
+                attr.frame.x = sectionInset.left
+                attr.frame.size = sectionFooterSize
+                allAttributes.push(attr)
+                sectionMaxY = attr.frame.yMax
+                this.originalFooterRect.set(attr.indexPath.section, attr.frame.clone())
+            }
+        }
+
+        this._reverse_vertical(allAttributes, sectionMaxY)
+        this.attributes = allAttributes
+        contentSize.height = Math.max(contentSize.height, sectionMaxY)
+        this.contentSize = contentSize
+    }
+
+    protected _reverse_vertical(attributes: YXLayoutAttributes[], contentHeight: number) {
+        if (this.reverse & _yx_flow_layout_reverse_mode.VERTICAL) {
+            for (let index = 0; index < attributes.length; index++) {
+                const element = attributes[index];
+                element.frame.y = contentHeight - element.frame.y - element.frame.height;
+            }
+        }
+    }
+
+    layoutAttributesForElementsInRect(rect: math.Rect, collectionView: YXCollectionView): YXLayoutAttributes[] {
+        if (!this.sectionPinToVisibleBoundsSupported) {
+            return super.layoutAttributesForElementsInRect(rect, collectionView)
+        }
+        if (collectionView.scrollDirection === YXCollectionView.ScrollDirection.HORIZONTAL) {
+            return this.layoutAttributesForElementsInRect_horizontal(rect, collectionView)
+        }
+        if (collectionView.scrollDirection === YXCollectionView.ScrollDirection.VERTICAL) {
+            return this.layoutAttributesForElementsInRect_vertical(rect, collectionView)
+        }
+        return this.attributes
+    }
+
+    protected layoutAttributesForElementsInRect_horizontal(rect: math.Rect, collectionView: YXCollectionView): YXLayoutAttributes[] {
+        let numberOfSections = collectionView.getNumberOfSections()
+        let scrollOffset = collectionView.scrollView.getScrollOffset()
+        scrollOffset.x = - scrollOffset.x
+        for (let index = 0; index < this.attributes.length; index++) {
+            const element = this.attributes[index];
+            if (element.elementCategory === 'Supplementary') {
+
+                if (this.sectionHeadersPinToVisibleBounds && element.supplementaryKinds === _yx_flow_layout_section_kinds.HEADER) {
+                    const originalFrame = this.originalHeaderRect.get(element.indexPath.section)
+                    element.frame.x = originalFrame.x
+                    if (scrollOffset.x > originalFrame.x) {
+                        element.frame.x = scrollOffset.x
+                    }
+                    const nextOriginalFrame = this.getNextOriginalFrame(element.indexPath.section, _yx_flow_layout_section_kinds.FOOTER, numberOfSections)
+                    if (nextOriginalFrame) {
+                        if (element.frame.xMax > nextOriginalFrame.x) {
+                            element.frame.x = nextOriginalFrame.x - element.frame.width
+                        }
+                    }
+                }
+
+                if (this.sectionFootersPinToVisibleBounds && element.supplementaryKinds === _yx_flow_layout_section_kinds.FOOTER) {
+                    let bottom = scrollOffset.x + collectionView.scrollView.view.width
+                    const originalFrame = this.originalFooterRect.get(element.indexPath.section)
+                    const previousOriginalFrame = this.getPreviousOriginalFrame(element.indexPath.section, _yx_flow_layout_section_kinds.HEADER)
+                    element.frame.x = originalFrame.x
+                    if (bottom < originalFrame.xMax) {
+                        element.frame.x = bottom - element.frame.width
+                        if (previousOriginalFrame) {
+                            if (element.frame.x < previousOriginalFrame.xMax) {
+                                element.frame.x = previousOriginalFrame.xMax
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return this.attributes
+    }
+
+    protected layoutAttributesForElementsInRect_vertical(rect: math.Rect, collectionView: YXCollectionView): YXLayoutAttributes[] {
+        let numberOfSections = collectionView.getNumberOfSections()
+        let scrollOffset = collectionView.scrollView.getScrollOffset()
+        for (let index = 0; index < this.attributes.length; index++) {
+            const element = this.attributes[index];
+            if (element.elementCategory === 'Supplementary') {
+
+                if (this.sectionHeadersPinToVisibleBounds && element.supplementaryKinds === _yx_flow_layout_section_kinds.HEADER) {
+                    const originalFrame = this.originalHeaderRect.get(element.indexPath.section)
+                    element.frame.y = originalFrame.y
+                    if (scrollOffset.y > originalFrame.y) {
+                        element.frame.y = scrollOffset.y
+                    }
+                    const nextOriginalFrame = this.getNextOriginalFrame(element.indexPath.section, _yx_flow_layout_section_kinds.FOOTER, numberOfSections)
+                    if (nextOriginalFrame) {
+                        if (element.frame.yMax > nextOriginalFrame.y) {
+                            element.frame.y = nextOriginalFrame.y - element.frame.height
+                        }
+                    }
+                }
+
+                if (this.sectionFootersPinToVisibleBounds && element.supplementaryKinds === _yx_flow_layout_section_kinds.FOOTER) {
+                    let bottom = scrollOffset.y + collectionView.scrollView.view.height
+                    const originalFrame = this.originalFooterRect.get(element.indexPath.section)
+                    const previousOriginalFrame = this.getPreviousOriginalFrame(element.indexPath.section, _yx_flow_layout_section_kinds.HEADER)
+                    element.frame.y = originalFrame.y
+                    if (bottom < originalFrame.yMax) {
+                        element.frame.y = bottom - element.frame.height
+                        if (previousOriginalFrame) {
+                            if (element.frame.y < previousOriginalFrame.yMax) {
+                                element.frame.y = previousOriginalFrame.yMax
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return this.attributes
+    }
+
+    protected getNextOriginalFrame(section: number, kinds: _yx_flow_layout_section_kinds, total: number) {
+        if (section >= total) { return null }
+        if (kinds === _yx_flow_layout_section_kinds.HEADER) {
+            let result = this.originalHeaderRect.get(section)
+            if (result) { return result }
+            return this.getNextOriginalFrame(section, _yx_flow_layout_section_kinds.FOOTER, total)
+        }
+        if (kinds === _yx_flow_layout_section_kinds.FOOTER) {
+            let result = this.originalFooterRect.get(section)
+            if (result) { return result }
+            return this.getNextOriginalFrame(section + 1, _yx_flow_layout_section_kinds.HEADER, total)
+        }
+        return null
+    }
+
+    protected getPreviousOriginalFrame(section: number, kinds: _yx_flow_layout_section_kinds) {
+        if (section < 0) { return null }
+        if (kinds === _yx_flow_layout_section_kinds.HEADER) {
+            let result = this.originalHeaderRect.get(section)
+            if (result) { return result }
+            return this.getPreviousOriginalFrame(section - 1, _yx_flow_layout_section_kinds.FOOTER)
+        }
+        if (kinds === _yx_flow_layout_section_kinds.FOOTER) {
+            let result = this.originalFooterRect.get(section)
+            if (result) { return result }
+            return this.getPreviousOriginalFrame(section, _yx_flow_layout_section_kinds.HEADER)
+        }
+        return null
+    }
+
+    shouldUpdateAttributesForBoundsChange(): boolean {
+        return this.sectionPinToVisibleBoundsSupported
+    }
+    shouldUpdateAttributesZIndex(): boolean {
+        return this.sectionPinToVisibleBoundsSupported
+    }
+
+    onDestroy(): void {
+        this.attributes = []
+        this.attributes = null
+
+        this.originalHeaderRect.clear()
+        this.originalHeaderRect = null
+
+        this.originalFooterRect.clear()
+        this.originalHeaderRect = null
+    }
+}
+
+export namespace YXFlowLayout {
+    export type Alignment = _yx_flow_layout_alignment
+    export type Priority = _yx_flow_layout_priority
+    export type Reverse = _yx_flow_layout_reverse_mode
+}
+
+/**
+ * 实现按行/列排列节点 && 调整对齐方式/约束优先级  
+ * 一个 whole 对象管理一行或者一列的节点  
+ */
+class _yx_flow_layout_whole {
+
+    /**
+     * 当前这块内容的起始位置  
+     * 可能是 x，可能是 y，取决于排列方向  
+     */
+    offset: number
+
+    /**
+     * flow layout 部分参数
+     */
+    verticalSpacing: number
+    horizontalSpacing: number
+    sectionInset: YXEdgeInsets
+    alignment: _yx_flow_layout_alignment
+    priority: _yx_flow_layout_priority
+    lastItemPriority: _yx_flow_layout_priority
+    reverse: _yx_flow_layout_reverse_mode
+
+    /**
+     * 容器相关的参数
+     */
+    containerWidth: number
+    containerHeight: number
+
+    /**
+     * 这块内容区域目前已经摆放的节点
+     */
+    attrs: YXLayoutAttributes[] = []
+
+    /**
+     * 检查传进来的位置是否跟当前这块内容的其他节点重叠
+     */
+    intersects(rect: math.Rect) {
+        for (let index = 0; index < this.attrs.length; index++) {
+            const element = this.attrs[index];
+            math.Rect.intersection(_rectOut, element.frame, rect)
+            if (_rectOut.width > 0 && _rectOut.height > 0) {
+                return true
+            }
+        }
+        return false
+    }
+
+    /**
+     * 垂直方向列表的节点的排列规则
+     */
+    layout_vertical_item(indexPath: YXIndexPath, itemSize: math.Size) {
+        if (this.attrs.length <= 0) {
+            let attributes = YXLayoutAttributes.layoutAttributesForCell(indexPath)
+            attributes.frame.set(this.sectionInset.left, this.offset, itemSize.width, itemSize.height)
+            this.attrs.push(attributes)
+            this.containerHeight = Math.max(this.containerHeight, attributes.frame.height)
+            return attributes
+        }
+
+        const frame = new math.Rect()
+        frame.size = itemSize
+
+        // 检查所有节点的右边
+        for (let index = 0; index < this.attrs.length; index++) {
+            const element = this.attrs[index];
+            frame.x = element.frame.xMax + this.horizontalSpacing
+            frame.y = element.frame.y
+            if (frame.xMax <= (this.containerWidth - this.sectionInset.right)) {
+                if (this.intersects(frame) == false) {
+                    let attributes = YXLayoutAttributes.layoutAttributesForCell(indexPath)
+                    attributes.frame.set(frame)
+                    this.attrs.push(attributes)
+                    this.containerHeight = Math.max(this.containerHeight, attributes.frame.yMax - this.offset)
+                    return attributes
+                }
+            }
+        }
+
+        // 走到这里表示这块内容区域已经摆不下了，需要换行处理
+        return null
+    }
+
+    layout_vertical_complet() {
+
+        // 反转水平方向 (如果需要的话)  
+        if (this.reverse & _yx_flow_layout_reverse_mode.HORIZONTAL) {
+            this.attrs = this.attrs.reverse()
+        }
+
+        // 调整对齐方式  
+        if (this.alignment == _yx_flow_layout_alignment.CENTER) {
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.y = this.offset + (this.containerHeight - element.frame.height) * 0.5
+            }
+        }
+        if (this.alignment == _yx_flow_layout_alignment.BACKWARD) {
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.y = this.offset + (this.containerHeight - element.frame.height)
+            }
+        }
+
+        // 按优先级调整节点位置    
+        let priority = this.priority
+        if (priority == _yx_flow_layout_priority.SIDE && this.attrs.length == 1) {
+            priority = this.lastItemPriority
+        }
+        if (priority == _yx_flow_layout_priority.TOP || priority == _yx_flow_layout_priority.BOTTOM) {
+            throw new Error("flow layout priority/lastItemPriority 配置错误: 不支持的优先级配置");
+        }
+        if (priority == _yx_flow_layout_priority.CENTER) {
+            let totalWidth = 0
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                totalWidth += element.frame.width
+            }
+            totalWidth = totalWidth + (this.attrs.length - 1) * this.horizontalSpacing
+            let left = (this.containerWidth - totalWidth) * 0.5
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.x = left
+                left = element.frame.xMax + this.horizontalSpacing
+            }
+        }
+        if (priority == _yx_flow_layout_priority.LEFT && this.reverse & _yx_flow_layout_reverse_mode.HORIZONTAL) {
+            let left = this.sectionInset.left
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.x = left
+                left = element.frame.xMax + this.horizontalSpacing
+            }
+        }
+        if (priority == _yx_flow_layout_priority.RIGHT) {
+            let totalWidth = 0
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                totalWidth += element.frame.width
+            }
+            totalWidth = totalWidth + (this.attrs.length - 1) * this.horizontalSpacing
+            let left = (this.containerWidth - totalWidth) - this.sectionInset.right
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.x = left
+                left = element.frame.xMax + this.horizontalSpacing
+            }
+        }
+        if (priority == _yx_flow_layout_priority.SIDE) {
+            let totalWidth = 0
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                totalWidth += element.frame.width
+            }
+            let horizontalSpacing = (this.containerWidth - this.sectionInset.left - this.sectionInset.right - totalWidth) / (this.attrs.length - 1)
+            let offset = this.sectionInset.left
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.x = offset
+                offset = element.frame.xMax + horizontalSpacing
+            }
+        }
+    }
+
+    /**
+     * 水平方向列表的节点的排列规则
+     */
+    layout_horizontal_item(indexPath: YXIndexPath, itemSize: math.Size) {
+        if (this.attrs.length <= 0) {
+            let attributes = YXLayoutAttributes.layoutAttributesForCell(indexPath)
+            attributes.frame.set(this.offset, this.sectionInset.top, itemSize.width, itemSize.height)
+            this.attrs.push(attributes)
+            this.containerWidth = Math.max(this.containerWidth, attributes.frame.width)
+            return attributes
+        }
+
+        const frame = new math.Rect()
+        frame.size = itemSize
+
+        // 检测所有节点的下边
+        for (let index = 0; index < this.attrs.length; index++) {
+            const element = this.attrs[index];
+            frame.x = element.frame.x
+            frame.y = element.frame.yMax + this.verticalSpacing
+            if (frame.yMax <= (this.containerHeight - this.sectionInset.bottom)) {
+                if (this.intersects(frame) == false) {
+                    let attributes = YXLayoutAttributes.layoutAttributesForCell(indexPath)
+                    attributes.frame.set(frame)
+                    this.attrs.push(attributes)
+                    this.containerWidth = Math.max(this.containerWidth, attributes.frame.xMax - this.offset)
+                    return attributes
+                }
+            }
+        }
+
+        // 走到这里表示这块内容区域已经摆不下了
+        return null
+    }
+
+    layout_horizontal_complet() {
+
+        // 反转垂直方向 (如果需要的话)  
+        if (this.reverse & _yx_flow_layout_reverse_mode.VERTICAL) {
+            this.attrs = this.attrs.reverse()
+        }
+
+        // 调整对齐方式  
+        if (this.alignment == _yx_flow_layout_alignment.CENTER) {
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.x = this.offset + (this.containerWidth - element.frame.width) * 0.5
+            }
+        }
+        if (this.alignment == _yx_flow_layout_alignment.BACKWARD) {
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.x = this.offset + (this.containerWidth - element.frame.width)
+            }
+        }
+
+        // 按优先级调整节点位置    
+        let priority = this.priority
+        if (priority == _yx_flow_layout_priority.SIDE && this.attrs.length == 1) {
+            priority = this.lastItemPriority
+        }
+        if (priority == _yx_flow_layout_priority.LEFT || priority == _yx_flow_layout_priority.RIGHT) {
+            throw new Error("flow layout priority/lastItemPriority 配置错误: 不支持的优先级配置");
+        }
+        if (priority == _yx_flow_layout_priority.CENTER) {
+            let totalHeight = 0
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                totalHeight += element.frame.height
+            }
+            totalHeight = totalHeight + (this.attrs.length - 1) * this.verticalSpacing
+            let top = (this.containerHeight - totalHeight) * 0.5
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.y = top
+                top = element.frame.yMax + this.verticalSpacing
+            }
+        }
+        if (priority == _yx_flow_layout_priority.TOP && this.reverse & _yx_flow_layout_reverse_mode.VERTICAL) {
+            let top = this.sectionInset.top
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.y = top
+                top = element.frame.yMax + this.verticalSpacing
+            }
+        }
+        if (priority == _yx_flow_layout_priority.BOTTOM) {
+            let totalHeight = 0
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                totalHeight += element.frame.height
+            }
+            totalHeight = totalHeight + (this.attrs.length - 1) * this.verticalSpacing
+            let top = (this.containerHeight - totalHeight) - this.sectionInset.bottom
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.y = top
+                top = element.frame.yMax + this.verticalSpacing
+            }
+        }
+        if (priority == _yx_flow_layout_priority.SIDE) {
+            let totalHeight = 0
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                totalHeight += element.frame.height
+            }
+            let verticalSpacing = (this.containerHeight - this.sectionInset.top - this.sectionInset.bottom - totalHeight) / (this.attrs.length - 1)
+            let offset = this.sectionInset.top
+            for (let index = 0; index < this.attrs.length; index++) {
+                const element = this.attrs[index];
+                element.frame.y = offset
+                offset = element.frame.yMax + verticalSpacing
+            }
+        }
+    }
+}