Блог

Итак, у меня есть ListView.builder и некоторый контент в нем. Как вы можете видеть в коде, я пытался использовать как лист, так и строку, но (все) содержимое не будет оставаться в центре(по вертикали). Любое изменение размера значка или самого списка еще больше портит его.

   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,
  ),
 

Как я могу постоянно центрировать содержимое, чтобы изменение высоты строки/списка или размера значка не испортило структуру?

Редактировать:

Это выглядит центрированным, но я хочу, чтобы значок воспроизведения был больше, а также общая высота листа списка. Если я попытаюсь увеличить любой из них, это все испортит.

Вы должны просто удалить элемент, поместить строку в контейнер и указать высоту контейнера. также установите для главной оси столбца заголовка значение 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,
  ),