Flutter中的各种刷新小部件

1.FutureBuilder

用于处理异步操作和构建界面的非常有用的小部件。它通常与 Future 对象一起使用，用于在异步操作完成后构建界面。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {Future<String> fetchData() async {// 模拟异步操作，例如从网络请求数据await Future.delayed(Duration(seconds: 2));return "Hello, World!";}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("FutureBuilder Example"),),body: FutureBuilder<String>(future: fetchData(),builder: (BuildContext context, AsyncSnapshot<String> snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {return Center(child: CircularProgressIndicator());} else if (snapshot.hasError) {return Center(child: Text("Error: ${snapshot.error}"));} else {return Center(child: Text("Data: ${snapshot.data}"));}},),);}
}

如果 FutureBuilder 在构建时频繁重建，可能会导致性能问题。确保不要将 FutureBuilder 嵌套在频繁重建的小部件内部，以避免不必要的性能开销。

2.StreamController

要实现流式刷新，通常需要使用 Stream 和 StreamBuilder 来监听和更新数据。

import 'dart:async';
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {StreamController<int> _dataStreamController = StreamController<int>();int _data = 0;@overridevoid initState() {super.initState();// 模拟一个数据源，每秒生成一个新数据Timer.periodic(Duration(seconds: 1), (timer) {_dataStreamController.sink.add(_data++);});}@overridevoid dispose() {_dataStreamController.close(); // 关闭流super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("StreamBuilder Example"),),body: StreamBuilder<int>(stream: _dataStreamController.stream,builder: (BuildContext context, AsyncSnapshot<int> snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {return Center(child: CircularProgressIndicator());} else if (snapshot.hasError) {return Center(child: Text("Error: ${snapshot.error}"));} else {return Center(child: Text("Data: ${snapshot.data}"));}},),);}
}

3.ValueListenableBuilder

用于监听 ValueListenable 对象的值变化并构建界面。它允许你在值发生变化时更新界面，而无需重建整个小部件树。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class CounterModel extends ValueNotifier<int> {CounterModel(int value) : super(value);
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {final counterModel = CounterModel(0);return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('ValueListenableBuilder Example'),),body: Center(child: ValueListenableBuilder<int>(valueListenable: counterModel,builder: (BuildContext context, int value, Widget child) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('Counter Value: $value'),ElevatedButton(onPressed: () {counterModel.value++;},child: Text('Increment'),),],);},),),),);}
}

4.LayoutBuilder

用于获取父级小部件的约束信息并根据约束信息自定义构建界面。它通常用于创建根据父级尺寸动态调整的小部件，如自适应布局。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('LayoutBuilder Example'),),body: Center(child: Container(color: Colors.blue,width: 200.0,height: 200.0,child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {return Center(child: Text('Width: ${constraints.maxWidth.toStringAsFixed(2)}\nHeight: ${constraints.maxHeight.toStringAsFixed(2)}',style: TextStyle(color: Colors.white),),);},),),),),);}
}

5.AnimatedBuilder

用于在动画执行过程中监听值的变化并构建界面的小部件。通常，它与 AnimationController 或其他动画对象一起使用，以便在动画执行期间更新界面。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('AnimatedBuilder Example'),),body: Center(child: MyAnimationWidget(),),),);}
}class MyAnimationWidget extends StatefulWidget {@override_MyAnimationWidgetState createState() => _MyAnimationWidgetState();
}class _MyAnimationWidgetState extends State<MyAnimationWidget>with SingleTickerProviderStateMixin {AnimationController _controller;Animation<double> _animation;@overridevoid initState() {super.initState();_controller = AnimationController(vsync: this,duration: Duration(seconds: 2),);_animation = Tween(begin: 0.0, end: 1.0).animate(_controller)..addListener(() {// 当动画值发生变化时重建界面setState(() {});});_controller.forward();}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return AnimatedBuilder(animation: _controller,builder: (BuildContext context, Widget child) {return Opacity(opacity: _animation.value,child: Container(color: Colors.blue,width: 200.0,height: 200.0,child: Center(child: Text('Opacity: ${_animation.value.toStringAsFixed(2)}',style: TextStyle(color: Colors.white),),),),);},);}
}

6.PageRouteBuilder

用于自定义页面过渡动画的小部件，通常与 Navigator 一起使用。它允许你创建自定义的页面切换效果，包括滑动、渐变、缩放等动画效果。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('PageRouteBuilder Example'),),body: Center(child: ElevatedButton(onPressed: () {Navigator.of(context).push(PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) {return SecondPage();},transitionsBuilder: (context, animation, secondaryAnimation, child) {const begin = Offset(1.0, 0.0);const end = Offset.zero;const curve = Curves.easeInOut;var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));var offsetAnimation = animation.drive(tween);return SlideTransition(position: offsetAnimation,child: child,);},),);},child: Text('Go to Second Page'),),),);}
}class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Second Page'),),body: Center(child: ElevatedButton(onPressed: () {Navigator.of(context).pop();},child: Text('Back to First Page'),),),);}
}

