Bloc5

flutter_bloc¶

BlocBuilder¶

Code¶

Reference¶

https://pub.dev/packages/flutter_bloc

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

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: BlocBuilder<CounterCubit, int>(
        builder: (context, count) => Center(
            child: Text(
          '$count',
          style: TextStyle(fontSize: 50),
        )),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () => context.read<CounterCubit>().increment(),
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () => context.read<CounterCubit>().decrement(),
          ),
        ],
      ),
    );
  }
}

程式碼解釋¶

這段程式碼是用 Dart 語言和 Flutter 框架寫的，它定義了一個名為 CounterPage 的無狀態小部件。這個小部件是一個頁面，包含一個標題為 “Counter” 的 AppBar，一個顯示計數值的中心文字，以及兩個浮動動作按鈕，分別用於增加和減少計數值。

BlocBuilder 是一個小部件，它會根據 CounterCubit 的狀態（在這裡是一個整數）來重建其子小部件。在這個例子中，它的子小部件是一個 Text 小部件，顯示當前的計數值。

兩個 FloatingActionButton 小部件分別有一個增加按鈕和一個減少按鈕。當按下增加按鈕時，會調用 context.read().increment()，當按下減少按鈕時，會調用 context.read().decrement()。這兩個方法分別會增加和減少 CounterCubit 的狀態值。

這個 CounterPage 小部件是無狀態的，這意味著它的狀態不會在生命週期內改變。所有的狀態管理都是通過 CounterCubit 來完成的。

需比較不同程式碼差別
在Bloc2有提到過使用BlocBuilder的方式可以自動重新繪製UI介面，但還是必須在Stateful Widget的Class底下，可是若使用context.read就不一樣了

以下提供之前方式的寫法

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

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

  @override
  State<CounterStateful> createState() => _CounterStatefulState();
}

class _CounterStatefulState extends State<CounterStateful> {
  final cubit1 = CounterCubit();
  final cubit2 = CounterCubit();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              BlocBuilder<CounterCubit, int>(
                  bloc: cubit1,
                  builder: (context, state) {
                    return Text(
                      state.toString(),
                      style: TextStyle(fontSize: 50),
                    );
                  }),
              BlocBuilder<CounterCubit, int>(
                  bloc: cubit2,
                  builder: (context, state) {
                    return Text(
                      state.toString(),
                      style: TextStyle(fontSize: 50),
                    );
                  })
            ]),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: cubit1.increment,
            child: Icon(Icons.add),
          ),
          FloatingActionButton(
            onPressed: cubit2.increment,
            child: Icon(Icons.add),
          )
        ],
      ),
    );
  }
}

1. CounterPage 是一個 StatelessWidget，這意味著它不會在生命週期內改變自己的狀態。它使用 context.read<CounterCubit>() 來讀取 CounterCubit 的實例，這個實例應該在 CounterPage 的父小部件中提供。

2. CounterStateful 是一個 StatefulWidget，它有自己的狀態，可以在生命週期內改變。它在自己的狀態類別 _CounterStatefulState 中創建了兩個 CounterCubit 的實例 cubit1 和 cubit2，並在 BlocBuilder 中直接使用這兩個實例。

此外，CounterStateful 的 floatingActionButton 中有兩個按鈕，分別對應到 cubit1 和 cubit2 的 increment 方法，而 CounterPage 的 floatingActionButton 中有兩個按鈕，分別對應到 context.read<CounterCubit>() 的 increment 和 decrement 方法。

總的來說，這兩個類別的主要差異在於它們如何管理和使用 CounterCubit 的實例。

在CounterPage只能有一個CounterCubit，而在CounterStateful可以有兩個以上，因為彼此是分開的

Comments

Comments