来自 json 的 Flutter ExpansionTile

Question

我有一个 flutter 应用程序，它在列表视图中显示来自 RESTapi 的用户列表。但是，我想在扩展磁贴中显示用户列表，以显示有关他们的更多详细信息。下面是获取数据的方法：

  final String apiURL = 'https://jsonplaceholder.typicode.com/users';
  Future<List<Users>> fetchJSONData() async {
    var jsonResponse = await http.get(Uri.parse(apiURL));

    if (jsonResponse.statusCode == 200) {
      final jsonItems =
          json.decode(jsonResponse.body).cast<Map<String, dynamic>>();

      List<Users> usersList = jsonItems.map<Users>((json) {
        return Users.fromJson(json);
      }).toList();

      return usersList;
    } else {
      throw Exception('Failed to load data from internet');
    }
  }

这是用于显示用户列表的代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sample Customer List'),
          backgroundColor: Theme.of(context).accentColor,
        ),
        body: _buildExpanded());
  }

  Widget _showListTile() {
    return FutureBuilder<List<Users>>(
      future: fetchJSONData(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return Center(child: CircularProgressIndicator());
        }

        return ListView(
          children: snapshot.data
              .map(
                (user) => Slidable(
                  actionPane: SlidableScrollActionPane(),
                  actions: <Widget>[
                    IconSlideAction(
                      caption: 'Archive',
                      color: Colors.blue,
                      icon: Icons.archive,
                      onTap: () => print('Archiving'),
                    ),
                    IconSlideAction(
                      caption: 'Share',
                      color: Colors.green,
                      icon: Icons.share,
                      onTap: () => print('Share'),
                    )
                  ],
                  actionExtentRatio: 1 / 5,
                  child: ListTile(
                    title: Text(user.name),
                    onTap: () {
                      print(user.name);
                    },
                    subtitle: Text(user.phoneNumber),
                    leading: CircleAvatar(
                      backgroundColor: Colors.green,
                      child: Text(user.name[0],
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                          )),
                    ),
                  ),
                  secondaryActions: <Widget>[
                    IconSlideAction(
                      caption: 'More',
                      color: Colors.black45,
                      icon: Icons.more_horiz,
                      onTap: () => print('More'),
                    ),
                    IconSlideAction(
                      caption: 'Delete',
                      color: Colors.red,
                      icon: Icons.delete,
                      onTap: () => print('Delete'),
                    ),
                  ],
                ),
              )
              .toList(),
        );
      },
    );
  }

我需要做什么才能实现扩展磁贴是这个应用程序吗？

Answer 1

例如

      ExpansionTile(
        title: Text(user.name),
        subtitle: Text(user.phoneNumber),
        leading: CircleAvatar(
          backgroundColor: Colors.green,
          child: Text(user.name[0],
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
              )),
        ),
        children: [
          Text(
            "${user.email}",
            style: TextStyle(fontSize: 18),
          ),
          Text(
            "${user.address}",
            style: TextStyle(fontSize: 18),
          ),
          // ...
          // other information you want to show
        ])

或者您可以推送其他页面以显示详细信息。

来自 json 的 Flutter ExpansionTile

Flutter ExpansionTile from json

flutter

listview

dart

flutter-listview