leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

flow嵌套布局autoWidth不生效

Open bedphp opened this issue 9 months ago • 4 comments

环境:电脑 + window 10 + chrome 131 + leaferjs 1.5.3 测试代码:

import { Leafer, Rect, Box } from 'leafer-ui'
import { Flow } from '@leafer-in/flow'// 导入动画插件
const leafer = new Leafer({ view: window });
function getRandomColor() {
    var str = "#";
    var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
    for (var i = 0; i < 6; i++) {
        var num = parseInt(Math.random() * 16);
        str += arr[num];
    }
    return str;
}

//垂直布局
const flow_container = Flow.one({
    flow: 'y',
    width: 500,
    height: 100,
    fill: 'blue'
});
const flow_child = () => Flow.one({
    autoWidth: 1,
    height: 50,
    children: [
        Box.one({
            fill: getRandomColor(),
            width: 100,
        }),
        Box.one({
            fill: getRandomColor(),
            autoWidth: 1,
        })]
});

flow_container.add(flow_child());
flow_container.add(flow_child());
flow_container.add(flow_child());
leafer.add(flow_container);

Image 如图,flow的垂直布局嵌套再一层flow的横向布局之后里面的autoWidth不生效,图片左侧没有设置autoWidth正常显示,右边完全不显示

bedphp avatar Apr 04 '25 16:04 bedphp

收到,谢谢反馈~

leaferjs avatar Apr 07 '25 00:04 leaferjs

暂时给第二个flow指定一个宽度可以让自动宽度生效:

import { Leafer, Rect, Box } from 'leafer-ui'
import { Flow } from '@leafer-in/flow'// 导入动画插件
const leafer = new Leafer({ view: window });
function getRandomColor() {
    var str = "#";
    var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
    for (var i = 0; i < 6; i++) {
        var num = parseInt(Math.random() * 16);
        str += arr[num];
    }
    return str;
}

//垂直布局
const flow_container = Flow.one({
    flow: 'y',
    width: 500,
    height: 100,
    fill: 'blue'
});
const flow_child = () => Flow.one({
    autoWidth: 1,
    width: 200, // 暂时指定一个宽度可
    height: 50,
    children: [
        Box.one({
            fill: getRandomColor(),
            width: 100,
        }),
        Box.one({
            fill: getRandomColor(),
            autoWidth: 1,
        })]
});

flow_container.add(flow_child());
flow_container.add(flow_child());
flow_container.add(flow_child());
leafer.add(flow_container);

leaferjs avatar Apr 07 '25 05:04 leaferjs

已修复,等待发版

leaferjs avatar Apr 25 '25 09:04 leaferjs

已发版

leaferjs avatar Apr 29 '25 01:04 leaferjs