何時在 BlocBuilder() 中提供一個塊？

Question

我正在嘗試將 cubit 用於 flutter 計數器應用程序。 我想知道何時為 BlocBuilder() 中的 bloc 參數提供 Bloc/Cubit。 我嘗試為以下代碼提供一個，但它不起作用並出現錯誤：

Error: Could not find the correct Provider<CounterCubit> above this CounterPage Widget

.

class CounterPage extends StatelessWidget {
  const CounterPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        centerTitle: true,
      ),
      body: BlocBuilder<CounterCubit, int>(
          bloc: CounterCubit(),
          builder: (_, count) => Center(
                child: Text('$count'),
              )),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: FloatingActionButton(
              onPressed: () => context.read<CounterCubit>().increment(),
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: FloatingActionButton(
              onPressed: () => context.read<CounterCubit>().decrement(),
              tooltip: 'Decrement',
              child: Icon(Icons.remove),
            ),
          ),
        ],
      ),
    );
  }
}

這是肘的代碼。

import 'package:flutter_bloc/flutter_bloc.dart';

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

Answer 1

來自官方文檔：

僅當您希望提供一個范圍為單個小部件且無法通過父 BlocProvider 和當前 BuildContext 訪問的 bloc 時才指定 bloc。

BlocBuilder<BlocA, BlocAState>(
  bloc: blocA, // provide the local bloc instance
  builder: (context, state) {
    // return widget here based on BlocA's state
  }
)

在您的情況下，我建議您將 BLoC 提供給CounterPage上方的小部件樹，如下所示：

BlocProvider<CounterCubit>(
  create: (BuildContext context) => CounterCubit(),
  child: CounterPage(),
);

然后，在BlocBuilder中，您不需要指定bloc屬性：

...
body: BlocBuilder<CounterCubit, int>(
  builder: (_, count) => Center(
    child: Text('$count'),
  )),
...