You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ZK框架中Borderlayout无法全屏加载问题求助

ZK框架BorderLayout无法全屏显示的解决方案

问题根源在于最外层的<vlayout>未设置垂直弹性布局属性,导致其高度仅由内部内容撑开,即便BorderLayout设置了vflex也无法获取足够的可用高度。结合你的代码,给出以下修改步骤:

  1. 给最外层<vlayout>添加vflex="1",让它撑满页面的可用高度
  2. 将BorderLayout的vflex改为1,使其占满外层vlayout的全部垂直空间
  3. 调整Center区域内的布局,让地图容器自适应高度:
    • 给Center里的<vlayout>添加vflex="1"
    • 将包裹地图的内层<div>设置vflex="1",同时把<gmaps>的height从固定800px改为100%

修改后的完整ZUL代码:

<vlayout vflex="1">
    <div/>
    <borderlayout vflex="1">
        <west>
            <vlayout>
                <vlayout/>
                <groupbox width="280px">
                    <listbox height="240px"/>
                    <hlayout>
                        <button/>
                        <button/>
                    </hlayout>
                </groupbox>
            </vlayout>
        </west>
        <center>
            <vlayout vflex="1">
                <hlayout spacing="2em">
                    <vlayout>
                        <label/>
                        <slider/>
                    </vlayout>
                    <vlayout>
                        <label/>
                        <checkbox/>
                    </vlayout>
                    <vlayout hflex="1">
                        <label/>
                        <slider hflex="1"/>
                    </vlayout>
                </hlayout>
                <hlayout>
                    <vlayout>
                        <label/>
                        <doublebox/>
                    </vlayout>
                    <vlayout>
                        <label/>
                        <doublebox/>
                    </vlayout>
                    <vlayout>
                        <label/>
                        <textbox/>
                    </vlayout>
                    <vlayout>
                        <label/>
                    </vlayout>
                </hlayout>
                <hlayout hflex="1" vflex="1">
                    <div hflex="1" vflex="1">                                    
                        <div vflex="1">
                            <script/>
                            <gmaps height="100%"/>
                        </div>
                    </div>
                </hlayout>
            </vlayout>
        </center>
    </borderlayout>
</vlayout>

补充说明:

  • ZK中vflex="1"表示组件会占满父容器的剩余垂直空间,是最常用的弹性布局设置
  • 固定高度的组件(比如listbox的240px)会优先占用空间,剩余空间会分配给设置了vflex="1"的组件
  • 地图使用百分比高度时,必须确保所有父容器都设置了有效的高度(通过vflex或固定高度),否则百分比会失效

内容的提问来源于stack exchange,提问作者Anamika Singh

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 04:52:38