根据不同的变量显示flutter叠加

Question

我有一个名为 TestMain 的 flutter 屏幕，它有一个脚手架和白色背景。 如果某些事件发生，脚手架的主体应该会发生变化。 事件存储为 boolean。有“isLocked”和“isPaused”，它们由 Riverpod Stream Provider 发出，“isCheating”在 Applifecyle 事件被触发时发生变化。 由于其全局可访问性，所有三个布尔值都存储为 Riverpod StateProviders。

这是我的“isCheatingProvider”： final isCheatingProvider = StateProvider.autoDispose<bool>((ref) => false); “isPausedProvider”和“isLockedProvider”是相同的。

这是测试主屏幕

class TestMain extends ConsumerStatefulWidget {
  const TestMain({super.key});

  @override
  ConsumerState<TestMain> createState() => _TestMainScreenState();
}

class _TestMainScreenState extends ConsumerState<TestMain>
    with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) async {
    super.didChangeAppLifecycleState(state);

    final isCheating = ref.watch(isCheatingProvider.notifier);

    switch (state) {
      case AppLifecycleState.resumed:
      case AppLifecycleState.inactive:
        await sendCheatingAttempt(ref);
        setState(() {
          isCheating.state = true;
        });
        break;
      case AppLifecycleState.paused:
        await sendCheatingAttempt(ref);
        setState(() {
          isCheating.state = true;
        });
        break;
      case AppLifecycleState.detached:
        await sendCheatingAttempt(ref);
        setState(() {
          isCheating.state = true;
        });
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    final List<Item> items = ref.watch(itemsProvider);
    final AsyncValue<dynamic> wsTestListenerMessage =
        ref.watch(testListenerProvider);

    final isLocked = ref.watch(isLockedProvider.notifier);
    final isPaused = ref.watch(isPausedProvider.notifier);
    final isCheating = ref.watch(isCheatingProvider.notifier);

    wsTestListenerMessage.when(
      loading: () => {},
      error: (err, stack) => print('Test State Error: $err'),
      data: (message) async {
        Future.delayed(const Duration(seconds: 0), () {
          if (message["lock"] == true) {
            isLocked.state = true;
          }
          if (message["unlock"] == true) {
            isLocked.state = false;
          }
          if (message["paused"] == true) {
            isPaused.state = true;
          }
          if (message["resumed"] == true) {
            isPaused.state = false;
          }
        });
      },
    );

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
          child: isPaused.state
              ? const ErrorOverlay(text: 'paused')
              : isLocked.state || isCheating.state
                  ? const ErrorOverlay(text: 'cheating')
                  : const TestView()),
    );
  }
}

但它不起作用。 不管我做什么。 我在 if 语句周围添加了Future.delayed(const Duration(seconds: 0), () {} ，因为它抱怨在构建方法中更改提供者，我在didChangeAppLifecycleState() ，但不能在监听器中使用它，因为监听器会一遍又一遍地调用。它不应该被打开超过一次。

（ErrorOverlay 是一个自定义小部件，仅在中心以大红色字母显示文本）

Answer 1

• 删除setState ，这什么都不做
• 设置 state 使用ref.read(provider.notifier).state
• 手表使用ref.watch(isCheatingProvider)

通过在我这边进行测试来改变所有的好处：

final isCheatingProvider = StateProvider.autoDispose<bool>((ref) => false);

class TestMain extends ConsumerStatefulWidget {
  const TestMain({key});

  @override
  ConsumerState<TestMain> createState() => _TestMainScreenState();
}

class _TestMainScreenState extends ConsumerState<TestMain>
    with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) async {
    super.didChangeAppLifecycleState(state);

    final isCheating = ref.read(isCheatingProvider.notifier);

    switch (state) {
      case AppLifecycleState.resumed:
      case AppLifecycleState.inactive:
        isCheating.state = true;
        break;
      case AppLifecycleState.paused:
        isCheating.state = true;
        break;
      case AppLifecycleState.detached:
        isCheating.state = true;
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    final isCheating = ref.watch(isCheatingProvider);

    return Scaffold(
      backgroundColor: isCheating ? Colors.red : Colors.white,
      body: SafeArea(
          child: isCheating ? Text('cheat') : Text(' good')
      )
    );
  }
}

Answer 2

您错误地使用StateProvider 。 要观看StateNotifier ，您应该使用

final isCheating = ref.watch(isCheatingProvider);

并改变提供者的使用

ref.read(productSortTypeProvider.notifier).state = value;

所以你必须更改所有提供者相关的代码。

@override
void didChangeAppLifecycleState(AppLifecycleState state) async {
  super.didChangeAppLifecycleState(state);

  final isCheatingNotifier = ref.read(isCheatingProvider.notifier);

  switch (state) {
    case AppLifecycleState.resumed:
    case AppLifecycleState.inactive:
      await sendCheatingAttempt(ref);
      isCheatingNotifier.state = true;
      break;
    case AppLifecycleState.paused:
      await sendCheatingAttempt(ref);
      isCheatingNotifier.state = true;
      break;
    case AppLifecycleState.detached:
      await sendCheatingAttempt(ref);
      isCheatingNotifier.state = true;
      break;
  }
}

@override
Widget build(BuildContext context) {
  final List<Item> items = ref.watch(itemsProvider);
  final AsyncValue<dynamic> wsTestListenerMessage =
  ref.watch(testListenerProvider);

  final isLocked = ref.watch(isLockedProvider);
  final isPaused = ref.watch(isPausedProvider);
  final isCheating = ref.watch(isCheatingProvider);

  wsTestListenerMessage.when(
    loading: () => {},
    error: (err, stack) => print('Test State Error: $err'),
    data: (message) async {
      Future.delayed(const Duration(seconds: 0), () {
        final isLockedNotifier = ref.read(isLockedProvider.notifier);
        final isPausedNotifier = ref.read(isPausedProvider.notifier);

        if (message["lock"] == true) {
          isLockedNotifier.state = true;
        }
        if (message["unlock"] == true) {
          isLockedNotifier.state = false;
        }
        if (message["paused"] == true) {
          isPausedNotifier.state = true;
        }
        if (message["resumed"] == true) {
          isPausedNotifier.state = false;
        }
      });
    },
  );

  return Scaffold(
    backgroundColor: Colors.white,
    body: SafeArea(
        child: isPaused
            ? const ErrorOverlay(text: 'paused')
            : isLocked || isCheating
            ? const ErrorOverlay(text: 'cheating')
            : const TestView()),
  );
}