Flutter - 如何使 ListTile（或 Row）的内容居中（垂直）？答案

【问题标题】：Flutter - How to center(vertically) the contents of a ListTile (or Row)?Flutter - 如何使 ListTile（或 Row）的内容居中（垂直）？
【发布时间】：2021-11-26 07:40:17
【问题描述】：

所以我有 ListView.builder 和其中的一些内容。正如您在代码中看到的那样，我尝试了 ListTile 和 Row，但（所有）内容不会留在中心（垂直）。图标大小的任何变化，或者 ListTile 本身都会把它弄得更乱。

  child: ListView.builder(
    itemExtent: size * 0.3,
    itemBuilder: (context, index) => Column(
      children: [
        const Divider(
          //height: 2,
          color: color,
          thickness: 1,
        ),

        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: size * 0.2,
              //padding: EdgeInsets.only(bottom: 0),
              child: IconButton(
                icon: const Icon(
                  Icons.play_circle_outlined,
                  size: 50,
                  color: Colors.black,
                ),
                onPressed: () {},
              ),
            ),
            Column(
              children: [
                Text(
                  'Recording ' '${index + 1}',
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const Text(
                  '00:20',
                  style: TextStyle(color: Colors.black),
                ),
              ],
            ),
            IconButton(
              icon: const Icon(
                Icons.more_vert,
                size: 35,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            // ),
          ],
        ),
        // Divider(
        //   color: color,
        //   thickness: 1,
        // ),

        // ListTile(
        //   dense: true,
        //   leading: IconButton(
        //     icon: const Icon(
        //       Icons.play_circle_outlined,
        //       size: 40,
        //       color: Colors.black,
        //     ),
        //     onPressed: () {},
        //   ),
        //   //),
        //   trailing: Container(
        //     height: double.infinity,
        //     child: IconButton(
        //       icon: const Icon(
        //         Icons.more_vert,
        //         size: 35,
        //         color: Colors.black,
        //       ),
        //       onPressed: () {},
        //     ),
        //   ),
        //   title: Text(
        //     'Recording ' '${index + 1}',
        //     style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        //   ),
        //   subtitle: Text(
        //     '00:20',
        //     style: TextStyle(color: Colors.black),
        //   ),
        // ),
      
      ],
    ),
    itemCount: 3,
  ),

我怎样才能让内容始终居中，以便更改 Row/ListTile 的高度或图标大小不会弄乱结构？

编辑：

这看起来居中，但我希望播放图标更大，并且 ListTile 的整体高度也更大。如果我试图增加其中任何一个，它就会搞砸。

【问题讨论】：

标签： flutter listview row vertical-alignment

【解决方案1】：

您应该只删除 itemExtent 并将您的 Row 放入一个 Container 中并将高度指定给 Container。还将标题列的 mainAxisAlignment 设置为 MainAxisAlignment.center。

ListView.builder(
    // itemExtent: size * 0.3,
    itemBuilder: (context, index) => Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Divider(
          height: 1,
          color: Colors.red,
          thickness: 1,
        ),
        Container(
          height: size * 0.3,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: size * 0.2,
                //padding: EdgeInsets.only(bottom: 0),
                child: IconButton(
                  icon: const Icon(
                    Icons.play_circle_outlined,
                    size: 50,
                    color: Colors.black,
                  ),
                  onPressed: () {},
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Recording ' '${index + 1}',
                    style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const Text(
                    '00:20',
                    style: TextStyle(color: Colors.black),
                  ),
                ],
              ),
              IconButton(
                icon: const Icon(
                  Icons.more_vert,
                  size: 35,
                  color: Colors.black,
                ),
                onPressed: () {},
              ),
              // ),
            ],
          ),
        ),
        // Divider(
        //   color: color,
        //   thickness: 1,
        // ),

        // ListTile(
        //   dense: true,
        //   leading: IconButton(
        //     icon: const Icon(
        //       Icons.play_circle_outlined,
        //       size: 40,
        //       color: Colors.black,
        //     ),
        //     onPressed: () {},
        //   ),
        //   //),
        //   trailing: Container(
        //     height: double.infinity,
        //     child: IconButton(
        //       icon: const Icon(
        //         Icons.more_vert,
        //         size: 35,
        //         color: Colors.black,
        //       ),
        //       onPressed: () {},
        //     ),
        //   ),
        //   title: Text(
        //     'Recording ' '${index + 1}',
        //     style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        //   ),
        //   subtitle: Text(
        //     '00:20',
        //     style: TextStyle(color: Colors.black),
        //   ),
        // ),
      ],
    ),
    itemCount: 3,
  ),

【讨论】：

我更喜欢使用 ListTile，但由于我无法使用 ListTile 来实现它，我想我会使用 Row。使用 Row 的问题在于，您需要对标题和副标题文本进行额外的调整，使其左对齐。