Flutter GetX 状态管理：如何更新 ListView.builder 中的颜色属性并刷新列表？答案

【问题标题】：Flutter GetX state management: how to update color attribute in ListView.builder and refresh the list?Flutter GetX 状态管理：如何更新 ListView.builder 中的颜色属性并刷新列表？
【发布时间】：2022-10-23 22:46:57
【问题描述】：

我正在尝试制作一个可观察的列表。具体来说：

显示带有名称的列表。该列表是从包含一个对象列表中提取的姓名钥匙和一个被选中布尔键。

  List<Student> students = [
    Student(name: "John", isSelected: false),
    Student(name: "Boris", isSelected: false),
    Student(name: "Max", isSelected: false)
  ];

名称显示在 ListView.builder 中。点击名称应该设置对应的被选中可变为真的.到目前为止，这一切都有效。

我希望刷新列表，以便如果被选中设置为 true，项目将以不同的颜色显示。

      child: Text(
        students[index].name,
        style: TextStyle(
          color: students[index].isSelected == true
              ? Colors.red
              : Colors.black87,
        ),
      ),

我遇到的问题是：

无论我将哪个小部件包装到 Obx 中，我都会收到错误消息“GetX 使用不当。您应该只对将要更新的特定小部件使用 GetX 或 Obx”。我没有在下面的代码中包含 Obx，因为它会导致错误。

我读过列表是反应性的，但其中的项目不是并且需要被观察到。我不清楚在这种情况下这是如何完成的。

我在下面粘贴完整的代码。感谢您的帮助和道歉，因为您提出了一些可能非常基本的问题。

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(testApp());

class Student {
  String name;
  bool isSelected;

  Student({required this.name, required this.isSelected});
}

class Controller extends GetxController {
  var students = <Student>[].obs;
}

class testApp extends StatelessWidget {
  @override
  List<Student> students = [
    Student(name: "John", isSelected: false),
    Student(name: "Boris", isSelected: false),
    Student(name: "Max", isSelected: false)
  ];

  Widget build(BuildContext context) {
    final controller = Get.put(Controller());

    return MaterialApp(
        home: Material(
      child: ListView.builder(
          itemCount: students.length,
          itemBuilder: (BuildContext ctxt, int index) {
            return InkWell(
              onTap: () {
                students[index].isSelected = true;
                // refresh does not work
                // controller.students.refresh();
              },
              child: Text(
                students[index].name,
                style: TextStyle(
                  color: students[index].isSelected == true
                      ? Colors.red
                      : Colors.black87,
                ),
              ),
            );
          }),
    ));
  }
}

【问题讨论】：

标签： flutter-getx

【解决方案1】：

解决方案是controller.students.refresh()名单。在下面发布完整的工作代码。

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(testApp());

class Student {
  String name;
  bool isSelected;

  Student({required this.name, required this.isSelected});
}

class Controller extends GetxController {
  Rx<List<Student>> students = Rx<List<Student>>([
    Student(name: "John", isSelected: false),
    Student(name: "Boris", isSelected: false),
    Student(name: "Max", isSelected: false)
  ]);
}

class testApp extends StatelessWidget {
  @override
  //
  final controller = Get.put(Controller());

  Widget build(BuildContext context) {
    final controller = Get.put(Controller());

    return MaterialApp(
        home: Material(
      child: Obx(
        () => ListView.builder(
            itemCount: controller.students.value.length,
            itemBuilder: (BuildContext ctxt, int index) {
              return InkWell(
                onTap: () {
                  controller.students.value[index].isSelected = true;

                  controller.students.refresh();
                },
                child: Text(
                  controller.students.value[index].name,
                  // students[index].name,
                  style: TextStyle(
                    color: controller.students.value[index].isSelected == true
                        ? Colors.red
                        : Colors.black87,
                  ),
                ),
              );
            }),
      ),
    ));
  }
}

【讨论】：