如何使用 UIBinder 在 GWT 项目的 ScrollPanel 中将内容制作为网格

Question

我有我的 GWT 项目，其中有以下电影列表视图：

蓝色框是插入到 ScrollPanel 中的 CompositeWidget。我想获得一个网格（4 列）而不是一条线作为视图。我是 CSS 的初学者，所以我不知道如何达到我的目的。非常感谢！

Answer 1

用 FlowPanel 包装您的小部件，使结构看起来像：

<g:ScrollPanel>
    <g:FlowPanel styleName="{style.canFitFourOnlyInaRow}">
       // add your blue boxes here
    </g:FlowPanel>
</g:ScrollPanel>

并定义一个名为 canFitFourOnlyInaRow 的样式，其宽度等于蓝色框的 4 倍宽度 + 根据需要增加额外的边距。

<ui:style>
   .canFitFourOnlyInaRow {width: 500px;} /* 500px just for example */
</ui:style>

这将使蓝色框 #5 跳到下一行。

顺便说一句，你只需要垂直滚动吗？

How make contents as a grid in a ScrollPanel in GWT project using UIBinder