7.AnimatedSwitcher

用于在切换不同小部件时执行动画的小部件。它允许你在切换小部件时应用自定义的入场和出场动画效果。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {bool _showFirstWidget = true;void _toggleWidget() {setState(() {_showFirstWidget = !_showFirstWidget;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('AnimatedSwitcher Example'),),body: Center(child: AnimatedSwitcher(duration: Duration(milliseconds: 500), // 切换动画的持续时间child: _showFirstWidget? FirstWidget(key: ValueKey<int>(1), // 指定不同的 key 以区分不同的小部件): SecondWidget(key: ValueKey<int>(2), // 指定不同的 key 以区分不同的小部件),),),floatingActionButton: FloatingActionButton(onPressed: _toggleWidget,child: Icon(Icons.swap_horiz),),);}
}class FirstWidget extends StatelessWidget {FirstWidget({Key key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(key: key,width: 200,height: 200,color: Colors.blue,child: Center(child: Text('First Widget',style: TextStyle(color: Colors.white),),),);}
}class SecondWidget extends StatelessWidget {SecondWidget({Key key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(key: key,width: 200,height: 200,color: Colors.green,child: Center(child: Text('Second Widget',style: TextStyle(color: Colors.white),),),);}
}

8.FormBuilder

FormBuilder 是一个 Flutter 插件，用于简化表单的创建和处理。它通过创建表单字段和验证逻辑，让表单管理更容易。

dependencies:flutter_form_builder: ^9.1.1

final GlobalKey<FormBuilderState> _formKey = GlobalKey<FormBuilderState>();@override
Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Login Form'),),body: Padding(padding: const EdgeInsets.all(16.0),child: FormBuilder(key: _formKey,autovalidateMode: AutovalidateMode.always, // 自动验证模式child: Column(children: <Widget>[FormBuilderTextField(name: 'username',decoration: InputDecoration(labelText: 'Username'),validator: FormBuilderValidators.required(context),),FormBuilderTextField(name: 'password',decoration: InputDecoration(labelText: 'Password'),validator: FormBuilderValidators.required(context),),SizedBox(height: 20),ElevatedButton(onPressed: () {if (_formKey.currentState.saveAndValidate()) {// 表单验证通过，执行提交操作print(_formKey.currentState.value);}},child: Text('Submit'),),],),),),);
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/127757.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Qt 插件开发详解

Qt 插件开发详解

1.简介 Qt插件是一种扩展机制&#xff0c;用于将应用程序的功能模块化&#xff0c;并且可以在运行时动态加载和卸载。Qt框架为插件提供了一套标准的接口和管理机制&#xff0c;使得插件的使用和集成变得简单和灵活&#xff0c;通过插件机制&#xff0c;可以将应用程序的功能划…
阅读更多...
C语言 DAY09 指针02

C语言 DAY09 指针02

1.指针的指针 又名二维指针 语法&#xff1a;数据类型 **p; 示例&#xff1a; void fun() { int a10; int *p1 &a; int **p2 &p1; printf("p1的地址是:%p\n",p1); printf("p2的存储的地址是:%p\n",*p2); printf("p2的地…
阅读更多...
Maven Repository使用

Maven Repository使用

1.Maven Repository网站 https://mvnrepository.com/https://mvnrepository.com/ 2.查询需要的依赖 3.参考例子 <!-- https://mvnrepository.com/artifact/org.freeswitch.esl.client/org.freeswitch.esl.client --> <dependency> <groupId>org.freesw…
阅读更多...
【k8s】资源管理命令-陈述式

【k8s】资源管理命令-陈述式

一、资源管理介绍 1、资源管理概念 在kubernetes中&#xff0c;所有的内容都抽象为资源&#xff0c;用户需要通过操作资源来管理kubernetes。 //kubernetes的本质就是一个集群系统&#xff0c;用户可以在集群中部署各种服务&#xff0c;起始就是在kubernetes集群中运行一个个…
阅读更多...
科技驱动教育！将名师智慧资产固定在系统中

科技驱动教育！将名师智慧资产固定在系统中

文章目录 每日一句正能量前言未来教育教育趋势一、在线教育&#xff1a;打破时间和空间的限制二、混合式学习&#xff1a;结合线上和线下的优势三、项目式学习&#xff1a;以问题为导向&#xff0c;以项目为载体 科技驱动教育模式在线教育人工智能教育虚拟现实/增强现实教育游戏…
阅读更多...
React事件处理

React事件处理

目录 前言 1. 添加事件处理函数 2. 传递参数 使用箭头函数 使用bind方法 3. 阻止默认行为和冒泡 阻止默认行为 阻止事件冒泡 4. 最佳实践 前言 React是一个流行的JavaScript库&#xff0c;用于构建用户界面。在React中&#xff0c;事件处理是非常重要的一部分&#xf…
阅读更多...
非递归（迭代）遍历二叉树

非递归（迭代）遍历二叉树

前言 在树结构中我们经常使用递归算法&#xff0c;但是递归本身的特质会带来很多疑难痛点&#xff0c;比如递归过深导致爆栈&#xff0c;或者是逻辑复杂... 本文将以树的前序遍历为例&#xff0c;浅析迭代算法如何模拟递归过程。
阅读更多...
tasks.json、launch.json、c_cpp_properties.json配置

tasks.json、launch.json、c_cpp_properties.json配置

tasks.json //tasks.json是辅助程序编译的模块&#xff0c;执行类似于在命令行输入“gcc hello.c -o hello”命令的操作 {"version": "2.0.0","tasks": [{"type": "cppbuild", //任务类型&…
阅读更多...
Linux开源存储方案系统介绍

Linux开源存储方案系统介绍

文章目录 开源云计算数据存储平台怎么理解云计算 存储管理和软件定义存储软件定义存储开源项目OpenSDSLibvirt Storage Management&#xff1a;OHSM&#xff08;Online Hierarchical Storage Manager&#xff09; 开源分布式存储什么是分布式存储元数据服务器数据服务器客户端 …
阅读更多...
“深入理解Nginx的负载均衡与动静分离“

“深入理解Nginx的负载均衡与动静分离“

目录 引言一、Nginx简介1. Nginx的基本概念2. Nginx的特点3. Nginx的安装配置 二、Nginx搭载负载均衡三、前端项目打包四、Nginx部署前后端分离项目&#xff0c;同时实现负载均衡和动静分离总结 引言 在现代互联网应用中&#xff0c;高性能和可扩展性是至关重要的。Nginx作为一…
阅读更多...
django 下载与安装

django 下载与安装

#django安装 pip3 install django#创建工程 django-admin startproject 名称 如&#xff1a;django-admin startproject bookmanager#django启动 python manage.py runserver python manage.py runserver 127.0.0.1:8081#数据迁移 生成迁移文件&#xff1a;python manage.py ma…
阅读更多...
吴恩达《机器学习》2-2-＞2-4:代价函数

吴恩达《机器学习》2-2-＞2-4:代价函数

一、代价函数的概念 代价函数是在监督学习中用于评估模型的性能和帮助选择最佳模型参数的重要工具。它表示了模型的预测输出与实际目标值之间的差距&#xff0c;即建模误差。代价函数的目标是找到使建模误差最小化的模型参数。 二、代价函数的理解 训练集数据&#xff1a;假设我…
阅读更多...
操作系统 (1)

操作系统 (1)

进程的概念 进程同步/进程互斥 进程互斥的软件实现 进程互斥的硬件实现 信号量机制 生产者消费者问题 以下wei8最终情况,不可调换位置,否则会发生死锁 预防死锁 避免死锁
阅读更多...
警惕！当心AI诈骗！

警惕！当心AI诈骗！

本文参照材料有&#xff1a; 鄂尔多斯新闻公众号、澎湃新闻网、搜孤新闻、腾讯网等 AI换脸诈骗实例&#xff08;就发生在近期&#xff09; 事例一&#xff1a; 近期 “AI换脸”新型诈骗频发和你视频对话的可能不是本人&#xff01; 近日&#xff0c;东胜市民李女士遭遇了冒充…
阅读更多...
CentOS一键部署Docker

CentOS一键部署Docker

Docker官网&#xff1a;https://www.docker.com/ CentOS&#xff08;7.6&#xff09; Docker&#xff08;18.06.1&#xff09;一键安装脚本 #!/bin/bash echo "1、安装依赖..." yum -y install gcc yum -y install gcc-c##验证gcc版本 gcc -vecho "2、卸载老…
阅读更多...
Linux shell编程学习笔记18：while循环语句

Linux shell编程学习笔记18：while循环语句

上回我们研究和探讨了Linux shell编程中for 循环语句&#xff0c;与在C/C中一样&#xff0c;for 循环语句Linux shell编程中有很多灵活的用法。今天我们来研究和探讨while循环语句。 一、数字条件循环 我们继续以for循环语句中的例子&#xff0c;计算 从1到10与2的乘积 并输出…
阅读更多...
【论文阅读】Iterative Poisson Surface Reconstruction (iPSR) for Unoriented Points

【论文阅读】Iterative Poisson Surface Reconstruction (iPSR) for Unoriented Points

文章目录 声明作者列表核心思想归纳算法流程机器翻译声明 本帖更新中如有问题，望批评指正！如果有人觉得帖子质量差，希望在评论中给出建议，谢谢！作者列表 FEI HOU（侯飞）、CHIYU WANG、WENCHENG WANG：中国科学院大学 HONG QIN CHEN QIAN、YING HE 核心思想归纳 当一条从…
阅读更多...
浅述青犀AI算法人体攀爬行为检测的应用场景及解决方案

浅述青犀AI算法人体攀爬行为检测的应用场景及解决方案

人体攀爬行为检测是指利用计算机视觉技术对人类攀爬物体的行为进行识别和分析。该技术主要依靠图像和视频数据进行分析&#xff0c;通过识别人类身体的各个部位&#xff0c;以及其在攀爬过程中的动作和姿态&#xff0c;实现对攀爬行为的检测和跟踪。该技术的场景应用比较广泛&a…
阅读更多...
航空领袖《波音公司》被攻击勒索

航空领袖《波音公司》被攻击勒索

全球航空航天业的领袖公司-波音竟然被黑客攻击勒索了&#xff1f;相比很多小伙伴对波音并不熟悉&#xff0c;波音公司是世界上最大的民用和军用飞机制造商之一。其客户分布在全球90多个国家&#xff0c;像国内很多民航都用的是波音。那就有小伙伴担心了那我做飞机不是就很危险了…
阅读更多...
（2）STM32单片机上位机

（2）STM32单片机上位机

使用VX小程序开发上位机&#xff0c; 样式如何创建&#xff1f; 在你所在页面 开辟空间 使用 view 在view 中 输入class 就是样式&#xff0c;在编辑样式的时候&#xff0c;如何寻找哪一块的样式 就是通过这个class寻找的 按钮使用switch
阅读更多...
最新文章

Copyright @ 2022~2023