Question

我想在可扩展列表视图中显示数据。例如，我需要下面的列表作为listView的标题... days = ['Monday'，'Tuesday'，'Wednesday'] ... 并根据天列表中的日期进行扩展...。以下数据将在同一天填充。

List<Cars> dummyData = [
Cars(
model: 'Fiat',
speed: '100',
day: 'Monday',
),
Cars(
model: 'Maruti',
speed: '120',
day: 'Monday',
),
Cars(
model: 'Hyundai',
speed: '130',
day: 'Tuesday',
),
Cars(
model: 'Toyota',
speed: '140',
day: 'Wednesday',
),
]

如果您需要我的其他补充信息，请告诉我。

Answer 1

您可以使用expantionTile小部件来实现。

以下代码可能会对您有所帮助。

<script type="text/javascript">
            $(
                function(){
                    var aud = $('audio')[0];
                    $('.playpause').on('click', function(e){
                        e.preventDefault();
                    if (aud.paused) {
                        aud.play();
                        /* from play icon to pause icon */
                        $('.playpause .fa-play').remove();
                        $('.playpause').append('<i class="fa fa-pause"></i>');
                    }
                    else {
                        aud.pause();
                        /* from play icon to pause icon */
                        $('.playpause .fa-pause').remove();
                        $('.playpause').append('<i class="fa fa-play"></i>');
                    }

                })
                $('.next').on('click', function(e){
                    e.preventDefault();
                    aud.src = '{$content:audio-file}';
                })
                $('.previuos').on('click', function(e){
                    e.preventDefault();
                    aud.src = '{$content:audio-file}';
                })
                aud.ontimeupdate = function(){
                    $('.progress').css('width', aud.currentTime / aud.duration * 100 + '%')
                }
            })
        </script>

Answer 2

首先重组数据，如下所示：

final organizedData = new HashMap<String, List<Car>>();
for(final car in dummyData){
    if(!organizedData[car.day]){
        organizedData[car.day] = new List<Car>();
        organizedData[car.day].add(car);
    }else{
        organizedData[car.day].add(car);
    }
}

这样做，您将可以每天在地图中对汽车进行分组，例如，organizedData [“ Monday”]将包含两辆汽车的列表，依此类推。

现在将所有内容都放在带有expandable小部件的ListView中，也许是这样的：

  Widget expandableList() {
    return ListView.builder(
      itemCount: organizedData.length,
      itemBuilder: (context, index) {
        String day = organizedData.keys.elementAt(index);
        return Card(
          child: ExpandablePanel(
            header: day,
            collapsed: Text('some text', softWrap: true, maxLines: 2, overflow: TextOverflow.ellipsis,),
            expanded: Card(
              child: Row(
              children: carsUI(organizedData[day]),
              ),
            tapHeaderToExpand: true,
            hasIcon: true,
          ),
        );
      },
    );
  }

  List<Widget> carsUI(List<Car> cars){
    final ui = cars.map((car){
      return Text(car.speed + ", " + car.model);
    }).toList();
    return ui;
  }

我希望这会有所帮助。

Answer 3

您可以使用ListView.builder（）小部件来呈现动态列表，此方法是一种有效的方法。

ListView.builder(
  itemCount: dummyData.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Column(
        children: <Widget>[
          Text(dummyData[index].model),
          Text(dummyData[index].day),
        ]
      ),
      trailing: Text(dummyData[index].speed)
    )
  }
)

如何在Flutter中显示可扩展列表中的数据

3 个答案: