2

我正在测试 Cuba-Platform，但我无法理解屏幕设计器中的布局选项。

我正在尝试均匀地分布表格和双列并在屏幕上对齐。（并在每个顶部添加一个标签）

拉伸容器（vbox 和 hbox）的最简单任务是困难的。当我将高度/宽度设置为 100% 时，其中的项目均匀分布在空间内。当我现在尝试将 vbox 中表格的高度设置为 100%（希望它会拉伸）时，它会重置为 100px。

我也尝试了网格组件，但是当我将其设置为 100% 时，列的高度都相同（不适合标签）

也许我的理解（来自 xaml/c# 和 ms-components）是完全错误的。请告诉我，如何创建视图并确保：

  • 组件的高度相同（如果需要，可以拉伸）
  • 组件对齐
  • 整个屏幕被填满

标签 标签
表 twincolum
okcancel

根据要求提供一个简单的图像 - 现在让我发疯的东西.. 在此处输入图像描述

我想添加一些我最终想出的代码 - 它还不是理想的东西：

<layout>
    <hbox id="hboxexpand"
          expand="assignTwinCol"
          height="100%"
          spacing="true"
          width="80%">
        <table id="userTable"
               height="100%"
               **width="auto"**>
            <columns>
                <column id="value1"
                        caption="msg://1"/>
                <column id="firstName"
                        description="msg://firstNameHeader"/>
                <column id="lastName"
                        caption="msg://nameHeader"/>
                <column id="active"
                        caption="msg://activeHeader"/>
            </columns>
            <rows datasource="userDs"/>
        </table>
        <twinColumn id="assignTwinCol"
                    addAllBtnEnabled="true"
                    height="100%"
                    optionsDatasource="myDs"/>
    </hbox>
</layout>

请注意：当我使用设计器时，**** 部分 width=auto 每次都会重置为 200px！我只能在 xml 设计器中更改它

4

1 回答 1

2

表格不完全支持自动宽度，因为列的宽度可以通过内容进行调整，所以我建议为表格使用固定或相对宽度。

<layout>
    <hbox expand="twinColumn"
          height="100%"
          spacing="true"
          width="100%">

        <table id="userTable"
               height="100%"
               width="400px">
            <columns>
                <column id="firstName"/>
                <column id="lastName"/>
                <column id="active"/>
            </columns>
            <rows datasource="usersDs"/>
        </table>

        <twinColumn id="twinColumn"
                    addAllBtnEnabled="true"
                    optionsDatasource="usersSelectDs"
                    height="100%"/>
    </hbox>
</layout>

如果要为 TwinColumn 列设置标题，可以使用 TwinColSelect 的 unwrap 方法和 Vaadin API：

public class Screen extends AbstractWindow {

    @Inject
    private TwinColumn twinColumn;
    @Inject
    private Table<User> userTable;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        TwinColSelect colSelect = twinColumn.unwrap(TwinColSelect.class);

        colSelect.setLeftColumnCaption("Header Left");
        colSelect.setRightColumnCaption("Header Left");

        Layout tableComposition = userTable.unwrapComposition(Layout.class);
        tableComposition.setCaption("Table Header");
    }
}

我们需要对齐 Table 和 TwinColumn 的标题。表格标题没有 TwinColumn 标题所具有的 padding-bottom 0.3em。我们可以使用样式名为表格添加填充：

<table id="userTable"
       height="100%"
       width="400px"
       stylename="padding">
    <columns>
        <column id="firstName"/>
        <column id="lastName"/>
        <column id="active"/>
    </columns>
    <rows datasource="usersDs"/>
</table>

然后我们使用 Studio 创建主题扩展并将 CSS 定义添加到 halo-ext.scss 文件：

.v-caption.v-caption-padding {
    padding-bottom: 0.3em;
}

现在重新启动应用程序，我们的标题已对齐！

CUBA 团队计划在下一个小版本中为组件添加标题和 leftColumnCaption/rightColumnCaption 属性，您将能够从 XML/Screen Designer 分配它们。

也可以看看：

于 2016-06-27T09:00:45.993 回答