[英]flutter: ListTile how to adapt leading margins and title/subtitle style?
I am building a form made up various Widgets and I would like to align them all.我正在构建一个由各种小部件组成的表单,我想将它们全部对齐。
In the following example, I am using a TextFormField, a ListTile among others.在以下示例中,我使用了 TextFormField、ListTile 等。
The problem is related to the alignment of both TextFormField > decoration > icon and the ListTile > leading.该问题与 TextFormField > 装饰 > 图标和 ListTile > 前导的对齐有关。
As you can see the ListTile > leading is absolutely not aligned with the TextFormField > decoration > icon.正如您所看到的,ListTile > 前导绝对没有与 TextFormField > 装饰 > 图标对齐。
In the documentation, I could not find any explanation on how to adapt the ListTile > leading "margin left"在文档中,我找不到关于如何调整 ListTile > 前导“左边距”的任何解释
Sub-question : How can I style both ListTile title and subtitle so that it looks like the TextFormField?子问题:如何设置 ListTile 标题和副标题的样式,使其看起来像 TextFormField?
Any help is more than welcome.任何帮助都非常受欢迎。
Source code extract:源代码摘录:
_buildBody() {
return new SafeArea(
top: false,
bottom: false,
child: new Form(
key: _formKey,
autovalidate: false,
child: new SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
/* -- Profile Picture -- */
const SizedBox(height: 24.0),
_buildProfilePicture(),
/* -- Alias -- */
new TextFormField(
decoration: const InputDecoration(
border: const UnderlineInputBorder(),
filled: true,
icon: const Icon(Icons.person),
hintText: 'Enter an alias',
labelText: 'Alias *',
),
onSaved: (String value) {
profile.alias = value;
},
validator: _validateAlias,
),
const SizedBox(height: 24.0),
/* -- Gender -- */
_buildGender(context),
const SizedBox(height: 24.0),
/* -- Self description -- */
new TextFormField(
decoration: const InputDecoration(
border: const OutlineInputBorder(),
hintText: 'Tell us about yourself',
labelText: 'Describe yourself',
),
maxLines: 5,
),
const SizedBox(height: 24.0),
/* -- Save Button -- */
new Center(
child: new RaisedButton(
child: const Text('Save'),
onPressed: _handleSave,
),
),
const SizedBox(height: 24.0),
],
),
),
),
);
}
_buildGender(BuildContext context) {
return new GestureDetector(
child: new ListTile(
leading: new Container(width: 24.0, height: 24.0, color: Colors.red),//const Icon(Icons.casino),
title: const Text('Gender'),
subtitle: new Text(profile.gender),
trailing: const Icon(Icons.arrow_drop_down),
dense: true,
),
onTap: () async {
await showModalBottomSheet<void>(
context: context,
builder: (BuildContext context){
return _buildGenderBottomPicker();
},
);
}
);
}
As I couldn't find any straightforward solution adapting the ListTile and there is not way of passing a negative margin to correct the default one set by the ListTile (refer to its source code), I decided to build my own one (simplified version):由于我找不到任何适用于 ListTile 的简单解决方案,并且无法通过负边距来更正 ListTile 设置的默认值(请参阅其源代码),因此我决定构建自己的一个(简化版) :
Here is the solution I came with:这是我带来的解决方案:
_buildGender(BuildContext context) {
List<Widget> children = <Widget>[];
/* -- leading -- */
children.add(new Container(
width: 40.0,
alignment: AlignmentDirectional.centerStart,
child: const Icon(Icons.album, color: Colors.grey),
));
/* -- title & subtitle -- */
children.add(new Expanded(
child: new Container(
height: 48.0,
padding: const EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
decoration: new BoxDecoration(
color: Color.fromRGBO(0, 0, 0, 0.05),
border: new Border(bottom: new BorderSide(color: Colors.black)),
),
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('Gender',
style: new TextStyle(color: Colors.blue, fontSize: 12.0)),
const SizedBox(height: 5.0),
new Text(profile.gender),
],
),
),
));
/* -- trailing -- **/
children.add(new Container(
width: 40.0,
height: 48.0,
alignment: AlignmentDirectional.centerEnd,
decoration: new BoxDecoration(
color: Color.fromRGBO(0, 0, 0, 0.05),
border: new Border(bottom: new BorderSide(color: Colors.black)),
),
child: const Icon(Icons.arrow_drop_down),
));
return new InkWell(
child: new Semantics(
child: new ConstrainedBox(
constraints: new BoxConstraints(minHeight: 60.0),
child: new UnconstrainedBox(
constrainedAxis: Axis.horizontal,
child: new SafeArea(
top: false,
bottom: false,
child: new Row(children: children),
),
),
),
),
onTap: () async {
await showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return _buildGenderBottomPicker();
},
);
});
} }
and the layout I obtained:和我获得的布局:
Of course there is still some work to do to improve the code, use the themes and finally make it a Widget but this is the very beginning.当然,还有一些工作要做,以改进代码、使用主题并最终使其成为 Widget,但这只是开始。
I simply wanted to share this code with you.我只是想与您分享此代码。
Simply wrap the Icon in Container with height: double.infinity只需用高度将图标包裹在容器中:double.infinity
ListTile(
leading: Container(
child:
Icon(Icons.account_circle),
height: double.infinity,)
Costumize predefined leading gap服装化预定义的领先差距
Ctrl click ListTile Widget > Search _minLeadingWidth (ctrl +f ) > its 40 as default, change to 10 or something Ctrl 单击ListTile Widget > Search _minLeadingWidth (ctrl +f ) > 默认为 40,更改为 10 或其他
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.