FineUI-100-Questions/questions/35.不用resize实现拖动调整宽高布局.md

不用resize实现拖动调整宽高布局

我们都知道,布局组件有个resize方法,以前常用的动态宽度或高度的实现方式大多借用了该方法

例如可拖动宽度的布局

class Resizeable extends BI.Widget {
    props = {
        baseCls: "test"
    };

    render() {
        return {
            type: "bi.htape",
            ref: ref => this.container = ref,
            items: [
                {
                    type: "bi.draggabel", // 假设为拖拽组件
                    text: "left",
                    width: 100,
                    onDragg: size => this.resize(size),
                }, {
                    type: "bi.label",
                    text: "right"
                }
            ]
        };
    }

    resize(size) {
        this.container.attr("items")[0].width = size;
        this.container.resize();
    }
}

多数时候我们将拖动组件绑定在左侧组件上,此时需要监听拖动回调,然后修改容器的items属性,最后调用resize

有没有更简便的方式呢?有的

FineUI3.0 版本新增的自适应布局,充分利用了flex布局特性,为我们提供了更便捷,更内聚的实现方式

class Draggable extends BI.Widget {
    props = {
        baseCls: "test"
    };

    render() {
        return  {
            type: "bi.draggabel", // 假设为拖拽组件
            text: "left",
            onDragg: size => this.element.width(size),
        };
    }
}

class Resizeable extends BI.Widget {
    props = {
        baseCls: "test"
    };

    render() {
        return {
            type: "bi.horizontal",
            verticalAlign: "stretch",
            columnSize: ["", "fill"],
            items: [
                {
                    type: Draggable.xtype,
                    text: "left",
                }, {
                    type: "bi.label",
                    text: "right"
                }
            ]
        };
    }
}

利用水平布局自适应的实现方式,左侧为实际宽度,右侧占满剩余宽度. 这时候左侧仅需关注自身宽度,无须考虑与外部联动