我不知道为什么TextField文本和蓝线之间的底部没有空格。
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对的decoration:属性使用折叠状态TextField。
InputDecoration
decoration:
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()构造函数:
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({