Flutter ListTile - 将所有项目垂直对齐到中心答案

【问题标题】：Flutter ListTile - Vertical align all items to centerFlutter ListTile - 将所有项目垂直对齐到中心
【发布时间】：2021-12-21 17:25:49
【问题描述】：

我想将 ListTile 中的所有内容（标题、副标题、前导、尾随等）垂直居中对齐。最好的方法是什么？

const Padding(
    padding: EdgeInsets.fromLTRB(0, 20, 0, 20),
    child: Card(
      child: ListTile(
        leading: FlutterLogo(size: 55),
        title: Text('Overview'),
        subtitle: Text(
          '250.956.261',
        ),
        trailing: Icon(
          Icons.arrow_right_outlined,
          size: 30,
        ),
        isThreeLine: true,
      ),
    ),
),

【问题讨论】：

标签： flutter dart widget listtile

【解决方案1】：

您可以使用下面的替代代码来获得您想要的东西

         Padding(
          padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      const FlutterLogo(size: 55),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: const [
                          Text('Overview'),
                          Text(
                            '250.956.261',
                          ),
                        ],
                      ),
                    ],
                  ),
               const Icon(
                    Icons.arrow_right_outlined,
                    size: 30,
                  ),
                ],
              ),
            ),
          ),
        );

【讨论】：

感谢您的宝贵时间！虽然只是删除了“isThreeLine：true”，但正如@KGEM 提到的那样

【解决方案2】：

我最初误解你的问题是关于水平居中ListTile 的内容。要在卡片内垂直居中项目，您可能只需要禁用isThreeLine 参数。禁用它会导致内容垂直居中。

构建方法代码：

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Card(
        child: ListTile(
          leading: FlutterLogo(size: 55),
          title: Text('Overview'),
          subtitle: Text(
            '250.956.261',
          ),
          trailing: Icon(
            Icons.arrow_right_outlined,
            size: 30,
          ),
          // isThreeLine: true,
        ),
      ),
    );
  }

【讨论】：

哇！这么简单的解决方案。谢谢！