时间戳

首页 > 解决方案 > 颤动的riverpod ConsumerWidget没有被重建

flutter - 颤动的riverpod ConsumerWidget没有被重建

问题描述

我刚刚将riverpod 实现到我编写的一个小应用程序中。

flutter_riverpod: ^0.12.1

我的问题是，当我更新提供者时，尽管调用了“watch”，但小部件并没有被重建。

提供者本质上跟踪应该显示的当前页面。

import 'dart:developer';

import 'package:flutter_riverpod/flutter_riverpod.dart';

final currentPageProvider = StateNotifierProvider((ref) => CurrentPage());

class CurrentPage extends StateNotifier<int> {
  CurrentPage() : super(-1);

  set currentPage(int page) {
    log('currentPage set to $page');
    state = page;
  }

  int get currentPage => state;
}

PageButtons 小部件绘制一组 RaisedButtons。当用户单击其中一个凸起的按钮时，当前页面编号。应该更改并且应该重建 PageButton 小部件，以便我们可以更改与当前页面对应的 RaisedButton 的颜色。

import 'dart:developer';
import 'dart:math' hide log;

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fsm2/fsm2.dart' hide State;
import 'package:fsm2_viewer/src/providers/current_page.dart';
import 'package:fsm2_viewer/src/providers/log_provider.dart';

class PageButtons extends ConsumerWidget {
  final List<SvgFile> pages;
  PageButtons(this.pages);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    /// watch the currentPageProvider so we are rebuilt when the page
    /// no changes.
    int currentPage = watch(currentPageProvider).currentPage;
    log('building PageButons currentPage: $currentPage');
    if (pages.length == 0) {
      return Container(width: 0, height: 0);
    }

    currentPage = min(currentPage, pages.length - 1);

    var buttons = <Widget>[];
    for (var pageNo = 0; pageNo < pages.length; pageNo++) {
      buttons.add(Padding(
          padding: EdgeInsets.only(right: 5, left: 5),
          child: RaisedButton(
              color: (pageNo == currentPage ? Colors.blue : Colors.grey),
              onPressed: () {
                context.read(logProvider).log = 'onpressed';
                /// User click the page button so update the current page.
                context.read(currentPageProvider).currentPage = pageNo;
                context.read(logProvider).log = 'changed to page $pageNo';
              },
              child: Text('${pageNo + 1}'))));
    }
    return Row(children: buttons);
  }
}

你可以在上面的构建方法中看到我称之为watch：

 int currentPage = watch(currentPageProvider).currentPage;

然后在 onPressed for a Raised 按钮中更新 currentPage：

              onPressed: () {
                /// User click the page button so update the current page.
                context.read(currentPageProvider).currentPage = pageNo;
                context.read(logProvider).log = 'onpressed';                
                context.read(logProvider).log = 'changed to page $pageNo';

在我的日志中，我看到：

main:ALL> onpressed
main:ALL> currentPage set to 1
main:ALL> changed to page 1

日志告诉我正在调用 onPressed 方法，并且我正在更新 currentPageProvider。

但是没有调用 PageButtons 的构建器。

我究竟做错了什么？

标签： flutterdartproviderriverpod

解决方案

    import 'dart:developer';
import 'dart:math' hide log;

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fsm2/fsm2.dart' hide State;
import 'package:fsm2_viewer/src/providers/current_page.dart';
import 'package:fsm2_viewer/src/providers/log_provider.dart';

class PageButtons extends ConsumerWidget {
  final List<SvgFile> pages;
  PageButtons(this.pages);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    /// watch the currentPageProvider so we are rebuilt when the page
    /// no changes.
    int currentPage = watch(currentPageProvider.state);
    log('building PageButons currentPage: $currentPage');
    if (pages.length == 0) {
      return Container(width: 0, height: 0);
    }

    currentPage = min(currentPage, pages.length - 1);

    var buttons = <Widget>[];
    for (var pageNo = 0; pageNo < pages.length; pageNo++) {
      buttons.add(Padding(
          padding: EdgeInsets.only(right: 5, left: 5),
          child: RaisedButton(
              color: (pageNo == currentPage ? Colors.blue : Colors.grey),
              onPressed: () {
                context.read(logProvider).log = 'onpressed';
                /// User click the page button so update the current page.
                context.read(currentPageProvider).currentPage = pageNo;
                context.read(logProvider).log = 'changed to page $pageNo';
              },
              child: Text('${pageNo + 1}'))));
    }
    return Row(children: buttons);
  }
}

推荐阅读