ListTile 标题、尾随不居中答案

【问题标题】：ListTile Heading, Trailing are not CenteredListTile 标题、尾随不居中
【发布时间】：2019-08-05 17:28:34
【问题描述】：

所以这看起来很基本，但我无法弄清楚。我有一个 ListTile，它有一个前导复选框、一个标题和一个尾随图标。在上次 Flutter 更新中，由于某种原因，复选框和图标不再居中。我希望它们垂直居中。我尝试以各种方式将 Center()、Align()、Expanded() 和 Flexible() 添加到复选框，但它只是将标题推离屏幕或什么都不做。

有什么建议吗？任何帮助表示赞赏。

ListTile(
        leading: Checkbox(
          value: item.checked,
          onChanged: (bool newValue) {
            setState(() {
              item.checked = newValue;
            });
            firestoreUtil.updateList(user, taskList);
          },
          activeColor: Theme.of(context).primaryColor,
        ),
        title: InkWell(
            onTap: () {
              editTask(item);
            },
            child: Text(
              item.task,
              style: TextStyle(fontSize: 18),
            )),
        trailing: ReorderableListener(
          child: Container(
              padding: EdgeInsets.only(right: 16),
              child: Icon(Icons.drag_handle)),
        ),
        contentPadding: EdgeInsets.all(8),
      ),

调试模式：

【问题讨论】：

标签： dart flutter

【解决方案1】：

下面这个技巧对我有用，

leading: Container(
            constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
            height: double.infinity,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text( 
              ....

【讨论】：

【解决方案2】：

只需在具有 double.infinity 高度的容器内添加图标。

leading: Container(
                height: double.infinity,
                child: Icon(Icons.star),
              ),

【讨论】：

这可行，并且似乎是此页面上最简单的解决方案。在关注 App Brewery 的 Angela Yu 在第 6 节介绍 Card 和 ListTile 的免费“Introduction to Flutter Development Using Dart”时，就会发生这种垂直错位。它在她的屏幕录制上看起来是对齐的，可能是因为在她上课后出现了错位错误。
我正在为嵌套在 Dismissible 小部件中的 ListTile 寻找解决方案。似乎该解决方案不适用于背景孩子。
这在技术上不是错误，而是材料设计规范的变化。它发生在两个版本的 Flutter 之间，他们实现了该更改。我不记得 Flutter 的确切版本。

【解决方案3】：

在前导内使用 Column，并将 MainAxisAlignment 设置为居中

  leading: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Icon(leadingnIcon, color: Colors.blueGrey,),
    ],
   ),

【讨论】：

【解决方案4】：

我通过制作自己的 ListTile 解决了这个问题。它基本上只是带有填充的一行。效果很好，并且比 ListTile 更可定制。

【讨论】：

【解决方案5】：

使用 Padding Widget 为您的 leading 和 trailing Widget 提供 padding，

并将 Padding Widget top 属性设置为 "padding: EdgeInsets.only(top: value)" , 'value' of根据您的“ListTile”小部件 height / 2 为 ListTile 的中心分配顶部。

获取 ListTile Widget 的高度和宽度，您可以参考下面的链接： - https://medium.com/@diegoveloper/flutter-widget-size-and-position-b0a9ffed9407
- https://pub.dartlang.org/packages/rect_getter#-readme-tab-

【讨论】：