Skip to content

Bloc7

BlocProvider

BlocProvider 是 Flutter 小工具，它通過 BlocProvider.of(context) 向其子項提供區塊。它用作依賴項注入 (DI) 小工具，以便可以將區塊的單個實例提供給子樹中的多個小工具。

在大多數情況下， BlocProvider 應用于建立新的區塊，這些區塊將可供子樹的其餘部分使用。在這種情況下，由於 BlocProvider 負責建立區塊，因此它將自動處理關閉區塊。

Code

//counter_bloc.dart
import 'package:flutter_bloc/flutter_bloc.dart';

class CounterBloc extends Bloc<int, int> {
  CounterBloc() : super(0) {
    on<int>((event, emit) {
      emit(state + event);
    });
  }
}

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


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

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterBloc = context.watch<CounterBloc>();
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用context.watch監聽state
            Text(
              'Counter Value:',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              '${counterBloc.state}',
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            Text(
              'Counter Value:',
              style: TextStyle(fontSize: 24),
            ),
            // 使用 BlocBuilder 監聽 Bloc 狀態的變化
            BlocBuilder<CounterBloc, int>(
              builder: (context, state) {
                return Text(
                  '$state',
                  style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
                );
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 使用 context.read 執行 Bloc 的事件
                context.read<CounterBloc>().add(1);
              },
              child: Text('Increment'),
            ),
            SizedBox(
              height: 10,
            ),
            ElevatedButton(
              onPressed: () {
                // 使用 context.read 執行 Bloc 的事件
                context.read<CounterBloc>().add(-1);
              },
              child: Text('Decrement'),
            ),
          ],
        ),
      ),
    );
  }
}

程式碼解釋

這段程式碼是一個名為 CounterPage 的 Flutter 小部件，它是一個 StatelessWidget，這意味著它的狀態不會改變。

在 build 方法中，首先使用 context.watch() 來獲取 CounterBloc 的當前實例。當 CounterBloc 的狀態變化時，使用 context.watch() 的小部件將會被重建。

接著，建立一個 Scaffold 小部件，這是一個基本的視覺布局結構，包含了應用程式的主要元素，如 appBar 和 body。

在 body 中，使用 Center 小部件來將其子小部件置於中心位置。子小部件是一個 Column 小部件，它將其子小部件排列成垂直的列。

Column 的子小部件包括兩個 Text 小部件，分別顯示 “Counter Value:” 和 CounterBloc 的當前狀態，以及兩個 ElevatedButton 小部件，分別用於增加和減少計數器的值。

當按下 “Increment” 按鈕時，會使用 context.read().add(1) 來觸發 CounterBloc 的事件，增加計數器的值。同樣，當按下 “Decrement” 按鈕時，會使用 context.read().add(-1) 來減少計數器的值。

此外，還使用了 BlocBuilder 小部件來監聽 CounterBloc 的狀態變化。當 CounterBloc 的狀態變化時，BlocBuilder 將會重建其子小部件，並將新的狀態作為 builder 函數的參數。在這裡，builder 函數返回一個 Text 小部件，顯示 CounterBloc 的當前狀態。

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

void main() {
  runApp(
    BlocProvider(
      create: (context) => CounterBloc(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}
Last update : 13 novembre 2024
Created : 13 novembre 2024

Comments

Comments