日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

詳解Flutter中StatefulBuilder組件的使用_Android

作者:大前端之旅 ? 更新時間: 2022-07-24 編程語言

本文是關于 Flutter 中的 StatefulBuilder 小部件。我將介紹小部件的基礎知識,然后檢查一個在實際中使用它的完整示例。、StatefulBuilder 小部件可以在這些區域的狀態發生變化時僅重建某些小區域而無需付出太多努力。這提高了應用程序的性能。

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

builder 函數有兩個參數:context和一個用于在狀態改變時觸發重建的函數:

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

另一個注意事項是,您應該將保持狀態的變量保留在構建器函數之外。為了更清楚,請參閱下面的完整示例。

例子

預覽

我們要構建的示例應用程序是一種計數器應用程序。它包含一個按鈕和一個位于紅色圓圈內的文本小部件。每按一次按鈕,文本小部件中的數字就會增加一個單位。我們將只使用StatefulBuilder小部件來實現這一點。你不會看到任何StatefulWidget

以下是它的工作原理:

注意: 如果您使用的是 Safari,此演示視頻可能無法正常播放或根本無法播放。請改用 Chrome、Edge、Firefox 或其他網絡瀏覽器。

編碼

帶有解釋的完整代碼:

// 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')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

結論

您已經了解了有關 StatefulBuilder 小部件的幾乎所有內容。這在 Flutter 中并不是不可替代的東西,但在實現部分應用程序時會給你更多的選擇。

原文鏈接:https://juejin.cn/post/7101829897789636622

欄目分類
最近更新