来自 json 的 Flutter ExpansionTile

Posted 2023-02-23

【中文标题】来自 json 的 Flutter ExpansionTile

【英文标题】：Flutter ExpansionTile from json

【发布时间】：2021-06-25 06:12:09

【问题描述】：

我有一个颤振应用程序，它在列表视图中显示来自 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(),
        );
      ,
    );
  

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

【问题讨论】：

你可以用ExpansionTile替换ListTile

你能举个例子来说明一下吗

【参考方案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
        ])

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