詳解Flutter中StatefulBuilder組件的使用

更新時間：2022年05月26日 10:51:48 作者：大前端之旅

StatefulBuilder小部件可以在這些區(qū)域的狀態(tài)發(fā)生變化時僅重建某些小區(qū)域而無需付出太多努力。本文將來詳細(xì)講講它的使用，需要的可以參考一下

本文是關(guān)于 Flutter 中的 StatefulBuilder 小部件。我將介紹小部件的基礎(chǔ)知識，然后檢查一個在實(shí)際中使用它的完整示例。、StatefulBuilder 小部件可以在這些區(qū)域的狀態(tài)發(fā)生變化時僅重建某些小區(qū)域而無需付出太多努力。這提高了應(yīng)用程序的性能。

StatefulBuilder({
  Key? key, 
  required StatefulWidgetBuilder builder
r})

builder 函數(shù)有兩個參數(shù)：context和一個用于在狀態(tài)改變時觸發(fā)重建的函數(shù)：

builder: (context, setInnerState) => SomeWidget(/* ...*/)

另一個注意事項(xiàng)是，您應(yīng)該將保持狀態(tài)的變量保留在構(gòu)建器函數(shù)之外。為了更清楚，請參閱下面的完整示例。

例子

預(yù)覽

我們要構(gòu)建的示例應(yīng)用程序是一種計數(shù)器應(yīng)用程序。它包含一個按鈕和一個位于紅色圓圈內(nèi)的文本小部件。每按一次按鈕，文本小部件中的數(shù)字就會增加一個單位。我們將只使用StatefulBuilder小部件來實(shí)現(xiàn)這一點(diǎn)。你不會看到任何StatefulWidget。

以下是它的工作原理：

注意： 如果您使用的是 Safari，此演示視頻可能無法正常播放或根本無法播放。請改用 Chrome、Edge、Firefox 或其他網(wǎng)絡(luò)瀏覽器。

編碼

帶有解釋的完整代碼：

// main.dart
import 'package:flutter/material.dart';
?
void main() {
  runApp(const MyApp());
}
?
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
?
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: '大前端之旅',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: const HomePage(),
    );
  }
}
?
// StatelessWidget is used here
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
?
  @override
  Widget build(BuildContext context) {
    // This is the number shown in the red circle
    // It represents state and stays outside the builder function
    int count = 0;
    return Scaffold(
      appBar: AppBar(title: const Text('大前端之旅')),
      body: Padding(
        padding: const EdgeInsets.all(30),
        child: Center(
          // Implement StatefulBuilder
          child: StatefulBuilder(
            builder: (context, setInnerState) => Column(
              children: [
                Container(
                  width: 300,
                  height: 300,
                  decoration: const BoxDecoration(
                      color: Colors.red, shape: BoxShape.circle),
                  child: Center(
                    // Display the number
                    child: Text(
                      count.toString(),
                      style: const TextStyle(fontSize: 80, color: Colors.white),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                // This button is used to crease the number
                ElevatedButton.icon(
                    onPressed: () {
                      // Call setInnerState function
                      setInnerState(() => count++);
                    },
                    icon: const Icon(Icons.add),
                    label: const Text('Increase By One')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}