【问题标题】:How do I create a Flutter Futurebuilder function that displays an array of Strings taken from JSON?如何创建一个 Flutter Futurebuilder 函数来显示从 JSON 中获取的字符串数组?
【发布时间】:2019-09-12 16:22:12
【问题描述】:

我在 Flutter 中有一个项目管理应用程序,并将这些项目排列在一个列表视图中。我以 JSON 格式从 API 获取数据,并希望显示正在处理该项目的用户!

JSON:

{

"id": 81,
"users": [
    {
        "username": "hugo",
        "fullname": "Hugo Johnsson"
    },
    {
        "username": "studentone",
        "fullname": "Student One"
    }
],
"title": "test med teacher chat",
"description": "This project does not have a description.",
"subject": "No subject",
"deadline": "2019-01-06",
"days_left": "107 days ago",
"overview_requests": [
    {
        "id": 28,
        "user": {
            "username": "hugo",
            "fullname": "Hugo Johnsson"
        },
        "group": 81
    }
]

}

Flutter 中的类:

class Project {
  final int id;
  final String title;
  final String description;
  final String deadline;
  final String subject;
  final String days_left;
  final List<USER> users;

  Project(
      this.id,
      this.title,
      this.description,
      this.deadline,
      this.subject,
      this.days_left,
      this.users
  );
}

class USER {
  final String username;
  final String fullname;

USER(
  this.username,
  this.fullname
  );
}

未来(用于 Futurebuilder):

   Future<List<Project>> _getProjects() async {
   var data = await http.get(--ADRESS--);
   var jsonData = json.decode(data.body); //an array of json objects

   List<Project> allProjects = [];

   for (var JData in jsonData) {
     Project project = Project(
         JData["id"],
         JData["title"],
         JData["description"],
         JData["deadline"],
         JData["subject"],
         JData["days_left"],
         JData[USER("username", "fullname")]

     allProjects.add(project);
   }

   return allProjects;
 }

UI 存在一个返回 listview.builder 的 futurebuilder。未来是上面的功能,我想在另一个列表视图中显示用户名。

So this is what I want it to look like, the difference is that the Text inside the Circle Avatars should be the fist letters of the usernames

如何取出字符串?

Text(snapshot.data[index].users.username

【问题讨论】:

    标签: json api listview flutter future


    【解决方案1】:

    小部件

    Widget build(BuildContext context) {
      return FutureBuilder(
        future: _getProjects(),
        builder: (context, snapshot) => ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (context, index) => ListView.builder(
            itemCount: snapshot.data[index].users.length,
            itemBuilder: (context, userIndex) => Text(snapshot.data[index].users[userIndex].username[0]),
          ),
        ),
      );
    }
    

    服务

    Future<List<Project>> _getProjects() async {
      var data = await http.get(--ADRESS--);
      var jsonData = json.decode(data.body); //an array of json objects
    
      List<Project> allProjects = [];
    
      for (var JData in jsonData) {
    
        List<USER> users = JData["users"] == null 
          ? [] 
          : JData["users"]
              .map( (userJson) => USER("username", "fullname") ) // new code
    
        Project project = Project(
          JData["id"],
          JData["title"],
          JData["description"],
          JData["deadline"],
          JData["subject"],
          JData["days_left"],
          users,
        );
    
        allProjects.add(project);
     }
    
     return allProjects;
    
    }
    

    【讨论】:

    • flutter:引发了另一个异常:NoSuchMethodError:在 null 上调用了 getter 'length'。颤振:抛出另一个异常:NoSuchMethodError:方法'[]'在null上被调用。
    • 仍然错误 The getter 'length' was called on null
    • 可能您的用户列表为空。检查您的 _getprojects 功能。在此之后您必须进行调试。
    • 我知道但我不明白怎么做:JData[USER("username", "fullname")]
    • 你有什么想法吗?
    猜你喜欢
    • 2019-09-12
    • 2019-09-08
    • 1970-01-01
    • 2019-09-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多