堆栈小部件和 Bloc Builder

Question

我知道 Stack 小部件从头开始渲染它们的子项，但是，我无法向自己解释为什么 BlocBuilder 不能有效地重建它们。

这是一个例子：

@override
Widget build(BuildContext context) {
  return Container(
    child: BlocBuilder<TestCubit, int>(
      builder: (context, state) {
        return GestureDetector(
          onTapDown: (tapDetails) {
            context.read<TestCubit>().incrementCubit();
          },
          child: Stack(children: [Text('Counter: $state')]),
        );
      },
    )
  );
}

当 TestCubit 调用其 incrementCubit 方法时，状态会发生变化 - 我使用基于 Container 的简单 UI 对其进行了测试，但是一旦我们处理堆栈，屏幕上没有任何反应。有什么想法吗？

提前致谢！

Answer 1

我测试了您的代码，它适用于 Stack 和 Container。请在下面查看我的代码：

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(
    const CounterApp(),
  );
}

class CounterApp extends MaterialApp {
  const CounterApp({Key key}) : super(key: key, home: const CounterPage());
}

class CounterPage extends StatelessWidget {
  const CounterPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => TestCubit(),
      child: CounterView(),
    );
  }
}

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(child: BlocBuilder<TestCubit, int>(
      builder: (context, state) {
        return GestureDetector(
          onTapDown: (tapDetails) {
            context.read<TestCubit>().incrementCubit();
          },
          child: Stack(children: [Text('Counter: $state')]),
          //child: Text('Counter: $state'),
          //child: Scaffold(
          //   appBar: AppBar(title: const Text("Cubit Demo")),
          //   body: Center(
          //       child: Stack(
          //     children: [
          //       Text('Counter: $state'),
          //     ],
          //   )),
          //),
        );
      },
    ));
  }
}

class TestCubit extends Cubit<int> {
  TestCubit() : super(0);
  void incrementCubit() => emit(state + 1);
  void decrementCubit() => emit(state - 1);
}

pubspec.yaml

name: test_http
description: A new Flutter application.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc:

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

堆栈小部件和 Bloc Builder

Stack widget and Bloc Builder

dart

flutter

bloc