ListTile 标题、尾随不居中

Question

所以这看起来很基本，但我无法弄清楚。我有一个 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),
      ),

调试模式：

Answer 1

使用 Column 内的领先，并将 MainAxisAlignment 设置为 center

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

Answer 2

只需在容器内添加具有 double.infinity 高度的 Icon 即可。

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

Answer 3

尝试下面的代码

ListTile(
  leading: const SizedBox(
       height: double.infinity,
       child: Icon(Icons.location_on_rounded)),
  tileColor: DesignColor.grey,
  title: "Title 1".textMediumRegular(),
  subtitle: "Title 2".textSmall(),
  trailing: const SizedBox(
       height: double.infinity,
       child: Icon(Icons.edit_rounded)),
)

输出：

注意并不适用于所有情况！

在 Flutter 中ListTile，使用时leading和trailing不会跨越 的整个高度。因此，使用 row 创建您自己的小部件。ListTilesubtitle

两个小部件之间的详细比较：

使用我的自定义代码：

class CustomListTile extends StatelessWidget {
  Widget? trailingWidget;
  late CrossAxisAlignment crossAxisAlignment;
  late TextStyle titleStyle;
  late TextStyle subtitleStyle;
  String title;
  String? subtitle;
  Widget? leadingWidget;
  CustomListTile(
      {super.key,
      this.trailingWidget,
      this.crossAxisAlignment = CrossAxisAlignment.center,
      this.titleStyle =
          const TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
      this.subtitleStyle =
          const TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
      required this.title,
      this.subtitle,
      this.leadingWidget});

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: crossAxisAlignment,
      children: [
        leadingWidget ?? Container(),
        const SizedBox(
          width: 16,
        ),
        Expanded(
          child: Column(
            children: [
              Text(
                title,
                style: titleStyle,
              ),
              Text(subtitle ?? "", style: subtitleStyle),
            ],
          ),
        ),
        const SizedBox(width: 16),
        trailingWidget ?? Container()
      ],
    );
  }
}

额外的：

供您解决的图像代码

        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                color: Colors.blue,
                child: ListTile(
                  minLeadingWidth: 0,
                  isThreeLine: true,
                  minVerticalPadding: 0,
                  contentPadding: EdgeInsets.zero,
                  leading: Container(
                    color: Colors.orange,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Icon(
                          Icons.home,
                        ),
                      ],
                    ),
                  ),
                  title: Container(
                    color: Colors.pink,
                    child: const Text(
                        "This is very long long long long title of the list view"),
                  ),
                  subtitle: Container(
                    color: Colors.yellow,
                    child: const Text(
                        "This is very long long long long subtitle of the list view . This is very long long long long subtitle of the list view .This is very long long long long subtitle of the list view "),
                  ),
                  trailing: Container(
                    color: Colors.orange,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Icon(
                          Icons.home,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Container(
                color: Colors.blue,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      color: Colors.orange,
                      child: const Icon(Icons.home),
                    ),
                    const SizedBox(
                      width: 16,
                    ),
                    Expanded(
                      child: Column(
                        children: [
                          Container(
                            color: Colors.pink,
                            child: const Text(
                              "This is very long long long long title of the list view ",
                              style: TextStyle(
                                  fontSize: 16, fontWeight: FontWeight.w600),
                            ),
                          ),
                          Container(
                            color: Colors.yellow,
                            child: const Text(
                              "This is very long long long long subtitle of the list view . This is very long long long long subtitle of the list view .This is very long long long long subtitle of the list view ",
                              style: TextStyle(
                                  fontSize: 14, fontWeight: FontWeight.w400),
                            ),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(width: 16),
                    Container(
                      color: Colors.orange,
                      child: const Icon(Icons.home),
                    ),
                  ],
                ),
              )
            ],
          ),
        ));

Answer 4

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