ListView Builder 在调用列表时不返回任何文本

Question

我发现，如果我将 itemCount 更改为数字，它仍然不起作用，但如果我更改 itemCount 并注释掉此处和列中的 teamServices 调用，它将显示文本 Hello。

所以我认为我的问题在于这行代码

final teamServices = Provider.of<TeamServices>(context);

，因为它确实从服务页面打印在控制台中。任何帮助将不胜感激！

main.dart

import 'package:firebase_api/pages/home_page.dart';
import 'package:firebase_api/services/team_services.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(const AppState());

class AppState extends StatelessWidget {
  const AppState({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(providers: [
      ChangeNotifierProvider(create: (_)=> TeamServices())
      ],
      child: const MyApp(),
      );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo'
      ),
      home: const HomePage(),
    );
  }
}

首页

import 'package:firebase_api/services/team_services.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final teamServices = Provider.of<TeamServices>(context);

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('Firebase'),
        backgroundColor: Colors.blue[400],
        titleTextStyle: TextStyle(color: Colors.white),
      ),
      body: ListView.builder(
        itemCount: 3, //teamServices.listTeams.length,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              Text('Hello'),
          //  Text(teamServices.listTeams.length.toString()),
          //  Text(teamServices.listTeams[index].customer)
            ],
          );
        },
      ),
    );
  }
}

团队服务

import 'dart:convert';
import 'package:firebase_api/models/teams_model.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class TeamServices extends ChangeNotifier {
  final String _urlBase =
      'test-ab11a-default-rtdb.firebaseio.com';

  final List<Team> listTeams = [];

  TeamServices() {
    getTeams();
  }

  Future <List<Team>> getTeams() async {
    final teamUrl = Uri.https(_urlBase, 'orders.json');
    final response = await http.get(teamUrl);

   // print(response.body);
    final Map<String, dynamic> obj = json.decode(response.body);

    obj.forEach((key, value) {

      final team = Team.fromMap(value);
      team.id  = key; //.toString(); // as int?;
      listTeams.add(team);

     });


   // print(listTeams[5].price);
    print(listTeams.length);
     return listTeams;
     
  }
}

Answer 1

您正在调用异步函数（

getTeams

）它是您的服务的构造函数。因此，当构建小部件时，变量

listTeams

很可能为空。

此外，您没有正确使用ChangeNotifier，因为：

• 您没有通知听众更改。您应该在 json 映射上的循环后面添加

  notifyListeners()

  。
• 你没有倾听变化。提供者只是做它的名字所表明的那样，提供服务实例，仅此而已。然后，您应该将 ListBuilder 包装在一个监听更改的小部件中，例如 ListenableBuilder

查看 ChangeNotifier 上的示例。