ListTile 上的 GetX UI 状态未更改答案

【问题标题】：GetX UI state not changing on ListTileListTile 上的 GetX UI 状态未更改
【发布时间】：2021-11-25 08:35:48
【问题描述】：

我有一个对象列表，但我想将一个对象的状态更改为“isLoading”，在该状态下它将具有不同的标题等。

我正在构建我的列表视图：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: scaffoldKey,
        body: Obx(() => buildListView(context)));
  }

  Widget buildListView(BuildContext context) {
    return ListView.builder(
        itemCount: controller.saveGames.length,
        itemBuilder: (context, index) {
          final saveGame = controller.saveGames.elementAt(index);

          return saveGame.isLoading
              ? buildListTileIsLoading(context, saveGame)
              : buildListTile(context, saveGame);
        });
  }

  ListTile buildListTile(BuildContext context, SaveGame saveGame) {
    return ListTile(
      onTap: () => controller.process(saveGame)
    );
  }

控制器：

class SaveGameController extends GetxController {

  final RxList<SaveGame> saveGames = <SaveGame>[].obs;
  
  void process(SaveGame saveGame) {
    saveGame.working = true;

    update();
  }
  
}

我哪里出错了？

编辑：添加更多代码

【问题讨论】：

你能介绍一下课程吗？包含 saveGames 的那个。
当然添加了，但不认为它真的显示了很多？

标签： flutter flutter-getx

【解决方案1】：

因此，尽管如此，我只是更新列表中的一个对象，而不是修改列表的内容（添加/删除对象），我仍然需要调用 saveGames.refresh();

如果您只是更改其中一个对象的属性，我认为您不需要刷新整个列表。

很高兴知道:)

【讨论】：

【解决方案2】：

update() 与GetBuilder() 一起使用

obs() 与obx() 一起使用

您需要更改列表以更新小部件

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      onInit: () {
        Get.lazyPut(() => SaveGameController());
      },
      home: const HomePage(),
    );
  }
}

class HomePage extends GetView<SaveGameController> {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(), body: Obx(() => buildListView(context)));
  }

  Widget buildListView(BuildContext context) {
    return ListView.builder(
        itemCount: controller.saveGames.length,
        itemBuilder: (context, index) {
          final saveGame = controller.saveGames.elementAt(index);

          return buildListTile(context, saveGame);
        });
  }

  ListTile buildListTile(BuildContext context, SaveGame saveGame) {
    return ListTile(
        tileColor: saveGame.working ? Colors.red : Colors.yellow,
        title: Text(saveGame.name),
        onTap: () => controller.process(saveGame));
  }
}

class SaveGameController extends GetxController {
  final RxList<SaveGame> saveGames = <SaveGame>[
    SaveGame(id: 0, name: 'a', working: false),
    SaveGame(id: 1, name: 'b', working: false),
    SaveGame(id: 2, name: 'c', working: false)
  ].obs;

  void process(SaveGame saveGame) {
    final index = saveGames.indexWhere((element) => element.id == saveGame.id);
    saveGames
        .replaceRange(index, index + 1, [saveGame.copyWith(working: true)]);
  }
}

class SaveGame {
  final int id;
  final String name;
  final bool working;
  SaveGame({required this.id, required this.name, required this.working});
  SaveGame copyWith({int? id, String? name, bool? working}) {
    return SaveGame(
        id: id ?? this.id,
        name: name ?? this.name,
        working: working ?? this.working);
  }
}

【讨论】：