flutter dynamic expansionTile

前端 未结 3 2019
南方客
南方客 2020-12-16 06:10

Looking for some guidance on building expansionTile list dynamically. I have a successful Listview built dynamically from json API, but can not find any examples on buildin

3条回答
  •  攒了一身酷
    2020-12-16 06:47

    Reacting to you comment and edit of the question I took the liberty to write a working example. Feel free to edit or comment. I hope, this is what you wanted to achieve.

    import 'dart:async';
    
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    import 'dart:convert';
    
    void main() {
      runApp(new MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'ExpansionTile Test',
          home: new MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }
    
    class _MyHomePageState extends State {
      Future _responseFuture;
    
      @override
      void initState() {
        super.initState();
        _responseFuture = http.get('http://174.138.61.246:8080/support/dc/1');
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('ExpansionTile Test'),
          ),
          body: new FutureBuilder(
            future: _responseFuture,
            builder: (BuildContext context, AsyncSnapshot response) {
              if (!response.hasData) {
                return const Center(
                  child: const Text('Loading...'),
                );
              } else if (response.data.statusCode != 200) {
                return const Center(
                  child: const Text('Error loading data'),
                );
              } else {
                List json = JSON.decode(response.data.body);
                return new MyExpansionTileList(json);
              }
            },
          ),
        );
      }
    }
    
    class MyExpansionTileList extends StatelessWidget {
      final List elementList;
    
      MyExpansionTileList(this.elementList);
    
      List _getChildren() {
        List children = [];
        elementList.forEach((element) {
          children.add(
            new MyExpansionTile(element['did'], element['dname']),
          );
        });
        return children;
      }
    
      @override
      Widget build(BuildContext context) {
        return new ListView(
          children: _getChildren(),
        );
      }
    }
    
    class MyExpansionTile extends StatefulWidget {
      final int did;
      final String name;
      MyExpansionTile(this.did, this.name);
      @override
      State createState() => new MyExpansionTileState();
    }
    
    class MyExpansionTileState extends State {
      PageStorageKey _key;
      Future _responseFuture;
    
      @override
      void initState() {
        super.initState();
        _responseFuture =
            http.get('http://174.138.61.246:8080/support/dcreasons/${widget.did}');
      }
    
      @override
      Widget build(BuildContext context) {
        _key = new PageStorageKey('${widget.did}');
        return new ExpansionTile(
          key: _key,
          title: new Text(widget.name),
          children: [
            new FutureBuilder(
              future: _responseFuture,
              builder:
                  (BuildContext context, AsyncSnapshot response) {
                if (!response.hasData) {
                  return const Center(
                    child: const Text('Loading...'),
                  );
                } else if (response.data.statusCode != 200) {
                  return const Center(
                    child: const Text('Error loading data'),
                  );
                } else {
                  List json = JSON.decode(response.data.body);
                  List reasonList = [];
                  json.forEach((element) {
                    reasonList.add(new ListTile(
                      dense: true,
                      title: new Text(element['reason']),
                    ));
                  });
                  return new Column(children: reasonList);
                }
              },
            )
          ],
        );
      }
    }
    

提交回复
热议问题