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

flow布局嵌套似乎autoWidth不生效

Open bedphp opened this issue 5 months ago • 3 comments

第一个flow设置宽度,第二个元素还是flow元素,但是没有设置width,设置了autoWidth,然后这个子元素嵌套了两个box。 结果自动宽度没生效。 json:

{
  tag: 'Leafer',
  children: [
    {
      tag: 'Frame',
      fill: { type: 'image', url: './assets/logo_back.png', mode: 'repeat' },
      id: 'root',
      children: [
        {
          tag: 'Box',
          children: [
            {
              tag: 'Box',
              width: 960,
              height: 1080,
              padding: 10,
              flow: 'y',
              flowAlign: 'center',
              children: [
                {
                  tag: 'Box',
                  flow: 'x',
                  flowAlign: 'center',
                  autoWidth: '1',
                  children: [
                    {
                      tag: 'Box',
                      fill: '#1145',
                      flow: 'y',
                      flowAlign: 'center',
                      autoWidth: 1,
                      children: [
                        {
                          tag: 'ShadowText',
                          fill: '#fff',
                          text: '玩家信息1',
                          fontFamily: 'english,chinese,emoji',
                          fontSize: 30,
                          stroke: { type: 'solid', color: '#000' },
                          strokeWidth: 1.8,
                          strokeJoin: 'round',
                          shadow: { x: 0, y: 2.25, blur: 0, color: '#000' }
                        }
                      ]
                    },
                    {
                      tag: 'Box',
                      fill: '#19198',
                      flow: 'y',
                      flowAlign: 'center',
                      autoWidth: '1',
                      children: [
                        {
                          tag: 'ShadowText',
                          fill: '#fff',
                          text: '玩家信息2',
                          fontFamily: 'english,chinese,emoji',
                          fontSize: 30,
                          stroke: { type: 'solid', color: '#000' },
                          strokeWidth: 1.8,
                          strokeJoin: 'round',
                          shadow: { x: 0, y: 2.25, blur: 0, color: '#000' }
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

bedphp avatar Jul 30 '25 07:07 bedphp

哦哦哦我知道了,json里面的autoWidth不小心又写成string了

bedphp avatar Jul 30 '25 08:07 bedphp

又发现flow嵌套次数过多会导致出现问题。 第一个图的结构是这样的:

flow y (width设置了960
         flow x (autoWidth为1
                 box y (autoWidth为1
                 box y (autoWidth为1
                (总共两个box的flow为y)
box里面的子元素再设置还是有问题,无法自动宽度 
Image

第二个图的结构是这样的:

flow y (width设置了960
         flow x (autoWidth为1
                 box y (width 480
                 box y (autoWidth为1,对照
                (总共两个box的flow为y)
这回上面有指定宽度可以正常,第二个为对照组
Image

bedphp avatar Jul 30 '25 09:07 bedphp

最好是能弄一个可以直接运行的playground示例,我们排查起来效率会高一些

leaferjs avatar Jul 30 '25 09:07 leaferjs