这是我在屏幕上的内容:
https://i.imgur.com/oSblgWD.png
如何将姓氏对齐以使其位于名字下?我不想在姓氏旁边放一个图标,只是在名字旁边。
这是我的代码。谢谢。
body: Center(
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
ListTile(
leading: const Icon(Icons.person),
title: new TextField(
decoration: new InputDecoration(
hintText: "First name",
),
),
),
ListTile(
title: new TextField(
decoration: new InputDecoration(
hintText: "Last name",
),
),
),
],
),
)
)
简单而优雅的方式是使用Padding
Widget。
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Form(
// key: _formKey,
child: Column(
children: <Widget>[
ListTile(
leading: const Icon(Icons.person),
title: new TextField(
decoration: new InputDecoration(
hintText: "First name",
),
),
),
ListTile(
leading: Padding(padding: EdgeInsets.all(16.0)),
title: new TextField(
decoration: new InputDecoration(
hintText: "Last name",
),
),
),
],
),
)),
);
}
你可以添加一个固定宽度的空Container
作为leading
到姓氏TextField
,或者你可以将你的姓氏TextField
包裹在Padding
中并从左边提供一些padding
。
例:
ListTile(
leading: Container(
width: 200.0, //You can adjust the width as required
),
title: new TextField(
decoration: new InputDecoration(
hintText: "Last name",
),
),
),
要么
ListTile(
title: Padding(
padding: padding: EdgeInsets.only(left: 200.0) //Adjust as required
child: new TextField(
decoration: new InputDecoration(
hintText: "Last name",
),
),
),
),
通过将图标颜色更改为colors.transparent来快速破解。我不知道这是否正确。
body: Center(
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
ListTile(
leading: const Icon(Icons.person),
title: new TextField(
decoration: new InputDecoration(
hintText: "First name",
),
),
),
ListTile(
leading: const Icon(Icons.person,color: Colors.transparent),
title: new TextField(
decoration: new InputDecoration(
hintText: "Last name",
),
),
),
],
),
)
)