Flutter Riverpod更新状态问题

whhtz7ly  于 2023-05-08  发布在  Flutter
关注(0)|答案(1)|浏览(154)

当print语句中的值正在更新时,状态未更新。我不知道我是否使用了正确的计数器类的方法,请帮助我。
下面是我的代码:

import 'package:flutter_riverpod/flutter_riverpod.dart';

class numbers{
  int value1 = 0;
  int value2 = 0;
}

class Counter extends StateNotifier<numbers> {
  Counter(super.state);
  void add1()
  {
    state.value1++;
    print(state.value1.toString() + ' FromClass');
  }
}
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'Counter.dart';

final counterProvider = StateNotifierProvider<Counter, numbers>((ref)=>Counter(numbers()));

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

class MyApp extends ConsumerWidget {


  @override
  Widget build(BuildContext context,WidgetRef ref) {
    var count = ref.watch(counterProvider.notifier).state.value1;
    return MaterialApp(home: Scaffold(body: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Center(child: Container(child: Text(count.toString()),),),
      ElevatedButton(onPressed: (){
        ref.read(counterProvider.notifier).state.value1++;
        print(ref.read(counterProvider.notifier).state.value1);
        //print(count.readValue1());
      }, child: Text('+'))],),),);
  }
}

按下+按钮后进行状态更新

2ic8powd

2ic8powd1#

首先,我转换了你的“数字”模型。首先,它必须是不可变的,并且正确地重新定义了==/hashCode。要轻松创建这样的模型,请仔细查看freezed包。

@immutable
class Numbers {
  const Numbers({this.value1 = 0, this.value2 = 0});

  final int value1;
  final int value2;

  Numbers copyWith({
    int? value1,
    int? value2,
  }) {
    return Numbers(
      value1: value1 ?? this.value1,
      value2: value2 ?? this.value2,
    );
  }

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Numbers &&
          runtimeType == other.runtimeType &&
          value1 == other.value1 &&
          value2 == other.value2;

  @override
  int get hashCode => value1.hashCode ^ value2.hashCode;
}

你的Counter类看起来像这样:

final counterProvider =
    StateNotifierProvider<Counter, Numbers>((ref) => Counter(const Numbers()));

class Counter extends StateNotifier<Numbers> {
  Counter(super.state);
  void add1() {
    state = state.copyWith(value1: state.value1 + 1);
    print('${state.value1} Counter.add1');
  }
}

接口转换如下:

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count1 = ref.watch(counterProvider.select((value) => value.value1));

    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(child: Text(count1.toString())),
            ElevatedButton(
                onPressed: () {
                  ref.read(counterProvider.notifier).add1();
                  print(ref.read(counterProvider.notifier).state.value1);
                },
                child: const Text('+'))
          ],
        ),
      ),
    );
  }
}

我特意使用了select,这样更改value2的值就不会触发重建。如果你需要跟踪Numbers的整个状态,在build方法中使用一个简单的ref.wacth(counterProvider)

final Numbers counter = ref.watch(counterProvider);
counter.value1;

相关问题