|
题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力
Flutter是谷歌推出的最新的移动开发框架。 如下图所示，你的APP项目中一定会应用到这样的场景，在实际项目开发中，你可以将下图中的图片配置成你想要的布局效果如 优惠券弹框、消息提示等等。 
在这里是使用了 animations 这个动画包， 2020年2月21日，Flutter 团队发布的这个动画包，作为最新宣布的 Material Desin （材质设计）运动系统的一部分。 Material Design 是一个设计系统，支持 iOS、 Android、 web 和 Flutter 的原生实现。这个动画可以理解为是Material Design 的一个新增功能，它包括四个过渡模式： Container transform 容器转换 Shared Axis 共享轴 Fade through 淡出 Fade 渐变
如上图的效果就是一种弹出的效果，在这里使用 animations 中的 showModal () 函数来实现 showModal 方法showModal () 函数是 animations 引入的一个新的全局函数，可用于在当前导航器中以模态的形式来显示。 于现有的 showGeneralDialog ()函数类似，是 material.dart 的一部分。 通过 ModalConfiguration 来配置模态显示，如进入和退出转换、转换的持续时间和模态障碍属性，FadeScaleTransitionConfiguration 为其子类，是一种新材质设计淡出转换的标准值。 //显示底部弹框的功能void showBottomSheet() { showModal( context: context, //动画过渡配置 configuration: FadeScaleTransitionConfiguration( //阴影背景颜色 barrierColor: Colors.black54, //打开新的Widget 的时间 transitionDuration: Duration(milliseconds: 1000), //关闭新的Widget 的时间 reverseTransitionDuration: Duration(milliseconds: 1000), ), builder: (BuildContext context) { //显示的Widget return HomePage2(); }, );}
在这里的 HomePage2 就是小编定义的上图中浏览图片的那个页面 class HomePage2 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( //背景透明 backgroundColor: Colors.transparent, body: Theme( data: ThemeData( //去除点击事件的水波纹效果 splashColor: Colors.transparent, //云除点击事件的高亮效果 highlightColor: Colors.transparent, ), child: InkWell( onTap: () { Navigator.of(context).pop(); }, child: Container( child: Center( child: Image.asset("images/banner3.webp"), ), ), ), ), ); }}
以小编的性格，要实现百万Demo随时复制粘贴肯定是需要源码的，点击查看原文获取相关视频与源码。 每日分享 精彩人生。
|
