对象储存做网站中国摄影官方网站

对象储存做网站,中国摄影官方网站,邯郸资讯,黄骅港旅游景点大全海边在 Flutter 的世界里#xff0c;我们总在构建按钮、列表、路由和状态管理 —— 但今天#xff0c;我们不做一个 App。 我们不做登录页#xff0c;不调 REST API#xff0c;也不用 Provider 或 Bloc。 我们要用 Flutter 写一场 会呼吸的星空#xff1a; 点开应用#xff…在 Flutter 的世界里我们总在构建按钮、列表、路由和状态管理 ——但今天我们不做一个 App。我们不做登录页不调 REST API也不用 Provider 或 Bloc。我们要用 Flutter 写一场会呼吸的星空点开应用屏幕化作深空无数微小光点如星尘般随机漂浮有的闪烁有的拉出尾迹当你触碰屏幕时它们像受惊般四散逃逸。这不是 UI 教程而是一次对Flutter 与粒子系统结合可能性的实验。代码不多美感十足适合放进你的个人作品集说一句“看这是我用 Flutter 画的宇宙。” 项目目标创建一个全屏黑色背景生成多个“星尘粒子”具有随机位置、大小、亮度缓慢移动伪三维视差感触摸时产生排斥力场粒子向外加速飞散使用纯 Dart CustomPainter实现无第三方依赖它不是实用工具但它让技术有了诗意。✅ 初始化项目flutter create cosmic_dustcdcosmic_dust无需添加任何插件全部使用 Flutter 原生能力。 第一步定义“星尘”类每个粒子都是一个会动的小光点。models/dust_particle.dartimportdart:math;importpackage:flutter/material.dart;classDustParticle{Offsetposition;double size;Colorcolor;double speed;double angle;DustParticle(this.position):sizeRandom().nextDouble()*2.50.8,colorColors.white.withOpacity(Random().nextDouble()*0.70.3),speedRandom().nextDouble()*0.30.1,angleRandom().nextDouble()*2*pi;voidmove(){// 微移模拟缓慢漂浮positionOffset(cos(angle)*speed,sin(angle)*speed,);// 小概率轻微转向更自然if(Random().nextDouble()0.02){angle(Random().nextDouble()-0.5)*0.3;}}voidrepelFrom(Offsetsource,double force){finaldxposition.dx-source.dx;finaldyposition.dy-source.dy;finaldistancesqrt(dx*dxdy*dy);if(distance150){finalstrength(150-distance)/150*force;position-Offset(dx,dy).normalize()*strength;}}}️ 第二步自定义绘制星尘动画我们将用CustomPainter手绘所有粒子并加入高斯模糊般的发光效果。painters/cosmic_painter.dart// painters/cosmic_painter.dartimportpackage:flutter/material.dart;import../models/dust_particle.dart;classCosmicPainterextendsCustomPainter{finalListDustParticleparticles;CosmicPainter(this.particles);overridevoidpaint(Canvascanvas,Sizesize){finalpaintPaint();// 绘制渐变夜空背景constbgGradientRadialGradient(colors:[Color(0xFF000011),Color(0xFF0A0022)]);paint.shaderbgGradient.createShader(Rect.fromLTWH(0,0,size.width,size.height));canvas.drawRect(Rect.fromLTWH(0,0,size.width,size.height),paint);// 绘制每个粒子带光晕for(finalpinparticles){finalcenterp.position;// 多层透明圆叠加制造发光感for(int i0;i3;i){paint..colorp.color.withAlpha((p.color.alpha*(0.4-i*0.2)).toInt())..maskFilterconstMaskFilter.blur(BlurStyle.normal,0.8);finalradiusp.size*(1.0i*1.5);canvas.drawCircle(center,radius,paint);}}}overrideboolshouldRepaint(CosmicPainteroldDelegate)true;}⚙️ 第三步主动画控制器使用AnimationController驱动每一帧更新。widgets/cosmic_canvas.dart// widgets/cosmic_canvas.dartimportpackage:flutter/material.dart;import../models/dust_particle.dart;import../painters/cosmic_painter.dart;classCosmicCanvasextendsStatefulWidget{constCosmicCanvas({super.key});overrideStateCosmicCanvascreateState()_CosmicCanvasState();}class_CosmicCanvasStateextendsStateCosmicCanvaswithSingleTickerProviderStateMixin{lateAnimationController_controller;lateListDustParticle_particles;Offset?_touchPoint;overridevoidinitState(){super.initState();_controllerAnimationController(vsync:this,duration:null)..repeat();// 初始化 60 个星尘粒子_particlesList.generate(60,(_){returnDustParticle(Offset(Random().nextDouble()*MediaQuery.sizeOf(context).width,Random().nextDouble()*MediaQuery.sizeOf(context).height,),);});// 每帧更新粒子位置_controller.addListener((){if(_touchPoint!null){// 受力场影响for(varpin_particles){p.repelFrom(_touchPoint!,2.5);}}// 自然漂移for(varpin_particles){p.move();// 边界环绕finalsizeMediaQuery.sizeOf(context);p.positionOffset((p.position.dxsize.width)%size.width,(p.position.dysize.height)%size.height,);}if(mounted)setState((){});});}overridevoiddispose(){_controller.dispose();super.dispose();}overrideWidgetbuild(BuildContextcontext){returnGestureDetector(onPanUpdate:(details){finalrenderBoxcontext.findRenderObject()asRenderBox;_touchPointrenderBox.globalToLocal(details.globalPosition);},onPanEnd:(_)_touchPointnull,child:CustomPaint(painter:CosmicPainter(_particles),size:Size.infinite,),);}} 最后接入主界面main.dartimportpackage:flutter/material.dart;importwidgets/cosmic_canvas.dart;voidmain()runApp(constApp());classAppextendsStatelessWidget{constApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(debugShowCheckedModeBanner:false,home:Scaffold(backgroundColor:Colors.black,body:Container(decoration:constBoxDecoration(gradient:LinearGradient(begin:Alignment.topCenter,end:Alignment.bottomCenter,colors:[Color(0xFF000011),Color(0xFF0A0022)],),),child:constCosmicCanvas(),),),);}} 运行效果flutter run你会看到屏幕中散布着几十个微微发光的小点像宇宙中的尘埃它们缓慢漂移有的亮些有的暗些形成深度错觉当你手指划过星尘像被推开一样向四周散去抬起手指后恢复宁静漂浮如同触摸了整个宇宙的一角。 技术亮点特性说明CustomPainter maskFilter制造发光/模糊效果极坐标运动angle speed更自然的非线性移动排斥力场计算模拟物理反馈环绕边界处理粒子永不消失单帧setState()驱动轻量高效 扩展想法加入音效响应音乐节奏触发星群脉冲“双指捏合”缩放视角模拟太空望远镜长按保存当前星空为壁纸repaintBoundary截图多设备同步WebSocket 广播触摸事件实现“同一片星空”打包成桌面屏保或数字艺术装置结语Flutter 是数字画笔我们总说 Flutter 快、跨平台、好维护却忘了它最迷人的地方是你可以用代码创造原本只存在于梦境中的画面。这团星尘不会帮你找工作也不会带来用户增长但它提醒我们编程不只是逻辑与工程也可以是视觉、情感与想象力的延伸。下次当你打开编辑器别急着写业务逻辑。试试问自己“如果我能控制每一个像素我想看见什么”也许答案就是一片属于你的星空。“We are all made of starstuff.”— Carl Sagan而现在我们也能用 Flutter 重现它。✨欢迎大家加入开源鸿蒙跨平台开发者社区一起共建开源鸿蒙跨平台生态。