flutter - Flutter：元素未添加到列表中

Question

嗨，我正在学习 Flutter 中的状态管理并使用 GetX 包。当应用程序加载时，我在列表中添加用户，但问题是当按钮单击时有一个获得更多按钮，我正在调用相同的函数，但元素没有被添加到列表中。任何人都可以看看并告诉我我做错了什么。

import 'package:get/state_manager.dart';
import 'package:randomuser_with_getx/models/users.dart';
import 'package:randomuser_with_getx/services/random_user_service.dart';

class RandomUserController extends GetxController {
  // ignore: deprecated_member_use
  var users =List<UserResults?>.empty(growable: true).obs;
  @override
  void onInit() {
    super.onInit();
    fetchUsers();
  }

  void fetchUsers() async {
    var result =  await RandomUserService().getRandomusers();
    print(result);
    users.add(result.results![0]);
    print("users length is ${users.length}");
  }

    void fetchMoreUsers() async {
    var result =  await RandomUserService().getRandomusers();
    print(result);
    users.add(result.results![0]);
    print("users length is ${users.length}");
  }
}

我也尝试过制作单独的功能，但这也不起作用

控制器代码：

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:randomuser_with_getx/constants/string.dart';
import 'package:randomuser_with_getx/models/users.dart';

class RandomUserService {
   Future<User> getRandomusers() async {
    var client = http.Client();
    var userModel = null;
    try {
      var response = await client.get(Uri.parse(Strings.random_user_url));
      if (response.statusCode == 200) {
        var jsonString = response.body;
        var jsonMap = jsonDecode(jsonString);
        print(jsonMap);
        userModel = User.fromJson(jsonMap);
        print(userModel);
        return userModel;
      }
    } catch (Exception) {
      return userModel;
    }
    return userModel;
  }
}

界面页面

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:randomuser_with_getx/controllers/counterController.dart';
import 'package:randomuser_with_getx/controllers/randomUserController.dart';

class randomUserPage extends StatelessWidget {
  final randomUserController = Get.put(RandomUserController());
  final countercontoller = Get.put(CounterController);
  randomUserPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Random User"),
      ),
      body: Column(
        children: [
          Expanded(
            child: GetX<RandomUserController>(builder: (controller) {
              print(controller.users.length);
              return ListView.builder(
                  itemCount: controller.users.length,
                  itemBuilder: (context, index) {
                    var user = controller.users[index];
                    return Card(
                      shadowColor: Colors.red,
                      clipBehavior: Clip.hardEdge,
                      shape:StadiumBorder(
                        side: BorderSide(
                          width: 4
                        ) 
                      ) ,
                      child: ListTile(
                        leading: CircleAvatar(
                          child: ClipOval(
                              child: Image.network(
                                  user!.picture!.thumbnail.toString())),
                        ),
                        title: Text(user.name!.first.toString()),
                      ),
                    );
                    // return Card(
                    //   child:
                    //       Text(controller.users[index]!.name!.first.toString()),
                    // );
                  });
            }),
          ),
          TextButton(onPressed: ()=>{
              RandomUserController().fetchMoreUsers()
          }, child: Text("get more")),
          Text("TOtal amount"),
          SizedBox(
            height: 100,
          )
        ],
      ),
    );
  }
}

标签： flutterdartflutter-layout

Answer 1

您的代码有多个地方存在问题。你可以试试我的代码，看看问题是否仍然存在。

import 'package:get/state_manager.dart';
import 'package:randomuser_with_getx/models/users.dart';
import 'package:randomuser_with_getx/services/random_user_service.dart';

class RandomUserController extends GetxController {
  // ignore: deprecated_member_use
  final user =<UserResults?>[].obs;
  final service = RandomUserService();
  @override
  void onInit() {
    fetchUsers();
    super.onInit();
  }

  void fetchUsers() async {
    var result =  await service .getRandomusers();
    print(result);
    users.add(result.results![0]);
    print("users length is ${users.length}");
  }

    void fetchMoreUsers() async {
    var result =  await service .getRandomusers();
    print(result);
    users.add(result.results![0]);
    print("users length is ${users.length}");
  }
}

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:randomuser_with_getx/controllers/counterController.dart';
import 'package:randomuser_with_getx/controllers/randomUserController.dart';

class RandomUserPage extends StatelessWidget {
  final controller = Get.put(RandomUserController());
  final countercontoller = Get.put(CounterController());
  RandomUserPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Random User"),
      ),
      body: Column(
        children: [
          Expanded(
            child: Obx(() {
              print(controller.users.length);
              return ListView.builder(
                  itemCount: controller.users.length,
                  itemBuilder: (context, index) {
                    var user = controller.users[index];
                    return Card(
                      shadowColor: Colors.red,
                      clipBehavior: Clip.hardEdge,
                      shape:StadiumBorder(
                        side: BorderSide(
                          width: 4
                        ) 
                      ),
                      child: ListTile(
                        leading: CircleAvatar(
                          child: ClipOval(
                              child: Image.network(
                                  user!.picture!.thumbnail.toString())),
                        ),
                        title: Text(user.name!.first.toString()),
                      ),
                    );
                    // return Card(
                    //   child:
                    //       Text(controller.users[index]!.name!.first.toString()),
                    // );
                  });
            }),
          ),
          TextButton(onPressed: ()=>{
             controller.fetchMoreUsers() // HERE SHOULD NOT BE ANOTHER CLASS INSTANCE USE BACK THE CONTROLLER
          }, child: Text("get more")),
          Text("TOtal amount"),
          SizedBox(
            height: 100,
          )
        ],
      ),
    );
  }
}