Question

我能够将范围缩小到 UI 未更新，消费者未随数据变化而更新。我怎样才能让它正常工作？

目标是在模型开始和结束日期变量更改时重新加载应用栏文本小部件。

我查看了 this 类似的帖子，但他使用的是 stateNotifier。这看起来更复杂，我只是想通过一个简单的演示来学习riverpod...

我尝试过的任何东西都没有奏效。我尝试在屏幕文件中创建一个新的全局提供程序，但什么也没做。尝试改变我在消费者中初始化手表的方式，但什么也没有。我已经验证过，似乎我正在按照文档说的 here 做所有事情。我不明白为什么这行不通。任何帮助和指示表示赞赏！

屏幕：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:intl/intl.dart';
import 'package:linechart/date_range_widget.dart';
import 'package:linechart/linechart.dart';

class LineChartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Consumer(builder: (context, watch, child) {
            final startDate = watch(dateController);
            final endDate = watch(dateController);

            final formStart = DateFormat.yMMMd().format(startDate.startDate);
            final formEnd = DateFormat.yMMMd().format(endDate.endDate);

            print(context.read(dateController).startDate);
            print(context.read(dateController).endDate);

            return Text('INCOME GRAPH --- $formStart - $formEnd');
          }),
          backgroundColor: Colors.lightBlue,
          actions: [DateRangeWidget()]),
      body: Column(
        children: [
          SafeArea(
            child: Center(
                child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: LineChart(),
            )),
          ),
        ],
      ),
    );
  }
}

小部件

import 'package:flutter/material.dart';
import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;
import 'package:flutter_riverpod/flutter_riverpod.dart';

final dateController = Provider((ref) => DatePickModel());

class DateRangeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
        color: Colors.white,
        icon: Icon(Icons.calendar_today),
        onPressed: () async {
          final List<DateTime> picked = await DateRangePicker.showDatePicker(
              context: context,
              initialFirstDate: context.read(dateController).startDate,
              initialLastDate: context.read(dateController).endDate,
              firstDate: DateTime(2015),
              lastDate: DateTime(DateTime.now().year + 2));
          if (picked != null && picked.length == 2) {
            context.read(dateController).setDates(picked.first, picked.last);
          }
        });
  }
}

class DatePickModel extends ChangeNotifier {
  DateTime _startDate = DateTime.now().subtract(Duration(seconds: 7));
  DateTime _endDate = DateTime.now();

  DateTime get startDate => _startDate;
  DateTime get endDate => _endDate;

  void setDates(DateTime startDate, DateTime endDate) {
    _startDate = startDate;
    _endDate = endDate;
    notifyListeners();
  }

  void resetDates() {
    _startDate = DateTime.now().subtract(Duration(seconds: 7));
    _endDate = DateTime.now();
    notifyListeners();
  }
}

编辑：还尝试将小部件放入单独的 ConsumerWidget 中，但没有...

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:linechart/date_range_widget.dart';
import 'package:linechart/linechart.dart';

class LineChartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: AppBarTitle(),
          backgroundColor: Colors.lightBlue,
          actions: [DateRangeWidget()]),
      body: Column(
        children: [
          SafeArea(
            child: Center(
                child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: LineChart(),
            )),
          ),
        ],
      ),
    );
  }
}

class AppBarTitle extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    context.read(dateController).formatDates();
    final formStart = watch(dateController).startFormatted;
    final formEnd = watch(dateController).endFormatted;
    return Text('INCOME GRAPH --- $formStart - $formEnd');
  }
}

Answer 1

您需要将 Provider 的类型更改为 ChangeNotifierProvider。

当调用 notifyListeners 时，常规提供程序不知道更新，因为它不订阅提供的值。

final dateController = ChangeNotifierProvider((ref) => DatePickModel());

消费者未使用 riverpod ChangeNotifier 重建 UI

1 个答案: