flutter - 为什么我的应用程序没有在一个简单的计数器中通过 ProviderListener？

Question

我正在测试riverpod，但它不起作用。

我只想拥有一个典型的计数器，当它达到两个时它会转到另一个屏幕。计数器工作但不启动第二个屏幕或通过 ProviderListener。

void main() {
 runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

final _counterProvider = StateNotifierProvider<CounterStateNotifier>((ref) {
  return CounterStateNotifier();
});

class CounterStateNotifier extends StateNotifier<int> {
  CounterStateNotifier([int count]) : super(count ?? 0);

  void increment() {
    state++;
  }
}

class MyHomePage extends ConsumerWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final int _counter = watch(_counterProvider.state);
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ProviderListener<StateNotifier<int>>(
        provider: _counterProvider,
        onChange: (context, _counter) {
          if (_counter == 2) {
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(
                builder: (BuildContext context) => ScondScreen(),
              ),
            );
          }
        },
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(_counterProvider).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

我还没有找到一个 ProviderListener 示例来指导我。

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Vivamus vel sem velit。Sed 调味品 convallis sollicitudin。Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。Quisque maximus congue porttitor。

Answer 1

因为我个人在通过为我发现这个新事物来提供帮助之前并没有使用它。

在这里我可以看到： https ://riverpod.dev/docs/concepts/reading#providerlistener

该代码是

Widget build(BuildContext context) {
  return ProviderListener<StateController<int>>(
    provider: counterProvider,
    onChange: (context, counter) {
      if (counter.state == 5) {
        showDialog(...);
      }
    },
    child: Whatever(),
  );
}

不同之处在于，在示例中有counter.state == variable和在你的counter == variable，但如果 onChange 甚至没有触发，那么可能就是这种情况

ProviderListener<StateController<int>>

在你的情况下，它基于 stateNotifier 而不是控制器（我猜它不一样）

ProviderListener<StateNotifier<int>>

Answer 2

解决更改为ChangeNotifier：

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

final _counterProvider = ChangeNotifierProvider<CounterChangeNotifier>((ref) {
  return CounterChangeNotifier();
});

class CounterChangeNotifier extends ChangeNotifier {
  CounterChangeNotifier([this.count = 0]);

  int count;

  void increment() {
    count++;
    notifyListeners();
  }
}

class MyHomePage extends ConsumerWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final counter = watch(_counterProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ProviderListener<CounterChangeNotifier>(
        provider: _counterProvider,
        onChange: (context, counter) {
          if (counter.count == 2) {
            Navigator.push(
              context,
              MaterialPageRoute<ScondScreen>(
                builder: (_) => ScondScreen(),
              ),
            );
          }
        },
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '${counter.count}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(_counterProvider).increment();
          //counter.state++;
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}