使用 RiverPod 状态管理来改变 Text 值

Question

在下面的代码中，我编写了简单的代码来更改 Text 小部件字符串，默认字符串可以显示到 Text 小部件中，但是当我尝试单击 FloatingActionButton 时却没有改变。

点击 HotReload 导致将其更改为新值，我应该更改哪里以解决此问题？

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/all.dart';


class MyString extends StateNotifier<String> {
  MyString() : super('Hello World');

  void change(String text) => state = text;
}

final showHello = StateNotifierProvider<MyString>((ref) => MyString());

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('SAMPLE'),
        ),
        body: Center(
          child: Consumer(
            builder: (context, watch, _) {
              final s = watch(showHello).state;
              return Text(s);
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read(showHello).change('Clicked On Button'),
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

Answer 1

2021 年 4 月更新：自 Riverpod >= 0.14.0 起，语法现已更新（向下滚动查看原始答案）。下面演示了如何将问题中提供的示例代码转换为更新后的语法：

import 'package:flutter/material.dart';
// Note importing hooks_riverpod/all.dart is now deprecated
import 'package:hooks_riverpod/hooks_riverpod.dart';


class MyString extends StateNotifier<String> {
  MyString() : super('Hello World');

  void change(String text) => state = text;
}

// Note the extra parameter, String, to specify what is provided by the Notifier
final showHello = StateNotifierProvider<MyString, String>((ref) => MyString());

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('SAMPLE'),
        ),
        body: Center(
          child: Consumer(
            builder: (context, watch, _) {
              // Note here, state does not need to be specified.
              final s = watch(showHello);
              return Text(s);
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Note that we now specify notifier here to access non-state
            // attributes of the Notifier
            context.read(showHello.notifier).change('Clicked On Button');
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

可以找到有关升级到 Riverpod 0.14.0+ 的更多信息 here。

以下为问题原答案。仅对 riverpod <= 0.13.

有效

变化：

final s = watch(showHello).state;

至：

final s = watch(showHello.state);

出现这种行为的原因是您正在观察通知程序本身，而不是它的状态。由于实际上并没有更改通知程序对象，只是更改了状态属性，因此未触发重建（这就是您在热重载时看到更新的原因）。通过观察状态本身，我们在状态改变时重建。

这个概念扩展到其他类型的提供商，例如listening to the last exposed value of a StreamProvider.

使用 RiverPod 状态管理来改变 Text 值

Flutter changing Text value using RiverPod State management

flutter

riverpod