Flutter:gsy_flutter_demo项目学习——布局切换动画、列表滑动监听、列表滑动到指定位置、高斯模糊

前言

gsy_flutter_demo是一个关于各种小案例和小问题的方案解决。项目是由flutter大佬恋猫de小郭维护的

项目地址:https://github.com/CarGuo/gsy_flutter_demo

感兴趣的可以看一下大佬的文章:Flutter完整开发实战详解系列,GSY Flutter 系列专栏整合
在这里插入图片描述

关于该项目的学习呢,不会都学习,只会学习自己比较感兴趣的东西。

布局切换动画

动画效果

在这里插入图片描述
在这里插入图片描述

原文地址

Flutter 小技巧之有趣的动画技巧

代码

class YcHomeBody extends StatefulWidget {const YcHomeBody({Key? key, required this.width, required this.height}): super(key: key);// 容器的宽高final double width;final double height;State<YcHomeBody> createState() => _YcHomeBodyState();
}class _YcHomeBodyState extends State<YcHomeBody>with SingleTickerProviderStateMixin {int currentIndex = 0;initState() {super.initState();//  创建吗一个定时器Timer.periodic(const Duration(seconds: 2), (timer) {setState(() {currentIndex += 1;if (currentIndex == 100) {currentIndex = 0;}// print("当前值:$currentIndex");});});}PositionedItemData getIndexPosition(int index, Size size) {switch (index) {case 0:return PositionedItemData(width: size.width / 2 - 5,height: size.height,left: 0,top: 0,);case 1:return PositionedItemData(width: size.width / 2 - 5,height: size.height / 2 - 5,left: size.width / 2 + 5,top: 0,);case 2:return PositionedItemData(width: size.width / 2 - 5,height: size.height,left: size.width / 2 + 5,top: size.height / 2 + 5,);}return PositionedItemData(width: size.width / 2 - 5,height: size.height,left: 0,top: 0,);}Widget build(BuildContext context) {return Center(child: Container(height: widget.height,width: widget.width,margin: const EdgeInsets.symmetric(horizontal: 20),// 根据父widget的约束条件来构建自身的布局,适合在需要根据父widget的约束条件来动态调整布局的场景中使用child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {var f = getIndexPosition(currentIndex % 3, constraints.biggest);var s = getIndexPosition((currentIndex + 1) % 3, constraints.biggest);var t = getIndexPosition((currentIndex + 2) % 3, constraints.biggest);return Stack(fit: StackFit.expand,children: [// InkWell为其子widget提供水波纹效果和触摸事件处理PositionItem(f,child: InkWell(onTap: () {// print("red");},child: Container(color: Colors.redAccent),)),PositionItem(s,child: InkWell(onTap: () {//print("green");},child: Container(color: Colors.greenAccent),)),PositionItem(t,child: InkWell(onTap: () {// print("yello");},child: Container(color: Colors.yellowAccent),)),],);},),));}
}class PositionItem extends StatelessWidget {final PositionedItemData data;final Widget child;const PositionItem(this.data, {Key? key, required this.child}): super(key: key);Widget build(BuildContext context) {// AnimatedPositioned 用于动画定位位置的widgetreturn AnimatedPositioned(duration: const Duration(seconds: 1), // 动画持续时间curve: Curves.fastOutSlowIn, // 动画曲线left: data.left,top: data.top,// AnimatedContainer,根据指定的时间段自动过渡其属性,用于实现大小的过渡child: AnimatedContainer(duration: const Duration(seconds: 1),curve: Curves.fastOutSlowIn,width: data.width,height: data.height,child: child,),);}
}// 用于规范元素的宽高和位置
class PositionedItemData {final double left;final double top;final double width;final double height;PositionedItemData({required this.left,required this.top,required this.width,required this.height,});
}

使用

YcHomeBody(width: 240, height: 300,)

列表滑动监听

class _MyHomePageState extends State<MyHomePage> {// 是否到底bool isEnd = false;// 偏移量int offset = 0;// 通知String notify = '';// 列表containerfinal ScrollController _controller = ScrollController();void initState() {super.initState();_controller.addListener(() {setState(() {// 这里进行取整,不然小数位数太多offset = _controller.offset.floor();// 判断当前滚动位置的像素值是否等于可滚动区域最大值isEnd =_controller.position.pixels == _controller.position.maxScrollExtent;});});}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: NotificationListener(onNotification: (dynamic notification) {// 在这里处理滚动通知if (notification is ScrollStartNotification) {// 滚动开始notify = "滚动开始";} else if (notification is ScrollUpdateNotification) {// 滚动更新notify = "滚动更新";} else if (notification is ScrollEndNotification) {// 滚动结束notify = "滚动结束";}setState(() {});// 返回true表示阻止通知冒泡,返回false则继续向上传递通知return false;},child: ListView.builder(itemCount: 100,controller: _controller,itemBuilder: (context, index) {return Card(child: Container(height: 60,alignment: Alignment.centerLeft,child: Text("Item $index"),));})),// 页脚按钮persistentFooterButtons: [Align(alignment: Alignment.center,child: Text("通知:$notify,偏移量:$offset,到达底部:${isEnd ? '是' : '否'}"),)], // This trailing comma makes auto-formatting nicer for build methods.);}
}

在这里插入图片描述
NotificationListener是一个widget,用于监听并处理各种通知。它可以将通知分发给子widget,并根据需要执行相应的操作

列表滑动到指定位置

作者提供了两种实现方式,一种是使用第三库,另一种是需要自己进行计算。本着能使用第三方库就使用第三库的原则,我们使用第三库来实现。

官方地址
https://pub-web.flutter-io.cn/packages/scroll_to_index

安装

flutter pub add scroll_to_index
class _MyHomePageState extends State<MyHomePage> {// 列表containerlate final AutoScrollController _controller;// 列表项高度,100~300间的整数List<int> items =List.generate(50, (index) => 100 + math.Random().nextInt(300 - 100));void initState() {super.initState();//  初始化_controller = AutoScrollController(viewportBoundaryGetter: () => Rect.fromLTRB(0, 0, 0,MediaQuery.of(context).padding.bottom), // 获取底部边界值,保证滚动到底部时,内容不会被遮挡axis: Axis.vertical);}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: ListView.builder(itemCount: 50,controller: _controller,itemBuilder: (context, index) {return AutoScrollTag(key: ValueKey(index),controller: _controller,index: index,highlightColor: Colors.black.withOpacity(0.1),child: Container(height: items[index] + 0.0,alignment: Alignment.topCenter,margin: const EdgeInsets.all(10),decoration: BoxDecoration(border: Border.all(color: Colors.blue, width: 1),borderRadius: BorderRadius.circular(10)),child: Text("items ${index + 1},height:${items[index]}"),));}),// 页脚按钮persistentFooterButtons: [ElevatedButton(onPressed: () async {// 滚动await _controller.scrollToIndex(0,preferPosition: AutoScrollPosition.begin); // 以列表的上边框为准//   高亮_controller.highlight(0);},child: const Text("第1个")),ElevatedButton(onPressed: () async {// 滚动await _controller.scrollToIndex(19,preferPosition: AutoScrollPosition.begin);//   高亮_controller.highlight(19);},child: const Text("第20个"))], // This trailing comma makes auto-formatting nicer for build methods.);}
}

在这里插入图片描述

高斯模糊

Stack(children: [Positioned(child: Image.network('https://scpic2.chinaz.net/files/default/imgs/2023-07-24/f81ebfa03646059a_s.jpg',fit: BoxFit.fill,width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,),),//  高斯模糊Center(child: SizedBox(width: 300,height: 300,child: ClipRRect(borderRadius: BorderRadius.circular(15.0),child: BackdropFilter(// 设置视频和垂直方向的模糊程度filter: ImageFilter.blur(sigmaX: 8.0,sigmaY: 8.0),child: const Text("高斯模糊"),),),),)],)

在这里插入图片描述

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

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

相关文章

[SQL挖掘机] - 窗口函数 - lag

介绍: lag() 是一种常用的窗口函数&#xff0c;它用于获取某一行之前的行的值。它可以用来在结果集中的当前行之前访问指定列的值。 用法: lag() 函数的语法如下&#xff1a; lag(列名, 偏移量, 默认值) over (partition by 列名1, 列名2, ... order by 列名 [asc|desc], .…

非凸科技受邀参加中科大线上量化分享

7月30日&#xff0c;非凸科技受邀参加由中国科学技术大学管理学院学生会、超级量化共同组织的“打开量化私募的黑箱”线上活动&#xff0c;分享量化前沿以及求职经验&#xff0c;助力同学们拿到心仪的offer。 活动上&#xff0c;非凸科技量化策略负责人陆一洲从多个角度分享了如…

485modbus转profinet网关连三菱变频器modbus通讯触摸屏监控

本案例介绍了如何通过485modbus转profinet网关连接威纶通与三菱变频器进行modbus通讯。485modbus转profinet网关提供了可靠的连接方式&#xff0c;使用户能够轻松地将不同类型的设备连接到同一网络中。通过使用这种网关&#xff0c;用户可以有效地管理和监控设备&#xff0c;从…

【华秋干货铺】PCB布线技巧升级:高速信号篇

如下表所示&#xff0c;接口信号能工作在8Gbps及以上速率&#xff0c;由于速率很高&#xff0c;PCB布线设计要求会更严格&#xff0c;在前几篇关于PCB布线内容的基础上&#xff0c;还需要根据本篇内容的要求来进行PCB布线设计。 高速信号布线时尽量少打孔换层&#xff0c;换层优…

hash 模式和 history 模式的实现原理

hash 模式和 history 模式的实现原理&#xff1a; #后面的 hash 值的变化不会导致浏览器向服务器发出请求&#xff0c;浏览器不发出请求&#xff0c;就不会刷新页面。通过监听 hashchange 事件的变化可以知道 hash 值发生了哪些变化&#xff0c;然后根据 hash 值的变化来实现更…

vue 3.0 + element-ui MessageBox弹出框的 让文本框显示文字 placeholder

inputPlaceholder:请填写理由, 方法实现如下: this.$prompt(, 是否确认&#xff1f;, { confirmButtonText: 确定, cancelButtonText: 取消, inputPlaceholder:请填写理由, }).then(({ value }) > { if(value null || value ""){ Message({message: 请填…

卷积神经网络【图解CNN】

文章目录 1.卷积运算2.池化3.全连接层 卷积神经网络可以看作一个函数或者黑箱&#xff0c;输入就是图片的像素阵列&#xff0c;输出就是这个图片是什么&#xff1f; 图片是X&#xff0c;那么就输出‘x’&#xff0c;图片是‘O’,那么就输出O&#xff1b; 在计算机眼中&#xff…

如何制作VR全景地图,VR全景地图可以用在哪些领域?

引言&#xff1a; 随着科技的迅速进步&#xff0c;虚拟现实&#xff08;VR&#xff09;技术正逐渐渗透到各个领域。VR全景地图作为其中的重要应用之一&#xff0c;为人们提供了身临其境的全新体验。 一.什么是VR全景地图&#xff1f; VR全景地图是一种利用虚拟现实技术&…

Sprint Boot学习路线5

Spring MVC Spring MVC是Spring框架的一部分&#xff0c;是一个Web应用程序框架。它旨在使用Model-View-Controller&#xff08;MVC&#xff09;设计模式轻松构建Web应用程序。 在Spring MVC中&#xff0c;应用程序被分为三个主要组件&#xff1a;Model、View和Controller。M…

怎样做好字幕翻译服务?

我们知道&#xff0c;字幕泛指影视作品后期加工的文字&#xff0c;往往显示在电视、电影、舞台作品中。字幕翻译就是将外国影片配上本国字幕或者是将本国影片配上外国字幕。那么&#xff0c;字幕翻译的主要流程是什么&#xff0c;怎样做好字幕翻译服务&#xff1f; 据了解&…

【mysql复习】——单表查询知识复习

很喜欢一句话&#xff1a;这个世上只有一种真正的英雄主义&#xff0c;就是你认清了生活的真相&#xff0c;却仍然热爱它&#xff1b; 目录 条件查询&#xff08;查询满足条件的数据&#xff09; 注意点: 在学习数学公式以及排序等关键字时&#xff0c;首先你要明白他们使用在…

Android 向系统日历添加日程提醒事件

Android 向系统日历添加日程提醒事件 1.权限申请 <uses-permission android:name"android.permission.READ_CALENDAR" /> <uses-permission android:name"android.permission.WRITE_CALENDAR" /> 注意&#xff1a;6.0 以上需要申请权限才可…

企业既要用u盘又要防止u盘泄密怎么办?

企业在日常生产生活过程中&#xff0c;使用u盘交换数据是最企业最常用也是最便携的方式&#xff0c;但是在使用u盘的同时&#xff0c;也给企业的数据保密工作带来了很大的挑战&#xff0c;往往很多情况下企业的是通过u盘进行数据泄漏的。很多企业采用一刀切的方式&#xff0c;直…

【Kubernetes】

目录 一、Kubernetes 概述1、K8S 是什么&#xff1f;2、为什么要用 K8S?3、Kubernetes 集群架构与组件 二、核心组件1、Master 组件2、Node 组件3、K8S创建Pod的工作流程&#xff1f;&#xff08;重点&#xff09;4、K8S资源对象&#xff08;重点&#xff09;5、Kubernetes 核…

iOS数字转为图片

根据数字&#xff0c;转成对应的图片 - (void)viewDidLoad {[super viewDidLoad];[self testNum2String:10086]; }/// 根据数字&#xff0c;显示对应的图片 数字用特定的图片显示 - (void)testNum2String:(NSInteger)num {UIView *numContentView [[UIView alloc] initWithFr…

flask------请求拓展

flask中也有类似与django中的中间件&#xff0c;只不过是另一种写法&#xff0c;但是他们的作用是一样的&#xff0c;下面我们就一一介绍&#xff1a; 1.before_request 作用 : before_request 相当于 django 中的 process_request&#xff0c;每一个请求在被处理前都会经…

JAVA环境变量配置(windows)

windows配置环境变量&#xff08;大小写不区分&#xff09;&#xff1a; 新建JAVA_HOME&#xff1a;jdk的根目录 D:\Java\jdk1.8.0_71Path&#xff08;必须&#xff09;%JAVA_HOME%\bin新建&#xff08;类路径&#xff09;CLASSPATH: .;D:\Java\jdk1.8.0_71\lib(或者.;%JAVA_HO…

【外卖系统】套餐管理

新增套餐 需求分析 后台可以管理套餐信息&#xff0c;通过新增套餐功能来添加一个新的套餐&#xff0c;在添加套餐时需要选择当前套餐所属的套餐分类和包含的菜品&#xff0c;并需要上传套餐对应的图片。 页面发送ajax请求&#xff0c;请求服务端获取套餐分类数据并展示到下…

最细致讲解yolov8模型推理完整代码--(前处理,后处理)

研究yolov8时&#xff0c;一直苦寻不到Yolov8完整的模型推理代码演示&#xff0c;大部分人都是基于Yolo已经封装好的函数调用&#xff0c;这个网上教程很多&#xff0c;本文就不赘述这方面的内容了&#xff0c;接下来将细致全面的讲解yolov8模型推理代码&#xff0c;也就是yolo…

卡片的点击事件通过点击进行路由传参

下面是详情页 通过 接收 <template><div class"detail"><img :src"row.imgUrl"><van-icon name"arrow-left" click"back" /></div> </template><script> export default {created() {let …