Flutter - Getx 仅在热重载后更新屏幕

Question

有3个按钮，我想在单击按钮时更改所单击按钮的颜色。

我使用 obx 管理 _currentFilter 变量，并在每次单击按钮时使用 changeFilter() 函数更改 _currentFilter 值。

UI部分使用Obx来检测更改的值并更改颜色。

但是，单击每个按钮会更改 _currentFilter 的值，但不会更新 UI。

只有热重载才会更改按钮文本的颜色。

为什么 Obx 没有检测到 UI 中的 _currentFilter 值已更改？

我不知道为什么它只有在进行热重载时才会反射(reflect)在UI中。

请帮忙。

用户界面

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

  Widget filterButton(FilterEnum filter) {
    return TextButton(
      onPressed: () => controller.changeFilter(filter),
      child: Obx(() {
        final color = controller.filter == filter ? Colors.blueAccent : Colors.grey;
        return Text(filter.name, style: TextStyle(fontSize: 20, color: color));
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        filterButton(FilterEnum.ALL),
        filterButton(FilterEnum.ACTIVE),
        filterButton(FilterEnum.COMPLETED),
      ],
    );
  }
}

Controller

class TodoController extends GetxController {
  var _currentFilter = FilterEnum.ALL.obs;

  get filter => _currentFilter;

  void changeFilter(FilterEnum filter) {
    _currentFilter = filter.obs;
  }
}

Answer 1

如果您将新的可观察量分配给 _currentFilter，GetX 将不会收到通知，因为该 View 正在监听的先前可观察量没有更改。 如果你将其更改为:

_currentFilter.value = filter;

GetX 触发一个名为refresh() 的方法来刷新 View 。