[英]How to remove Space at the bottom of TextField in flutter?
我不明白为什么TextField
底部的文本和蓝线之间有空间。
这是我的代码:
Future<Null> _selectNoteType (BuildContext context) async {
switch (await showDialog<Null>(
context: context,
builder: (BuildContext context) {
return new SimpleDialog(
title: const Text('Select Note Type'),
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: new TextField(
keyboardType: TextInputType.text,
maxLines: 1,
style: new TextStyle(
color: Colors.black,
fontSize: 20.0
),
),
),
new SimpleDialogOption(
onPressed: () {},
child: const Text('Text')
),
new SimpleDialogOption(
onPressed: () {},
child: const Text('Checklist')
),
],
);
}
)) {}
}
在我的情况下,即使使用InputDecoration.collapsed()
, TextField
仍然不会折叠。
我的版本根本没有任何填充并采用最小尺寸:
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0.0),
isDense: true,
border: InputBorder.none,
),
minLines: 1,
maxLines: 1,
);
实时预览: https : //dartpad.dev/3f9149a1c8f5eec352c796e7585e233c
您可以将折叠的InputDecoration
用于decoration:
TextField
属性。
Future<Null> _selectNoteType(BuildContext context) async {
InputDecoration decoration = const InputDecoration.collapsed()
..applyDefaults(Theme.of(context).inputDecorationTheme);
switch (await showDialog<Null>(
context: context,
builder: (BuildContext context) {
return new SimpleDialog(
title: const Text('Select Note Type'),
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: new TextField(
decoration: decoration,
keyboardType: TextInputType.text,
maxLines: 1,
style: new TextStyle(color: Colors.black, fontSize: 20.0),
),
),
new SimpleDialogOption(
onPressed: () {}, child: const Text('Text')),
new SimpleDialogOption(
onPressed: () {}, child: const Text('Checklist')),
],
);
})) {
}
}
但是您必须知道使用折叠的InputDecoration
的后果。 从文档:
/// Whether the decoration is the same size as the input field.
///
/// A collapsed decoration cannot have [labelText], [errorText], an [icon].
///
/// To create a collapsed input decoration, use [InputDecoration..collapsed].
final bool isCollapsed;
对于InputDecoration.collapse()
构造函数:
/// Defines an [InputDecorator] that is the same size as the input field.
///
/// This type of input decoration does not include a border by default.
///
/// Sets the [isCollapsed] property to true.
const InputDecoration.collapsed({
isDense会解决问题。 使用较少的垂直空间
TextField(
decoration: InputDecoration(
isDense: true,
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.