網站首頁 編程語言 正文
本文是關于 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
相關推薦
- 2024-01-28 Mybatis Example 用法手冊,接口方法和實例方法
- 2024-01-27 Apache POI 及 alibaba EasyExcel使用
- 2022-08-10 C++中string字符串分割函數split()的4種實現方法_C 語言
- 2023-03-22 R語言基礎數據類型的具體使用_R語言
- 2022-07-12 luckySheet在線編輯excel及遇到的問題
- 2022-06-22 Android使用EventBus多次接收消息_Android
- 2023-07-07 更新node后項目報錯
- 2022-02-01 uniapp 開發h5 優化加載速度
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支