如何从 Flutter 中的 Rest API 生成动态扩展磁贴列表？答案

【问题标题】：How to generate a dynamic expansion tile list from Rest API in Flutter?如何从 Flutter 中的 Rest API 生成动态扩展磁贴列表？
【发布时间】：2020-07-09 08:36:03
【问题描述】：

我一直在尝试从通过 HTTP-Get 请求来自 Rest API 的 JSON 数据列表生成可扩展列表。它通过 ListView builder 成功生成 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"])
          );
        },
      )
    );
  }
}

【问题讨论】：

标签： listview flutter flutter-layout

【解决方案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}',
                    ));
              },
            ),
          ),
        ));
  }

【讨论】：