Flutter-如何將ListTile（或Row）的內容居中（垂直）？

所以我有 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 的整體高度也更大。如果我試圖增加其中任何一個，它就會搞砸。

uj5u.com熱心網友回復：

您應該只洗掉 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,
  ),

標籤：扑 列表显示 排 垂直对齐

上一篇：WPFMahAppsListview性能

下一篇：SwiftUI：檢測點擊已選擇的串列項