ZK 框架中的 hbox/vbox 对齐问题答案

【问题标题】：hbox/vbox alignment issues in ZK frameworkZK 框架中的 hbox/vbox 对齐问题
【发布时间】：2014-01-28 02:52:21
【问题描述】：

我在使用 Hbox 和 Vbox 布局时遇到了一些问题。我知道它们的行为有点像 DIV，但我无法按照我想要的方式对齐它们。

我尝试添加 DIV、分隔符、打包、对齐、宽度等各种解决方法，但似乎无法使其工作。

这是我布局的北边，我只想把它分成两部分：左边的，包含了大部分的组件，都是靠左对齐的，有一些间距

正确的是，它只有一些导出选项，而且都是集中式的。

我会发布一张图片，但我没有足够的代表。

这是我正在尝试制作的代码部分：

    <hbox width="100%">
        <vbox width="80%">
                <hbox>
                    <label value="${labels.processos}" />
                        <separator spacing="20px" />
                    <combobox id="cmbNovo" model="@load(vm.loadCombobox)"
                            readonly="true">
                        <comboitem label="@load(each)" />
                    </combobox>
                        <separator spacing="20px" />
                    <a onClick="@command('editar', status=each)"
                                label="${labels.alterarvisao}"/>
                        <separator spacing="20px" />
                    <button id="novaVisao" label="${labels.novavisao}"
                        onClick="@command('novo')" />
                        <separator spacing="20px" />
                </hbox>
                    <separator height="10px" />
                    <button id="novo" label="${labels.message.novoprocesso}"
                        onClick="@command('novo')" />
                    <separator height="10px" />
                </vbox>
                    <separator spacing="100%" />
                <vbox pack="end" align="end" width="20%" >
                    <hbox >
                        <label value="${labels.common.exportar}" />
                    </hbox>
                    <hbox>
                        <label value="${labels.common.exportar}" />
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.pdf}"/>
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.xls}"/>
                    </hbox>
                    <hbox>
                        <label value="${labels.common.exportar}" />
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.pdf}"/>
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.xls}"/>
                    </hbox>
                </vbox>
            </hbox>

这很简单。我需要一个 div 向左，文本也向左对齐右边的另一个，带有集中的文本。两者都在同一水平线。我就是做不到。

【问题讨论】：

你可以做一个链接到 imagehack 或其他东西，这样我们就可以看到图片。我试图帮助你，但不知道他们必须如何。第二个hbox，你需要在同一行吗？在该行下方有一个按钮？
老兄，如果你能再次帮助我，那就太棒了！ =Pstackoverflow.com/questions/21338933/…

标签： alignment zk vbox hbox

【解决方案1】：

好的，解决了我的布局问题。我是 Java 程序员，不是网页设计师，所以可能应该有更好的解决方案，但这是我所做的：

             <borderlayout>
                <west width="80%" style="border:none">
                    <vbox>
                        <separator height="20px" />
                        <hbox>
                            <label value="${labels.processos}" />
                            <separator orient="vertical" spacing="50px" />
                            <combobox id="cmbNovo"
                                model="@load(vm.loadCombobox)" readonly="true">
                                <comboitem label="@load(each)" />
                            </combobox>
                            <separator orient="vertical" spacing="50px" />
                            <a onClick="@command('editar', status=each)"
                                label="${labels.alterarvisao}" />
                            <separator orient="vertical" spacing="50px" />
                            <button id="novaVisao"
                                label="${labels.novavisao}" onClick="@command('novo')" />
                        </hbox>
                        <separator height="10px" />
                        <button id="novo"
                            label="${labels.message.novoprocesso}"
                            onClick="@command('novo')" />
                    </vbox>
                </west>
                <east width="20%" style="border:none; align:center;">
                    <tablelayout columns="5">
                        <tablechildren colspan="5"
                            style="text-align:center">
                            <label value="${labels.common.exportar}" />
                        </tablechildren>

                        <tablechildren colspan="3">
                            <label
                                value="${labels.export.todasaspaginas}" />
                        </tablechildren>
                        <tablechildren>
                            <a onClick="@command('editar', status=each)"
                                label="${labels.common.pdf}" />
                        </tablechildren>
                        <tablechildren>
                            <a onClick="@command('editar', status=each)"
                                label="${labels.common.xls}" />
                        </tablechildren>

                        <tablechildren colspan="3">
                            <label value="${labels.export.estapagina}" />
                        </tablechildren>
                        <tablechildren>
                            <a onClick="@command('editar', status=each)"
                                label="${labels.common.pdf}" />
                        </tablechildren>
                        <tablechildren>
                            <a onClick="@command('editar', status=each)"
                                label="${labels.common.xls}" />
                        </tablechildren>
                    </tablelayout>
                </east>
            </borderlayout>

我不得不在我的第一个边框布局中嵌套另一个边框布局这有点太多了，但对我来说效果很好。

【讨论】：

我会在星期一审查您的解决方案。现在是周末，在家的时间不多。

【解决方案2】：

这是你想要的吗？

<hbox hflex="1" spacing="20" width="100%" widths="80%,20%">
        <vbox align="center" pack="start" spacing="20">
            <hbox spacing="5px">
                <label value="${labels.processos}" />
                <combobox id="cmbNovo" model="@load(vm.loadCombobox)"
                          readonly="true">
                    <comboitem label="@load(each)" />
                </combobox>
                <a onClick="@command('editar', status=each)"
                   label="${labels.alterarvisao}"/>
                <button id="novaVisao" label="${labels.novavisao}"
                        onClick="@command('novo')" />
            </hbox>
            <cell/>
            <cell>
                <button id="novo" label="${labels.message.novoprocesso}"
                    onClick="@command('novo')" />
            </cell>
        </vbox>
        <vbox pack="center" align="center" vflex="1" spacing="20" >
            <cell>
                <label value="${labels.common.exportar}" />
            </cell>
            <cell>
                <label value="${labels.common.exportar}" />
                    <a onClick="@command('editar', status=each)"
                            label="${labels.common.pdf}"/>
                    <a onClick="@command('editar', status=each)"
                            label="${labels.common.xls}"/>
            </cell>
            <cell>
                <label value="${labels.common.exportar}" />
                    <a onClick="@command('editar', status=each)"
                            label="${labels.common.pdf}"/>
                    <a onClick="@command('editar', status=each)"
                            label="${labels.common.xls}"/>
            </cell>
        </vbox>
    </hbox>

【讨论】：

@Danilo 欢迎您（只是为了好玩，我接近您想要的吗？）
其实，你已经很接近了！我必须进行一些调整，但这确实是我想要的！ vflex 有用吗？
不，您可以删除 vflex。 Trick is 是我为这两个地方设置 withs 的第一个 vbox。还有活的分隔符，所以你不需要在组件之间放置分隔符。你现在用哪个？