Как добавить столбцы в ListView во Flutter?

Я новичок в флаттере и последние пару дней занимаюсь построением пользовательского интерфейса. Домашняя страница моего поддельного приложения Music Player состоит из разделов ListView (Новые песни, Последние песни, хиты и т. Д.). У каждого раздела есть заголовок и другой ListView последних музыкальных композиций, как показано по этой ссылке: Использование столбца < / а>

Этот снимок был сделан с использованием столбца вместо списка. Но как только я добираюсь до нижней части экрана, столбец перестает быть полезным (как и должно быть). Поэтому мне нужно вместо этого использовать ListView. Однако как только я это сделаю, в теле приложения ничего не появится. Как это: Использование представления списка Вот этот раздел кода:

class PageBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.fromLTRB(18.0, 0.0, 0.0, 0.0),
      child: new ListView( // <-- If it's a column, it 'works'
        children: [
          new SectionTitle(title: 'Trending now'), // <-- Makes the section title
          new Padding(padding: new EdgeInsets.all(4.0)), // <-- Add some space
          new Expanded(child: new MusicsListView(musics: _trendingSongsList)), // <-- Makes the music List view
        ],
      )
    );
  }
}

flutter flutter-layout listview
person Lucas Bernardi    schedule 06.06.2018    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Если вы посмотрите журналы, вы, вероятно, увидите ошибку Expanded widgets must be placed inside Flex widgets.

Если вы затем удалите виджет Expanded, вы получите еще одну ошибку: Horizontal viewport was given unbounded height. В этом есть смысл. Вложенный список расположен горизонтально, поэтому он пытается расширяться по поперечной оси, но поперечная ось - это еще один список, поэтому он может расширяться бесконечно.

Поэтому вам нужно ограничить высоту этого горизонтального представления списка. Один из способов сделать это - использовать SizedBox, например

ListView(
    children: [
      new SectionTitle(title: 'Trending now'),
      new Padding(padding: new EdgeInsets.all(4.0)),
      new SizedBox(
        height: 300.0 // -> or whatever makes sense for you
        child: new MusicsListView(musics: _trendingSongsList)),
    ],
  )
person Edman    schedule 06.06.2018

arrow_upward
4
arrow_downward

Простое решение - просто использовать SingleChildScrollView. Если вам нужен один прокручиваемый столбец, оберните им этот столбец.

        SingleChildScrollView(
          child: Column(
            children: <Widget>[
person Tree    schedule 06.06.2018
comment
Самый простой способ - использовать SingleChildScrollView - person fajar ainul; 27.08.2020
comment
Документ SingleChildScrollView предполагает, что на самом деле более эффективно иметь Column в качестве одного из потомков ListView. Если у вас есть список дочерних элементов, и вам не требуется обертывание между осями, например список прокрутки, который всегда равен ширине экрана, рассмотрите вариант [ListView], который намного эффективнее, чем [SingleChildScrollView], содержащий элемент [ListBody] или [Column] с большим количеством детей. Источник: api.flutter.dev/flutter/widgets/. - person BelfDev; 13.02.2021

arrow_upward
1
arrow_downward

Использовать Listview Like

Column(
  children: <Widget>[
    Flexible(
      child: ListView(...), // It will provide scroll functionality with your column
    )
  ],
)
person Jitesh Mohite    schedule 13.06.2020