Question

我正在学习flutter和dart语言，并尝试通过rxdart应用bloc模式并在页面中显示数据。

由于收到错误，无法获取length或在页面流生成器和listview.builder中显示数据：

class 'Future<List<User>>' has no instance getter 'length'.
Receiver: Instance of 'Future<List<User>>'
Tried calling: length

我的课程user.dart

class User {
 int id;
 String name;
 String username;
 String email;

 User({this.id, this.name, this.username, this.email});

 User.fromJson(Map<String, dynamic> parsedJson) {
   User(
     id: parsedJson['id'],
     name: parsedJson['name'],
     username: parsedJson['username'],
     email: parsedJson['email'],
   );
 }
}

// user_repo.dart

import 'package:learn_flutter_bloc/bloc_rx_example/User.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';

import 'package:learn_flutter_bloc/url.dart';

class UserRepo {
 static Future<List<User>> getUsers() async {
   final res = await http.get("https://jsonplaceholder.typicode.com/users");
   List<User> users = [];
   if (res.statusCode == 200) {
     var data = jsonDecode(res.body);
     for (var user in data) {
       users.add(User.fromJson(user));
     }
     return users;
   } else {
     throw Exception("Error In Calling APi");
   }
 }
}

// user_bloc

import 'package:learn_flutter_bloc/bloc_base.dart';
import 'package:learn_flutter_bloc/bloc_rx_example/user_repo.dart';
import 'package:rxdart/subjects.dart';

class UserBloc extends BlocBase {
 Subject _usersSubject = BehaviorSubject();

 Stream get users => _usersSubject.stream;

 getUsers() async {
   var usersData = UserRepo.getUsers();
   _usersSubject.add(usersData);
 }

 @override
 dispose() {
   _usersSubject.close();
 }
}

final bloc = UserBloc();

// user_list_app.dart

import 'package:flutter/material.dart';
import 'package:learn_flutter_bloc/bloc_rx_example/user_bloc.dart';

class UserListApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Bloc Rx Example',
     theme: ThemeData(
       primaryColor: Colors.teal,
     ),
     home: Scaffold(
       appBar: AppBar(
         title: Text('Bloc Rx Example'),
         leading: IconButton(
             icon: Icon(Icons.arrow_back),
             onPressed: () {
               Navigator.of(context).pop();
             }),
       ),
       body: UserList(),
     ),
   );
 }
}

class UserList extends StatefulWidget {
 @override
 _UserListState createState() => _UserListState();
}

class _UserListState extends State<UserList> {
 @override
 void dispose() {
   bloc.dispose();
   super.dispose();
 }

 @override
 Widget build(BuildContext context) {
   bloc.getUsers();
   return Padding(
     padding: EdgeInsets.all(10.0),
     child: StreamBuilder(
       stream: bloc.users,
       builder: (context, snapshot) {
         if (snapshot.hasData) {
           return ListView.builder(
               itemCount: snapshot.data.length,
               itemBuilder: (context, index) {
                 return ListTile(
                   leading: Icon(Icons.weekend),
                   title: Text('${snapshot.data[index].name}'),
                 );
               });
         } else if (!snapshot.hasError) {
           return Text(snapshot.error.toString());
         } else {
           return Center(
             child: CircularProgressIndicator(),
           );
         }
       },
     ),
   );
 }
}

Answer 1

在UI中使用StreamBuilder时，您的getUsers()返回Future<List<User>>。从Stream<<List<User>>返回getUsers()。

Answer 2

修复了我的问题是在bloc_user.dart中错过了等待时间

 Future<List<User>> getUsers() async {
    var usersData = UserRepo.getUsers();
    print(usersData);
    _usersSubject.sink.add(usersData);
  }

到

 Future<List<User>> getUsers() async {
    var usersData = await UserRepo.getUsers();
    print(usersData);
    _usersSubject.sink.add(usersData);
  }

无法在Flutter中的listview.builder中获取长度

2 个答案: