生成嵌套在水平布局中的网格，但未完全显示答案

【问题标题】：Grid nested in horizontal layout generated, but not displayed completely生成嵌套在水平布局中的网格，但未完全显示
【发布时间】：2021-07-21 08:59:55
【问题描述】：

我正在尝试将垂直布局放在一个水平布局中的网格旁边。

public class SprinklerDetailUI extends VerticalLayout {

    private final VerticalLayout nozzleDetailLayout;
    private final TextField nozzleName;
    private final TextArea nozzleDescription;
    private final TextField fitForSprinkler;

    private final Grid<FlowSetEntity> flowGrid;
    private final HorizontalLayout nozzleFlowLayout;

    private final Nozzle nozzle;

    List<FlowSetEntity> flowSetEntities = Stream.of(new FlowSetEntity(10, 4),
            new FlowSetEntity(10, 4),
            new FlowSetEntity(23, 35),
            new FlowSetEntity(534, 10),
            new FlowSetEntity(654, 53))
            .collect(Collectors.toList());

    public SprinklerDetailUI() {

        this.nozzleName = new TextField("Nozzle name");
        this.nozzleDescription = new TextArea("Description");
        this.fitForSprinkler = new TextField("Fit for sprinkler");
        this.nozzleDetailLayout = new VerticalLayout(nozzleName, nozzleDescription, fitForSprinkler);

        this.nozzle = new Nozzle();
        nozzle.setFlowSet(flowSetEntities);

        this.flowGrid = new Grid<>(FlowSetEntity.class);
        flowGrid.setColumns("pressure", "flowRate");
        flowGrid.setItems(nozzle.getFlowSet());
        flowGrid.setSizeFull();

        this.nozzleFlowLayout = new HorizontalLayout(nozzleDetailLayout, flowGrid);
        nozzleFlowLayout.setSizeFull();
        add(nozzleFlowLayout);
    }
}

FlowSetEntity.class

@Entity
@Getter
@Setter
@NoArgsConstructor
public class FlowSetEntity implements Comparable<FlowSetEntity> {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    private double pressureInAtm;

    private double flowRateInLPM;

    @Transient
    private Quantity<Pressure> pressure;

    @Transient
    private Quantity<FlowRate> flowRate;

    @ManyToOne(optional = false)
    private Nozzle nozzle;

    public FlowSetEntity(double pressureInAtm, double flowRateInLPM) {
        this.pressureInAtm = pressureInAtm;
        this.flowRateInLPM = flowRateInLPM;
        this.pressure = toAtm(pressureInAtm);
        this.flowRate = toLPM(flowRateInLPM);
    }

    @Override
    public int compareTo(FlowSetEntity o) {
        int pressureCompare = Double.compare(this.pressureInAtm, o.pressureInAtm);
        int flowCompare = Double.compare(this.flowRateInLPM, o.flowRateInLPM);
        return pressureCompare != 0 ? pressureCompare : flowCompare;
    }
}

生成的页面如下所示：

browser view

我似乎正确生成了网格结构，但由于某种原因它没有完全显示。在垂直布局中显示相同的网格时，一切都很好。

【问题讨论】：

标签： spring vaadin vaadin-grid vaadin14

【解决方案1】：

根据该 UI 代码，我猜您只是在最外面的 VerticalLayout 上缺少高度。这意味着其中的 HorizontalLayout 和其中的 Grid 的高度设置为 100%。

Grid 旁边的表单正确呈现，因为它没有定义高度，并且包含 HorizontalLayout 获得一个固有高度来容纳该表单，但是 Grid 上的 100% 仍然根据缺少的定义高度进行评估, 因为 css。

【讨论】：