zk - ZK 布局问题

Question

我在制作以下布局时遇到问题。请提供一些代码示例如何创建以下布局。如屏幕截图所示，我需要两个大小相同的部分。左侧包含拉丁文本，右侧包含单选按钮和其余部分。“发件人” teksts 应该左对齐，数量和图标应该右对齐。如何以 ZK 和 ZK 方式构建这种布局的最佳方式？

截图示例

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>

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

PS：当然你需要应用 CSS 来让 ZK 网格不那么花哨。