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

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的值为100%。这就是“让我尽可能大”。垂直布局具有100％的宽度和auto的flex-basis，这也可以翻译为“使我尽可能大”。显然，这会覆盖flex-grow值并使其共享空间50％/ 50％。

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

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

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

class FeedbacksView(private val feedbackService: FeedbackService) : HorizontalLayout() {
    private val grid;
    private val sidebar;

    init {
       width = "100%"; height = "100%"
       grid = grid<FeedbackListModel> {
           flexGrow = 3.0
           setItems(feedbackService.fetchFeedbacks())
           // add columns ...
       }
       sidebar = verticalLayout {
           flexGrow = 1.0
           text("foo")
       }
    }
}