ZK布局问题

Question

我有关于制作以下布局的问题。请给我提供一些代码示例如何创建以下布局。正如截图所描绘的，我需要两个大小相等的部分。左侧包含拉丁文本，右侧包含单选按钮和休息。"From“tekst应该左对齐，数量和图标应该右对齐。如何在ZK和ZK中以最佳方式构建此布局？

Screenshot Example

Answer 1

您可以查看以下演示代码，并根据您的需求调整组件

<zk>
  <window border="normal" title="hello" apply="pkg$.TestComposer" width="100%" height="100%">
    <hbox heights="40%,20%,40%"  width="100%" height="100%">
          <borderlayout width="100%" height="100%">

            <center>
               Here is My Content
            </center>

          </borderlayout>
          <borderlayout width="100%" height="100%">
             <center>
            <vbox widths="30%,30%,30%"  width="100%" height="100%">
              <checkbox />
              <checkbox />
               <checkbox />
               </vbox>
          </center>
          </borderlayout>
    <splitter width="100%"/>
          <borderlayout width="100%" height="100%">
            <center>
            <vbox widths="30%,30%,30%"  width="100%" height="100%">
              <label value = "hariom123"/>
               <label value = "hariom123"/>
               <label value = "hariom123"/>
              </vbox>
            </center>
          </borderlayout>
    </hbox>
  </window>
</zk>

您可以在Zk Fiddle中运行上述代码

Answer 2

考虑到您提供的详细程度，我很难回答这个问题。在未来，请务必发布一些代码，显示您尝试过的内容以及为什么它不起作用。有了这些，我们就可以让你很快回到正轨。你在这里的问题只是在寻找代码=/

<hlayout hflex="1">
    <!--
        size/flex on labels doesn't work, wrap label in a div to control size
    -->
    <div hflex="1">
        <label value="lorem ipsum.."/>
    </div>
    <grid hflex="1">
        <columns>
            <!--
                Last column is small, first two share available space.
            -->
            <column>
            <column>
            <column width="30px">
        </columns>
        <rows>
            <row>
                <radio label="This is a radio button"/>
                <label value="From: 100,00 $"/>
                <image src="info.png"/>
            <row>
            <row>
                <radio label="This is a radio button 2"/>
                <label value="From: 200,00 $"/>
                <image src="info.png"/>
            <row>
            <row>
                <radio label="This is a radio button 3"/>
                <label value="0,00 $"/>
                <image src="info.png"/>
            <row>
        </rows>
    </grid>
</hlayout>

有许多其他方法可以获得此布局。我选择了div旁边的grid，这样可以保证右侧的单选按钮、标签和图标对齐。不过，您还有其他选择。

PS:当然，您需要应用CSS来使ZK网格不那么华丽。