leafer-ui
leafer-ui copied to clipboard
flow嵌套布局autoWidth不生效
环境:电脑 + 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);
如图,flow的垂直布局嵌套再一层flow的横向布局之后里面的autoWidth不生效,图片左侧没有设置autoWidth正常显示,右边完全不显示
收到,谢谢反馈~
暂时给第二个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);
已修复,等待发版
已发版