我使用 Vaadin 13 beta1 预发布版创建了一个自定义字段。但是,它在字段顶部创建了这个巨大的空白区域(请参阅下面的绿色标记,并忽略红色和黄色背景颜色,因为它们只是为了让我了解正在发生的事情。)
我怎样才能解决这个问题?我尝试手动设置 minHeight、maxHeight、height 值,但没有任何改变......这是我的自定义字段代码。(formlayout 的代码是相当标准的,所以这里不包括在内。)
package com.deepsearch.fe.util;
import com.vaadin.flow.component.customfield.CustomField;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.textfield.TextField;
public class TextRangeFieldInt extends CustomField<StartToEndRangeInt> {
private final TextField start = new TextField();
private final Label lblTo = new Label("to");
private final TextField end = new TextField();
public TextRangeFieldInt(final StartToEndRangeInt startToEndRangeInt, final String startEndWidths) {
this.setHeight("10px");
this.setMinHeight("10px");
this.setMaxHeight("10px");
this.getElement().getStyle().set("background-color", "red");
//this.getStyle().set("background-color", "red");
setPresentationValue(startToEndRangeInt);
final HorizontalLayout hl = new HorizontalLayout();
hl.setWidth("100%");
hl.getStyle().set("background-color", "yellow");
hl.setMargin(false);
hl.setPadding(false);
hl.setAlignItems(FlexComponent.Alignment.CENTER);
lblTo.setWidth("1.5rem");
start.setWidth(startEndWidths);
end.setWidth(startEndWidths);
hl.add(start);
hl.add(lblTo);
hl.add(end);
add(hl);
}
@Override
protected StartToEndRangeInt generateModelValue() {
return new StartToEndRangeInt(Integer.parseInt(start.getValue()), Integer.parseInt(end.getValue()));
}
@Override
protected void setPresentationValue(StartToEndRangeInt newPresentationValue) {
start.setValue(newPresentationValue.getStartStr());
end.setValue(newPresentationValue.getEndStr());
}
}
在不同但相关的说明中,我这样做对吗?自定义字段还没有一个很好的例子(因为它仍处于测试阶段),所以我猜我应该使用水平布局来添加我的各个组件等。
更新#1
基于下面的@Jouni 评论,我尝试创建一个更简单的表单布局,它只有几个“简单”字段(例如,所有文本字段,没有什么像复选框那样花哨)。但问题依然存在。请参阅下面的屏幕截图以及表单布局的源代码。(注意:我什至注释掉了表单布局的“responsiveStep”部分,以便只使用默认/简单场景。)
而且,这是代码片段(没什么花哨的):
final FormLayout nameLayout = new FormLayout();
// nameLayout.setResponsiveSteps(
// // new FormLayout.ResponsiveStep("0", 1),
//// new FormLayout.ResponsiveStep("21em", 2),
// new FormLayout.ResponsiveStep("0em", 3));
// nameLayout.add(uniqueExpName, sampleComplexity, gradientLength, numTechRepl, minMz, maxMz, enableVariableDiaWindow, densestMz, vlSampleCondit, useSettingsNextTime);
// nameLayout.add(uniqueExpName, sampleComplexity, gradientLength, numTechRepl, mzRange, enableVariableDiaWindow, densestMz, vlSampleCondit, useSettingsNextTime);
// nameLayout.add(uniqueExpName, sampleComplexity, gradientLength, numTechRepl, mzRange, enableVariableDiaWindow, densestMz, lblSampleAndConditionNumber, sampleAndCondNum);
nameLayout.add(uniqueExpName, gradientLength, numTechRepl, mzRange, densestMz);
nameLayout.setWidth("55rem");
add(nameLayout);
setAlignSelf(Alignment.CENTER, nameLayout);