Как убрать пробел вверху и внизу ListTile трепетать?

Как убрать пробел сверху и снизу из ListTile?

Мой код:

 child: Column(
    children: <Widget>[
      ListTile(
        contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
        title: Text(
          'Home',
          style: TextStyle(fontSize: 15.0),
        ),
      ),
      ListTile(
        contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
        title: Text(
          'Audio',
          style:
              TextStyle(fontSize: 15.0, color: Colors.black45),
        ),
      ),),

Снимок экрана:

Как убрать пробел вверху и внизу ListTile трепетать?

26
0
26 370
10
Перейти к ответу Данный вопрос помечен как решенный

Ответы 10

Попробуй это

              child: Column(
                children: <Widget>[
                    Text(
                      'Home',
                      style: TextStyle(fontSize: 15.0),
                    ),
                    Text(
                      'Audio',
                      style:
                          TextStyle(fontSize: 15.0, color: Colors.black45),
                    ),
                 ),)
Ответ принят как подходящий

С ListTile это невозможно. Некоторые модификации возможны с помощью цвета ListTileTheme, а также есть возможность изменить отступ, но он работает только для левого и правого отступов. Так что лучше создать свою собственную плитку, как показал @santosh в своем ответе. Вы также можете использовать SizedBox, но это может привести к трагическому результату.

Да, это возможно с помощью visualDensity. Проверить : stackoverflow.com/a/63504719/6747251

reverie_ss 25.08.2020 15:45

В вашем коде поместите свойство плотно: true внутри плитки списка

       ListTile(
                dense:true,
                contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
                title: Text(
                  'Home',
                  style: TextStyle(fontSize: 15.0),
                ),
              ),

Надеюсь, поможет!

Он удаляет только горизонтальные отступы, а не вертикальные.

Alireza Akbari 31.07.2020 06:16

Одно только «dense: true» уменьшало интервал по вертикали. но заполнение содержимого не работало для проблемы с вертикальным интервалом

Karan Alangat 09.09.2020 14:01

Для меня виджет Padding работал вместо переменной ListTile.padding, которую можно обновить в соответствии с вашими требованиями для ListItem.

Padding(
        padding: const EdgeInsets.only(left : 8.0 , right 8.0),
        child: Text("List Item Text",
            style: Theme.of(context).textTheme.body1))

Реализация этого dense:true, в ваших ListTile Свойствах. Плотный параметр уменьшает текст и упаковывает все вместе.

Вы можете изменить, насколько содержимое вставляется слева и справа (но не сверху или снизу), установив contentPadding. По умолчанию 16,0, но здесь мы установим 0,0:

 ListTile(
   contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 
    0.0),
   dense:true,
   title: Text("Your title"),
   subtitle: Text("subtitle",
    style: TextStyle(fontSize: 14.0),),
 );

Мне нужно было dense: true центрировать мой title текст по вертикали. Спасибо!

kakyo 26.07.2020 05:39

ОБНОВИТЬ

Теперь вы также можете использовать следующее свойство:

  1. horizontalTitleGap - Между заглавие и ведущий
  2. minVerticalPadding - Между заглавие и подзаголовок
  3. minLeadingWidth - Минимальная ширина ведущий
  4. contentPadding - Внутренняя обивка

СТАРЫЙ

Вы можете использовать свойство visualDensity, чтобы уменьшить пространство.

ListTile(
    visualDensity: VisualDensity(horizontal: 0, vertical: -4),
    title: Text("xyz")
);

Значение visualDensity можно изменить с -4.0 to 4.0. Чем меньше значение, тем компактнее вид.

P.S. Это решение похоже на другой вопрос

Этот вопрос касается интервала top/bottom. Но другой вопрос — это разрыв между leading и title.

Я не могу найти эту "visualDensity" в свойствах виджета ListTile!!!

Alex Roy 28.08.2020 08:57

решено 50% пространства, все еще есть зазор в 6-8 пикселей между верхней частью Listtile и содержимым.

Kamlesh 28.02.2021 10:30

@Kamlesh, вы можете создать собственную плитку со списком, если вам нужна большая гибкость.

reverie_ss 02.03.2021 12:44

@reverie_ss Хорошо, спасибо.

Kamlesh 02.03.2021 12:59

visualDensity может уменьшить высоту между ListTiles

Rudy Rudy 05.06.2021 10:30

minVerticalPadding отлично сработал для меня.

Abbas Sabeti 19.08.2021 15:09

Это сработало для меня в ListTile:

visualDensity: VisualDensity(horizontal: 0, vertical: -4)
ListTile(
    dense: true,
    contentPadding: EdgeInsets.symmetric(horizontal: 0.0, vertical: 0.0),
    visualDensity: VisualDensity(horizontal: 0, vertical: -4),
);

Вышеупомянутое решение сработало для меня. Надеюсь, это также поможет вам. Спасибо, что задали этот вопрос.

Попробуем короче:

ListTile(
          contentPadding: EdgeInsets.zero,
          dense: true,
          title: Text('label'),
        );
contentPadding помог мне убрать левое правое пространство
Mrinmoy 24.06.2021 16:51

Ни одно из приведенных выше решений не будет работать (пока). Лучше всего использовать TextButton и включить Row в качестве дочернего элемента.

Другие вопросы по теме