区块链技术博客
www.b2bchain.cn

Flutter 自定义AppBar,轮子Banner(3.1)

这篇文章主要介绍了Flutter 自定义AppBar,轮子Banner(3.1)的讲解,通过具体代码实例进行20804 讲解,并且分析了Flutter 自定义AppBar,轮子Banner(3.1)的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=20804

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

今天给大家带来的是一个随处可见的效果,很多的App都在用,今天咋们就用Flutter来实现一下吧~

  • Banner
  • 自定义AppBar

最终效果图:
效果图(1.1):
Flutter 自定义AppBar,轮子Banner(3.1)

分析:

  • Banner
    • 1.会有小圆点代表当前的页数
    • 2.会自动播放
    • 3.播放完最后一张图片,会重新从第一张图开始播放,无限循环
  • AppBar
    • 1.默认不显示,滑动的时候才显示
    • 2.透明度由0变化到1,滑动到顶部不显示AppBar

Banner

添加依赖: flutter_swiper: ^1.1.6
导包: import ‘package:flutter_swiper/flutter_swiper.dart’;

造轮子的话可能会有点问题,但是用轮子这方面大家肯定都是祖师爷级别的,这里就不废话了~直接上代码

List _mImageList = [     "https://image.springup9.com/image/20200805/epcyoisqmm80000000.jpeg",     "https://image.springup9.com/image/20200805/epcyoisqmm80000000.jpeg",     "https://image.springup9.com/image/20200805/epcyoisqmm80000000.jpeg",     "https://image.springup9.com/image/20200805/epcyoisqmm80000000.jpeg",     "https://image.springup9.com/image/20200805/epcyoisqmm80000000.jpeg"   ];   initBanner() {     return Container(       height: 200,       //使用插件  flutter_swiper: ^1.1.6       child: Swiper(         //播放图片长度         itemCount: _mImageList.length,         //自动播放         autoplay: true,         itemBuilder: (BuildContext context, int index) {           //返回播放图片           return Image.network(             _mImageList[index],             fit: BoxFit.fill,           );         },         //添加轮播图指示器         /**          * DotSwiperPaginationBuilder() 左上角显示圆点          * FractionPaginationBuilder() 左上角显示数字          * SwiperPagination()           居中小圆点          *          */         pagination: SwiperPagination(),       ),     );   } 

自定义AppBar

首先需要考虑的不是怎么写自定义AppBar,而是这个功能用到内些知识点!

先在来看看效果图加深记忆:
效果图(1.1):
Flutter 自定义AppBar,轮子Banner(3.1)

分析用到知识点:

  • 首先自定义AppBar默认情况是在Banner上显示的只是他的透明度为0而已,根据这句话需要用到Stack()组件,使AppBar叠加到Banner上,使用Opacity()来改变透明度
  • 对滑动监听,当滑动时改变透明度,滑动监听用到NotificationListener()
  • 因为AppBar是在最顶部,应该还考虑到刘海屏的问题

效果图(1.2):
Flutter 自定义AppBar,轮子Banner(3.1)
现在来看,只要完成这几步,基本就没什么问题了

第一步:先可以让他滑动

 @override   Widget build(BuildContext context) {     return Scaffold(         /**        * Stack叠加布局相当于Android中的Fragment        */         body: ListView(               children: [                 /**                  * Bunner                  */                 initBanner(),                 Container(                   height: 400,                   color: Colors.yellow,                 ),                 Container(                   height: 400,                   color: Colors.red,                 ),                 Container(                   height: 400,                   color: Colors.yellow,                 )               ],             )          );   } 

这段代码非常简单,直接看效果吧:
效果图(1.3)
Flutter 自定义AppBar,轮子Banner(3.1)
通过这张图片可以看到,Banner上面也有一个缝隙,是状态栏的缝隙,但是在代码中我们并没有设置这个属性,这个padding值是系统默认给加的,接下来我给大家介绍2种方法来解决这个问题:

方法一:
将padding的Top设置为0: EdgeInsets.only(top: 0),

@override   Widget build(BuildContext context) {     return Scaffold(         /**        * Stack叠加布局相当于Android中的Fragment        */         body:             ListView(               padding: EdgeInsets.only(top: 0),               children: [ 				..... 				]                        );   }  

方法二:
使用MediaQuery.removePadding将removeTop参数设置为true

 @override   Widget build(BuildContext context) {     return Scaffold(         /**        * Stack叠加布局相当于Android中的Fragment        */         body:        		  /**              * MediaQuery.removePadding 用来一出顶部的Padding(规范刘海屏)              */         MediaQuery.removePadding(             //MediaQuery必传参数             context: context,             //MediaQuery必传参数             removeTop: true,             child: ListView(               children: [                ......               ],             )),     );   } 

方法一和方法二效果图都是一样的:
效果图(1.4)

Flutter 自定义AppBar,轮子Banner(3.1)
这样顶部Banner就完全与顶部重叠了,及时是刘海屏也是一样的效果~

接下来对使用NotificationListener()组件对滚动监听

注释写的很清楚,就不在重复说啦~

  double _mAlpha = 0; @override   Widget build(BuildContext context) {     return Scaffold(       /**        * Stack叠加布局相当于Android中的Fragment        */         body:              /**              * MediaQuery.removePadding 用来一出顶部的Padding(规范刘海屏)              */             MediaQuery.removePadding(               //MediaQuery必传参数               context: context,               //MediaQuery必传参数               removeTop: true,               /**                *NotificationListener用来监听列表的滚动                */               child: NotificationListener(                 onNotification: (notification) {                   /**                    * notification is ScrollUpdateNotification 判断是否滑动                    *                    * notification.depth == 0 只监听第0个元素(防止Bunner,这里的意思是只监听ListView滑动)                    *                    */                   if (notification is ScrollUpdateNotification &&                       notification.depth == 0) {                     /**                      * notification.metrics.pixels 滑动像素                      *                      * 因为透明度只接受0和1  0完全透明  1完全不透明  所以/100                      */                     double d = notification.metrics.pixels / 100.0;                     if (d < 0) {                       d = 0;                     } else if (d > 1) {                       d = 1;                     }                     setState(() {                       _mAlpha = d;                     });                   }                 },                 child: ListView(                   children: [                     ......                   ],                 ),               ),             ),           );   } 

这里的_mAlpha 就是透明度的值

然后使用Stack()组件叠加布局,使用AppBar在Banner上面,在使用Opacity()组件来设置透明度的值即可

 @override   Widget build(BuildContext context) {     return Scaffold(       /**        * Stack叠加布局相当于Android中的Fragment        */         body: Stack(           children: [             /**              * MediaQuery.removePadding 用来一出顶部的Padding(规范刘海屏)              */             MediaQuery.removePadding(               //MediaQuery必传参数               context: context,               //MediaQuery必传参数               removeTop: true,               /**                *NotificationListener用来监听列表的滚动                */               child: NotificationListener(                 onNotification: (notification) {                   /**                    * notification is ScrollUpdateNotification 判断是否滑动                    *                    * notification.depth == 0 只监听第0个元素(防止Bunner,这里的意思是只监听ListView滑动)                    *                    */                   if (notification is ScrollUpdateNotification &&                       notification.depth == 0) {                     /**                      * notification.metrics.pixels 滑动像素                      *                      * 因为透明度只接受0和1  0完全透明  1完全不透明  所以/100                      */                     double d = notification.metrics.pixels / 100.0;                     if (d < 0) {                       d = 0;                     } else if (d > 1) {                       d = 1;                     }                     setState(() {                       _mAlpha = d;                     });                   }                 },                 child: ListView(                   children: [                     /**                      * Bunner                      */                      initBanner(),                      ......                   ],                 ),               ),             ),             Opacity(               opacity: _mAlpha,               child: Container(                 height: 60,                 decoration: BoxDecoration(color: Colors.white),                 child: Center(                   child: Text("首页"),                 ),               ),             ),           ],         ));   } 

来看看效果吧:
效果图:(1.5):
Flutter 自定义AppBar,轮子Banner(3.1)
完整代码

原创不易,您的点赞就是对我最大的支持,留下您的点赞吧~

本文转自互联网,侵权联系删除Flutter 自定义AppBar,轮子Banner(3.1)

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Flutter 自定义AppBar,轮子Banner(3.1)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们