Flutter

Question

有3个按钮，我想在点击的时候改变点击按钮的颜色

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

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

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

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

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

不知道为什么只有在做Hot Reload的时候才会在UI中反映

请帮忙。

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),
      ],
    );
  }
}

控制器

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

  get filter => _currentFilter;

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

Answer 1

如果您将新的 observable 分配给 _currentFilter，GetX 将不会收到通知，因为该视图正在侦听的先前 observable 没有更改。如果您将其更改为：

_currentFilter.value = filter;

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

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

Flutter - Getx update screen only after hot reload

flutter-getx

state-management

flutter-state