Skip to content

Stream6

使用 StreamBuilder 創建反應式用戶介面

Streambuilder 是一個小部件，用於偵聽流發出的事件，每當發出事件時，它都會重建其後代。

Streambuilder vs StreamController

StreamBuilder 和 StreamController 都是 Flutter 中用於處理和顯示異步數據的工具，但它們在用法和用途上有一些不同之處。

  1. StreamController:
    - StreamController 用於創建自定義的串流，你可以通過它來添加數據到串流中（使用add方法）或者關閉串流（使用close方法）。
    - 它提供了更多的控制權，可以手動管理串流的數據流動。
    - 需要顯式地處理訂閱和取消訂閱的邏輯，需要使用 StreamSubscription 來監聽串流的事件。

  2. StreamBuilder:
    - StreamBuilder 是一個 Flutter widget，用於自動構建 UI，根據一個串流的數據變化來更新 UI。
    - 它是一個便捷的方式來根據串流的狀態自動重建 UI 元素。
    - 不需要手動管理訂閱和取消訂閱，StreamBuilder 會在 Widget 检測到需要更新時自動重新構建。

總之，StreamController 更適合需要更多控制權的場景，例如手動添加數據到串流中，或者需要在不同部分共享同一個串流的情況下。而 StreamBuilder 更適合用於快速構建基於串流數據的 Flutter UI，並自動處理 UI 更新。選擇使用哪個取決於你的具體需求和項目的特點。

使用 StreamBuilder 時的第一步是設置其 stream 屬性，使用 initialdata 屬性，可以指定在螢幕載入時和發出第一個事件之前要顯示的數據。你寫一個構建器。這是一個函數，用於在 data 屬性中獲取當前上下文和快照，其中包含流發出的數據。因此，每次 Stream 發出新事件並且有新數據可用時，都會自動觸發此操作。
如果快照中有數據，我們會在文字中顯示它，快照 hasError 屬性允許您檢查是否返回了錯誤。像往常一樣，這非常有用，您應該始終將其包含在代碼中，以避免未處理的異常，請注意，我們從未調用過 setState 方法。

//main.dart內容修改
class StreamBuilder_w extends StatefulWidget {
  const StreamBuilder_w({super.key});

  @override
  State<StreamBuilder_w> createState() => _StreamBuilder_wState();
}

class _StreamBuilder_wState extends State<StreamBuilder_w> {
  Stream<int>? numberStream;
  @override
  void initState() {
    numberStream = NumberStream().getNumbers();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: StreamBuilder(
          stream: numberStream,
          initialData: 0,
          builder: (context, snapshot) {
            //在 Dart 中，snapshot 可能是指程式執行期間的某個狀態快照，或者是從資料庫或其他來源擷取的資料快照。
            if (snapshot.hasError) {
              print("Error!");
            }
            if (snapshot.hasData) {
              return Center(
                  child: Text(snapshot.data.toString(),
                      style: TextStyle(fontSize: 60)));
            } else {
              return Center();
            }
          },
        ),
      ),
    );
  }
}

程式碼解釋

這段 Dart 程式碼定義了一個名為 StreamBuilder_w 的 StatefulWidget，該部件使用 StreamBuilder 來監聽一個 Stream 的事件並根據事件的數據來更新界面。

在 initState 方法中，它創建一個 NumberStream 對象並調用 getNumbers 方法來獲取一個 Stream，然後將這個 Stream 存儲在 numberStream 變量中。

在 build 方法中，它使用 StreamBuilder 來監聽 numberStream。StreamBuilder 是一個特殊的部件，它可以監聽一個 Stream 的事件並根據事件的數據來更新界面。

StreamBuilder 需要兩個參數：一個是要監聽的 Stream，另一個是一個 builder 函數。當 Stream 中有新的事件時，builder 函數會被調用，並將事件的數據作為參數傳遞給它。

在你的 builder 函數中，你首先檢查是否有錯誤。如果有錯誤，你打印一條錯誤消息。然後，你檢查是否有數據。如果有數據，你創建一個 Text 部件來顯示數據；否則，你創建一個空的 Center 部件。

這個部件展示了如何在 Flutter 中使用 StreamBuilder 來監聽 Stream 的事件並根據事件的數據來更新界面。透過 StreamBuilder，你可以將異步數據的處理和界面的更新結合在一起，使得你的程式碼更加簡潔和易於理解。

import 'dart:async';
import 'dart:math';

class NumberStream {

  Stream<int> getNumbers() async* {
    yield* Stream.periodic(Duration(seconds: 1), (int t) {
      Random random = Random();
      int myNum = random.nextInt(10);
      return myNum;
    });
  }


}
Last update : 13 novembre 2024
Created : 13 novembre 2024

Comments

Comments