Question

我正在尝试将一个简单的Grid放入带有侧边栏的HorizontalLayout中（目前只是一个Text框）看起来像这样：

class FeedbacksView constructor(private val feedbackService: FeedbackService) : HorizontalLayout() {
    private val grid = Grid<FeedbackListModel>().apply {
        setItems(feedbackService.fetchFeedbacks())
        // add columns ...
    }

    private val sidebar = VerticalLayout().apply {
        add(Text("foo"))
    }

    init {
        width = "100%"
        height = "100%"
        setFlexGrow(3.0, grid)
        setFlexGrow(1.0, sidebar)
        add(grid, sidebar)
    }

}

，由于某种原因，布局无法填充屏幕，也无法填充网格。尽管将flex分别设置为3和1，但网格和侧边栏的宽度均为50％。

可能是什么问题？

Answer 1

问题是:host上的<vaadin-grid>指定了flex: 1 1 100%，此处的重要部分是值为flex-basis的{{1}}。这就是“让我尽可能大”。垂直布局的宽度为100％，具有auto的flex-basis功能，这也转化为“使我尽可能大”。显然，这会覆盖flex-grow值，并使它共享50％/ 50％的空间。

解决方法是将100%添加到flex-basis: auto并将<vaadin-grid>的宽度设置为VerticalLayout。然后，它们将保持75％/ 25％的比率（即flex-grow 3/1）。

对于Vaadin 8而言，这绝对是很奇怪的：）我写了一篇博客文章Vaadin 10 layouting for Vaadin 8 devs-您可能会发现它很有用。

ps：您可以使用Karibu-DSL库；那么您将可以按照以下方式重写代码：

null

“水平布局”中的Vaadin网格无法填充屏幕，并且弹性增长无法正常工作

1 个答案: