如何在 riverpod 状态管理中使用读取方法
How to use read method with riverpod state management
我使用 riverpod 状态管理
pubspec.yaml:
dependencies:
flutter:
sdk: flutter
provider: ^6.0.1
get: ^4.6.1
flutter_bloc: ^8.0.1
riverpod: ^1.0.3
hooks_riverpod: ^1.0.3
我的提供商文件
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
class CounterRiv extends StateNotifier<int> {
CounterRiv() : super(0);
void increment() => state++;
}
这是主要的
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:statemng/riverpod/controler_riv.dart';
import 'package:statemng/riverpod/home_riv.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
home: ProviderScope(
child: MyHomeRiv(),
),
);
}
}
归档首页
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:statemng/riverpod/controler_riv.dart';
import 'dashboard_riv.dart';
class MyHomeRiv extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
final counterprovider =
StateNotifierProvider<CounterRiv, int>((ref) => CounterRiv());
class _MyHomePageState extends State<MyHomeRiv> {
@override
int n = 0;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("state management"),
),
body: Center(
child: Column(
children: [
Dashboard(),
],
)),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print("n= ${n++}");
setState(() {
context.read(counterprovider.notifier).increment();
});
}),
);
}
}
在 setState 中,我在读取方法中有 error
:方法 'read' 没有为类型 'BuildContext' 定义。尝试将名称更正为现有方法的名称,或者定义一个名为 'read'
的方法
在计数器文件中
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:statemng/riverpod/home_riv.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
class Conter2 extends HookWidget {
@override
Widget build(BuildContext context) {
final count = useProvider(counterprovider);
return Card(
elevation: 6,
child: Container(
height: 150,
width: 150,
child: Center(
child: Text(count .toString(), style: const TextStyle(fontSize: 60)),
),
),
);
}
}
我在 useProvider
中有 Error
:
方法 'useProvider' 没有为类型 'Conter2' 定义。
尝试将名称更正为现有方法的名称,或定义一个名为 'useProvider'
的方法
有谁知道这个 2Error 的解决方案是什么?
你应该添加 'flutter_riverpod' 包,因为你正在使用 flutter。
如果要使用挂钩,请添加 'hooks_riverpod'.
检查此 table:https://riverpod.dev/docs/getting_started#installing-the-package
在你的 main.dart 中,用 ProviderScope 包装你的 MaterialApp。
void main() {
runApp(ProviderScope(child: MyApp()));
}
读取StateProvider的方式有很多种,这里提一下:
- 使用 ConsumerWidget(针对 StatelessWidget)
class MyHomeRiv extends ConsumerWidget {
const HomeView({Key? key}): super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(
title: Text("state management"),
),
body: Center(
child: Column(
children: [
Dashboard(),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
ref.read(counterprovider.notifier).increment();
},
),
);
}
}
- 使用 HookConsumerWidget
class Conter2 extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterprovider);
return Card(
elevation: 6,
child: Container(
height: 150,
width: 150,
child: Center(
child: Text(count.toString()),
),
),
);
}
}
我强烈建议您阅读文档并查看所有提供的示例:https://riverpod.dev/docs/concepts/reading
我使用 riverpod 状态管理
pubspec.yaml:
dependencies:
flutter:
sdk: flutter
provider: ^6.0.1
get: ^4.6.1
flutter_bloc: ^8.0.1
riverpod: ^1.0.3
hooks_riverpod: ^1.0.3
我的提供商文件
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
class CounterRiv extends StateNotifier<int> {
CounterRiv() : super(0);
void increment() => state++;
}
这是主要的
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:statemng/riverpod/controler_riv.dart';
import 'package:statemng/riverpod/home_riv.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
home: ProviderScope(
child: MyHomeRiv(),
),
);
}
}
归档首页
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:statemng/riverpod/controler_riv.dart';
import 'dashboard_riv.dart';
class MyHomeRiv extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
final counterprovider =
StateNotifierProvider<CounterRiv, int>((ref) => CounterRiv());
class _MyHomePageState extends State<MyHomeRiv> {
@override
int n = 0;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("state management"),
),
body: Center(
child: Column(
children: [
Dashboard(),
],
)),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print("n= ${n++}");
setState(() {
context.read(counterprovider.notifier).increment();
});
}),
);
}
}
在 setState 中,我在读取方法中有 error
:方法 'read' 没有为类型 'BuildContext' 定义。尝试将名称更正为现有方法的名称,或者定义一个名为 'read'
在计数器文件中
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:statemng/riverpod/home_riv.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
class Conter2 extends HookWidget {
@override
Widget build(BuildContext context) {
final count = useProvider(counterprovider);
return Card(
elevation: 6,
child: Container(
height: 150,
width: 150,
child: Center(
child: Text(count .toString(), style: const TextStyle(fontSize: 60)),
),
),
);
}
}
我在 useProvider
中有 Error
:
方法 'useProvider' 没有为类型 'Conter2' 定义。 尝试将名称更正为现有方法的名称,或定义一个名为 'useProvider'
的方法有谁知道这个 2Error 的解决方案是什么?
你应该添加 'flutter_riverpod' 包,因为你正在使用 flutter。 如果要使用挂钩,请添加 'hooks_riverpod'.
检查此 table:https://riverpod.dev/docs/getting_started#installing-the-package
在你的 main.dart 中,用 ProviderScope 包装你的 MaterialApp。
void main() {
runApp(ProviderScope(child: MyApp()));
}
读取StateProvider的方式有很多种,这里提一下:
- 使用 ConsumerWidget(针对 StatelessWidget)
class MyHomeRiv extends ConsumerWidget {
const HomeView({Key? key}): super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(
title: Text("state management"),
),
body: Center(
child: Column(
children: [
Dashboard(),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
ref.read(counterprovider.notifier).increment();
},
),
);
}
}
- 使用 HookConsumerWidget
class Conter2 extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterprovider);
return Card(
elevation: 6,
child: Container(
height: 150,
width: 150,
child: Center(
child: Text(count.toString()),
),
),
);
}
}
我强烈建议您阅读文档并查看所有提供的示例:https://riverpod.dev/docs/concepts/reading