如何从Flutter中的Rest API生成动态扩展图块列表？

Question

我一直在尝试从REST API通过HTTP-Get Request来的JSON数据列表中生成可扩展列表。它会通过ListView构建器成功生成ListView，但不会成功生成ExpansionTile。

我有JSON列表数据，其中前三名的学生具有不同的属性，例如姓名，注册，纪律，科，学期和cgpa。我想在扩展列表中显示其扩展列表标题为：“学科+学期+科”，所有三个学生将成为其子级。

import 'dart:async';
import 'dart:convert';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class bscsdata extends StatefulWidget {
  @override
  _bscsdataState createState() => _bscsdataState();
}

class _bscsdataState extends State<bscsdata> {

   List data;

   Future<String> getdata() async{
     var response = await http.get(
       Uri.encodeFull("http://192.168.8.101:88//api/student/allstudents"),
     headers: {
       "Accept" : "application/json"
     }
     );
     this.setState((){
       data = json.decode(response.body);
     });
   }
@override
  void initState() {
    this.getdata();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'BSCS',
          style: TextStyle(
            color: Colors.white,
            fontSize: 25.0,
          ),
        ),
        backgroundColor: Colors.blue,
      ),
      body: new ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index){
          return new ListTile(
            title: new Text(data[index]["Name"])
          );
        },
      )
    );
  }
}

Answer 1

您可以使用expandable软件包。

我试图根据您的json创建您想要的东西。

class Student {
  final String discipline;
  final String semester;
  final String section;
  final String name;

  Student({this.discipline, this.semester, this.section, this.name});
}

然后，使用您的构建方法

  List<Student> _studentGroup = <Student>[
    Student(discipline: 'BCS', semester: '7', section: 'B', name: 'Test Name'),
    Student(discipline: 'BCS', semester: '7', section: 'B', name: 'Test Name2'),
    Student(discipline: 'BCS', semester: '7', section: 'B', name: 'Test Name3'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //appbar
        body: Container(
          width: double.infinity,
          child: ExpandablePanel(
            header: Text(
                '${_studentGroup[0].discipline} ${_studentGroup[0].semester} ${_studentGroup[0].section}'),
            expanded: ListView.builder(
              shrinkWrap: true,
              itemCount: _studentGroup == null ? 0 : _studentGroup.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                    title: Text(_studentGroup[index].name),
                    subtitle: Text(
                      '${_studentGroup[index].discipline} - ${_studentGroup[index].semester}',
                    ));
              },
            ),
          ),
        ));
  }