StreamBuilder 构建完成后如何重建小部件？

Question

我正在尝试获取应用程序栏标题中的totalValue。 TotalValue 的值来自 Streambuilder，每次我按下 FilterChips 时它都会改变。

代码：

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:calc_tag/services/get_items_for_month.dart';
import 'package:flutter/scheduler.dart';

class FilterChipExample extends StatefulWidget {
  final int year;
  final int month;
  FilterChipExample({required this.year, required this.month});
  @override
  _FilterChipExampleState createState() => _FilterChipExampleState();
}

class _FilterChipExampleState extends State<FilterChipExample> {
  final List<String> categories = [
    'Costanera Norte',
    'Vespucio Norte',
    'Vespucio Sur',
    'Autopista Central',
  ];
  num totalValue = 0;
  String titulo = '';

  List<String> selectedCategories = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$totalValue'),
      ),
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
            child: Wrap(
              children: categories.map((category) {
                return FilterChip(
                    selectedColor: Colors.grey,
                    showCheckmark: false,
                    visualDensity:
                        const VisualDensity(vertical: -4, horizontal: -4),
                    selected: selectedCategories.contains(category),
                    label: Container(
                      margin: const EdgeInsets.all(0.0),
                      child: Text(category),
                    ),
                    onSelected: (selected) {
                      setState(() {
                        if (selected) {
                          selectedCategories.add(category);
                        } else {
                          selectedCategories.remove(category);
                        }
                      });
                    });
              }).toList(),
            ),
          ),
          Expanded(
            child: StreamBuilder<QuerySnapshot>(
              stream: getItemsForMonth(widget.year, widget.month),
              builder: (context, snapshot) {
                if (snapshot.hasError) {
                  return Center(child: Text('Error: ${snapshot.error}'));
                }
                if (!snapshot.hasData) {
                  return const Center(child: CircularProgressIndicator());
                }

                final documents = snapshot.data!.docs;
                final filteredDocuments = documents.where((element) {
                  return selectedCategories.contains(element['contract']);
                }).toList();

                // setState(() {
                totalValue = filteredDocuments.fold(
                    0.0, (num sum, doc) => sum + (doc['cost'] ?? 0.0));
                  
                // });

                return ListView.builder(
                  itemCount: filteredDocuments.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(
                          '${filteredDocuments[index]['contract']} ${(filteredDocuments[index]['created'] as Timestamp).toDate()}'),
                      subtitle: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text(
                              '\$ ${filteredDocuments[index]['cost'].toString()}'),
                          const SizedBox(
                            width: 30,
                          ),
                          Text(
                            ' ${filteredDocuments[index]['category'].toString()} ',
                            style: const TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 10),
                          ),
                        ],
                      ),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

我尝试在 StreamBuilder 中使用 setState(){} 但出现此错误：

FlutterError（构建期间调用 setState() 或 markNeedsBuild()）。 此 FilterChipExample 小部件无法标记为需要构建，因为框架已经在构建小部件的过程中。仅当小部件的祖先之一当前正在构建时，才可以将其标记为需要在构建阶段构建。允许此异常，因为框架在子窗口之前构建父窗口小部件，这意味着将始终构建脏后代。否则，框架可能不会在此构建阶段访问此小部件。 调用 setState() 或 markNeedsBuild() 的小部件是： 滤波器芯片示例 发出有问题的调用时当前正在构建的小部件是： StreamBuilder>)

Answer 1

这种情况最简单的解决方案是提升 StreamBuilder，使 appBar 位于其中。

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var i = 1;
  StreamController<int> s = StreamController<int>();
  var title = "Title";

  @override
  void initState() {
    super.initState();
    () async {
      while (true) {
        await Future.delayed(const Duration(seconds: 2), () {
          s.add(i++);
        });
      }
    }();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: StreamBuilder<int>(
          stream: s.stream,
          builder: (context, snapshot) {
            return Scaffold(
              appBar: AppBar(
                title: Text('Stream value: ${snapshot.data}'),
              ),
              body: Center(
                child: Text('Stream value: ${snapshot.data}'),
              ),
            );
          }),
    );
  }
}