[英]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.