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

Question

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

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

我好像生成了正确的网格结构，但不知为何显示不完整。在垂直布局中显示相同的网格时一切正常。

Answer 1

根据该 UI 代码，我猜测您只是缺少最外层 VerticalLayout 的高度。这意味着其中的 HorizontalLayout 以及其中的 Grid 的高度设置为 100% 为空。

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

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

Grid nested in horizontal layout generated, but not displayed completely

spring

vaadin

vaadin-grid

vaadin14