Skip to content

Bloc2

Bloc Counter with package

Reference

emit

更新[state]為提供的[state]。如果發出的[state]與當前的[state]相等，[emit]不會執行任何操作。為了允許可能通知聽眾的初始狀態，只要它是實例發出的第一個狀態，就允許發出等於初始狀態的狀態。如果該Bloc已經關閉，則會引發[StateError]。
emit方法用於更新Cubit或Bloc的狀態，它的使用方式如下：

  1. 首先，你需要有一個已經創建的Cubit或Bloc的實例。

  2. 然後，使用該實例調用emit方法，並將新的狀態作為參數傳遞給它。例如：

myCubit.emit(newState);

這將將新的狀態(newState)設置為Cubit或Bloc的當前狀態。

  1. 當emit方法被呼叫時，Cubit或Bloc的狀態將更新，並且任何已經註冊的觀察者（observers）將收到通知，以反映新的狀態。

總之，emit方法用於將新的狀態發送到Cubit或Bloc，並觸發相關的狀態變化操作。

//cubit.dart
import 'package:bloc/bloc.dart';

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

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

程式碼解釋

這段程式碼定義了一個名為 CounterCubit 的 Cubit。Cubit 是 BLoC 套件中的一種狀態管理組件，它比 BLoC 更簡單，不需要處理事件和狀態的轉換，只需要管理狀態。

CounterCubit 繼承自 Cubit<int>，這表示它管理的狀態是一個整數。在構造函數中，我們呼叫 super(0) 來初始化狀態為 0。

increment() 方法是一個公開的方法，用於增加狀態的值。在這個方法中，我們呼叫 emit(state + 1) 來發送一個新的狀態，這個新的狀態是當前狀態加一。

在使用 CounterCubit 時，我們可以創建一個 CounterCubit 物件，然後呼叫其 increment() 方法來改變狀態。當狀態改變時，所有監聽這個 Cubit 的 widget 都會被重建，並使用新的狀態來更新 UI。

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

void main() {
  runApp(const BlocExample());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BLoC',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const BlocHomePage(),
    );
  }
}

class BlocHomePage extends StatefulWidget {
  const BlocHomePage({Key? key}) : super(key: key);

  @override
  State<BlocHomePage> createState() => _BlocHomePageState();
}

class _BlocHomePageState extends State<BlocHomePage> {
  final cubit = CounterCubit();

  @override
  void initState() {
    super.initState();
    // Use a logging framework to log the state
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BLoC'),
      ),
      body: Center(
        child: BlocBuilder<CounterCubit, int>(
          bloc: cubit,
          builder: (context, state) {
            return Text(
              state.toString(),
              style: const TextStyle(fontSize: 30),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: cubit.increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

程式碼解釋

這段程式碼是 Flutter 框架中的一個 build 方法，它是用來建立和更新 widget 的 UI。在這個方法中，我們建立了一個 Scaffold widget，它包含了一個 AppBar、一個 Center widget（包含一個 BlocBuilder）和一個 FloatingActionButton。

AppBar 是應用程式的頂部欄，我們在這裡設定了標題為 ‘BLoC’。

Center widget 是一個簡單的 widget，它可以將其子 widget 置於中心位置。在這裡，它的子 widget 是一個 BlocBuilder。

BlocBuilder 是用來建立基於 Bloc 或 Cubit 狀態的 widget。在這裡，我們監聽 CounterCubit 的狀態，並根據狀態來建立一個 Text widget。當 CounterCubit 的狀態改變時，BlocBuilder 會重建 Text widget，使其顯示新的狀態。

FloatingActionButton 是一個浮動的圓形按鈕，我們在這裡設定了當按鈕被按下時，會呼叫 cubit.increment 方法來增加 CounterCubit 的狀態。按鈕的圖示是一個加號。

Last update : 13 novembre 2024
Created : 13 novembre 2024

Comments

Comments