扑：ListTile如何适应页边距和标题/字幕样式？

Question

我正在构建一个由各种小部件组成的表单，我想将它们全部对齐。

在下面的示例中，我正在使用TextFormField，ListTile等。

该问题与TextFormField>装饰>图标和ListTile>前导的对齐有关。

如您所见，ListTile>前导绝对不与TextFormField>装饰>图标对齐。

在文档中，我找不到有关如何调整ListTile>前导“左边距”的任何解释

子问题：如何设置ListTile标题和副标题的样式，使其看起来像TextFormField？

任何帮助都超过了欢迎。

源代码摘录：

_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();
          },
        );
      }
    );
  }

快照：（我已标记为未对齐）

Answer 1

由于找不到适合ListTile的简单解决方案，并且无法传递负的边距来校正ListTile的默认设置（请参阅其源代码），因此，我决定构建自己的解决方案（简化版） ：

这是我附带的解决方案：

_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();
        },
      );
    });

}

和我获得的布局：

当然，仍然需要做一些工作来改进代码，使用主题并最终使其成为Widget，但这只是开始。

我只是想与您分享此代码。