網(wǎng)站首頁 編程語言 正文
本文是關(guān)于 Flutter 中的 StatefulBuilder 小部件。我將介紹小部件的基礎(chǔ)知識,然后檢查一個在實際中使用它的完整示例。、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(/* ...*/)
另一個注意事項是,您應(yīng)該將保持狀態(tài)的變量保留在構(gòu)建器函數(shù)之外。為了更清楚,請參閱下面的完整示例。
例子
預(yù)覽
我們要構(gòu)建的示例應(yīng)用程序是一種計數(shù)器應(yīng)用程序。它包含一個按鈕和一個位于紅色圓圈內(nèi)的文本小部件。每按一次按鈕,文本小部件中的數(shù)字就會增加一個單位。我們將只使用StatefulBuilder小部件來實現(xià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')),
],
),
),
),
),
);
}
}
結(jié)論
您已經(jīng)了解了有關(guān) StatefulBuilder 小部件的幾乎所有內(nèi)容。這在 Flutter 中并不是不可替代的東西,但在實現(xiàn)部分應(yīng)用程序時會給你更多的選擇。
原文鏈接:https://juejin.cn/post/7101829897789636622
相關(guān)推薦
- 2022-10-16 部署k8s集群的超詳細實踐步驟_云和虛擬化
- 2022-10-20 C語言手寫集合List的示例代碼_C 語言
- 2022-04-20 C++的數(shù)據(jù)類型你真的了解嗎_C 語言
- 2022-05-21 Python遞歸時間復(fù)雜度_python
- 2022-04-30 Python的進制轉(zhuǎn)換和ASCLL轉(zhuǎn)換你了解嗎_python
- 2022-05-03 python實現(xiàn)跨進程(跨py文件)通信示例_python
- 2022-06-28 nginx使用內(nèi)置模塊配置限速限流的方法實例_nginx
- 2022-05-03 C#面向?qū)ο笤O(shè)計原則之接口隔離原則_C#教程
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支