计数器应用程序之外的简单 Riverpod 示例：两个单元格的总和

Question

我正在学习 Flutter，但一直在状态管理上卡壳。我看了一下 Riverpod，它看起来很有前途，但我很难超越柜台应用程序，去做更复杂的事情。

例如，我想要两个收集数字的 TextField，以及另一个显示两个 TextField 值之和的 Text 小部件。这是我的。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

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

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'Adding two cells'),
    );
  }
}

final cellProvider = StateProvider((_) => <int>[0, 0]);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Consumer(builder: (context, watch, _) {
        print(watch(cellProvider).state);
        num _sum = watch(cellProvider).state[0] + watch(cellProvider).state[1];
        return Center(
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Cell(0),
                  Cell(1),
                ],
              ),
              SizedBox(
                height: 100,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Sum: ${_sum.toString()}'),
                ],
              ),
            ],
          ),
        );
      }),
    );
  }
}

class Cell extends HookWidget {
  Cell(this.index);
  final int index;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      padding: EdgeInsets.all(30),
      child: TextField(
        inputFormatters: [FilteringTextInputFormatter.digitsOnly],
        onChanged: (value) {
          context.read(cellProvider).state[index] = num.tryParse(value);
        },
      ),
    );
  }
}

文本小部件未更新。有什么建议吗？

非常感谢，托尼

Answer 1

提供者只在它提供的对象发生变化时更新，就像一个 Stream returns 你需要更新整个对象的最终值（List<int>）所以消费者正确更新，改变内部可迭代的值不会触发更新

onChanged: (value) {
   final List<int> myList = context.read(cellProvider).state;
   myList[index] = num.tryParse(value); 
   context.read(cellProvider).state = myList; //update the state with a new list
},

计数器应用程序之外的简单 Riverpod 示例：两个单元格的总和

Simple Riverpod example beyond the counter app: sum of two cells

flutter

riverpod