Skip to content

Bloc6

BlocSelector

Reference

https://pub.dev/packages/flutter_bloc

BlocSelector 是類似於 BlocBuilder 的 Flutter 小工具，但允許開發人員根據目前的區塊狀態選擇新值來篩選更新。如果選取的值沒有變更，就會防止不必要的建構。選取的值必須是不可變的，才能讓 BlocSelector 準確判斷是否應該再次呼叫 builder 。
如果省略 bloc 參數， BlocSelector 將自動使用 BlocProvider 和當前 BuildContext 執行查詢。

BlocSelector<BlocA, BlocAState, SelectedState>(
  selector: (state) {
    // return selected state based on the provided state.
  },
  builder: (context, state) {
    // return widget here based on the selected state.
  },
)

一個小範例

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

// 定義計數器的狀態
class CounterState {
  final int count;

  CounterState(this.count);
}

// 定義計數器的Bloc
class CounterBloc extends Bloc<void, CounterState> {
  CounterBloc() : super(CounterState(0)) {
    on<IncrementEvent>((event, emit) {
      emit(CounterState(state.count + 1));
    });
  }
}

// 自定義事件類
class IncrementEvent {}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BlocSelector 示例"),
      ),
      body: Center(
        child: BlocSelector<CounterBloc, CounterState, int>(
          selector: (state) {
            return state.count; // 選擇計數器的值作為所選值
          },
          builder: (context, count) {
            return Text("$count");
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<CounterBloc>().add(IncrementEvent()); // 發送自定義事件
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

程式碼解釋及比較Bloc5內容

第一段程式碼使用此Bloc6程式碼，第二段使用Bloc5

這兩段程式碼的主要差異在於它們使用的 BLoC 庫的不同部分，以及它們如何管理和更新狀態。

第一段程式碼使用的是 Bloc 類，它是一個更通用的狀態管理解決方案，可以處理更複雜的業務邏輯。它使用 CounterBloc 來管理狀態，並通過發送 IncrementEvent 事件來更新狀態。此外，它使用 BlocSelector 來選擇需要的狀態部分，並在狀態變化時重建小部件。

第二段程式碼使用的是 Cubit 類，它是一個更簡單的狀態管理解決方案，適合於業務邏輯較簡單的情況。它使用 CounterCubit 來管理狀態，並通過調用 increment 和 decrement 方法來更新狀態。此外，它使用 BlocBuilder 來在狀態變化時重建小部件。

總的來說，這兩段程式碼的主要差異在於它們使用的 BLoC 庫的部分以及它們如何管理和更新狀態。

Last update : 13 novembre 2024
Created : 13 novembre 2024

Comments

Comments