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

如何解决生成嵌套在水平布局中的网格，但未完全显示

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

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,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

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

解决方法

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

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