文章目錄

• 前言
• 一、移除頂部狀態欄空白
• 二、幀布局組件
• 三、透明度組件
• 四、監聽滾動事件
• 五、完整代碼示例
• 六、相關資源

前言

在上一篇博客 【Flutter】Banner 輪播組件 ( flutter_swiper 插件 | Swiper 組件 ) 基礎上進行開發 ;

一、移除頂部狀態欄空白

---

在 Flutter 界面上方 , 默認有個狀態欄 , 顯示時間 , 電量 , 網絡 , 信號強度等信息 , 這個狀態欄是半透明的 ;

可以使用 MediaQuery 組件移除頂部狀態欄空白部分 ;

調用 MediaQuery.removePadding 方法 , 第一個參數 context 設置成 BuildContext context , 第二個參數 child 設置成原來的組件 ;

修改前的代碼 :

@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中組件body: Center(),);}

修改后的代碼 : 下面代碼中的 removeTop: true 很關鍵 , 代表移除頂部的空白 ;

@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中組件body: MediaQuery.removePadding(removeTop: true,context: context,child: Center(),),);}

移除后頂部空白后的效果 : 上述只是給出了簡要的代碼示例 , 完整代碼看最后的示例 ;

二、幀布局組件

---

實現幀布局樣式需要使用 Stack 組件 , 前面的組件在下層 , 后面的組件在上層 ;

@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 幀布局組件 , 前面的元素在下層 , 后面的元素在上層body: Stack(children: <Widget>[/// 消除頂部空白的組件MediaQuery.removePadding(),/// 透明度可變組件Opacity(),],),);}

上述設置 , 實現了在 Swiper 組件上方顯示了 Text 組件 , 并且 Text 組件覆蓋了 Swiper 組件 ;

三、透明度組件

---

Opacity 組件可以控制該組件的透明度改變 , 修改 opacity 屬性 , 可以改變組件的透明度效果 , 0 是完全透明 , 1 是完全不透明 ;

/// 透明度可變組件Opacity(opacity: appBarAlpha,child: Container(height: 80,decoration: BoxDecoration(color: Colors.white),child: Center(child: Padding(padding: EdgeInsets.only(top: 20),child: Text("標題透明漸變"),),),),),

四、監聽滾動事件

---

NotificationListener 組件可以監聽滾動事件 ;

在 onNotification 屬性中設置監聽事件 , 傳入一個 NotificationListenerCallback 類型的方法 , 方法參數是 ScrollNotification 類型的 ;

指定監聽的組件 : scrollNotification.depth == 0 指的是深度為 0 的元素 , 即 ListView 元素滾動時 , 才觸發滾動 ;

調用 scrollNotification.metrics.pixels 獲取滾動的距離 ; 滾動距離在 0 ~ 100 之間時 , 透明度組件透明度從 0 ~ 1 變化 , 如果滾動距離 >= 100 , 則透明度組件為 1 , 如果滾動距離小于 0 , 則透明度為 0 ;

注意 : 在最后設置完畢后 , 調用 setState 方法 , 更新 UI ;

代碼示例 :

NotificationListener(// 監聽滾動的方法onNotification: (scrollNotification){// scrollNotification.depth == 0 指的是深度為 0 的元素// 即 ListView 元素滾動時 , 才觸發滾動if(scrollNotification is ScrollUpdateNotification &&scrollNotification.depth == 0) {// 從 scrollNotification 中獲取滾動參數print("滾動距離 ${scrollNotification.metrics.pixels}");// 滾動距離在 0 ~ 100 之間時// 透明度組件透明度從 0 ~ 1 變化// 如果滾動距離 >= 100 , 則透明度組件為 1double alpha = scrollNotification.metrics.pixels / 100.0;// 處理小于 0 和 大于 1 極端情況// 如果只處于 0 ~ 1 之間 , 不做處理if (alpha < 0) {alpha = 0;} else if (alpha > 1) {alpha = 1;}// 更新 UI 數據setState(() {appBarAlpha = alpha;});}},child: ListView(children: ),),

五、完整代碼示例

---

import 'package:flutter/material.dart'; import 'package:flutter_swiper/flutter_swiper.dart';/// 應用主界面 class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState(); }class _HomePageState extends State<HomePage> {List _imageUrls = ["https://img-blog.csdnimg.cn/20210401205234582.png","https://img-blog.csdnimg.cn/20210401205307863.png","https://img-blog.csdnimg.cn/20210401205249606.png"];/// 頂層透明度組件的透明度double appBarAlpha = 0;@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 幀布局組件 , 前面的元素在下層 , 后面的元素在上層body: Stack(children: <Widget>[/// 消除頂部空白的組件MediaQuery.removePadding(removeTop: true,context: context,// 使用 NotificationListener 組件 , 監聽列表的滾動child: NotificationListener(// 監聽滾動的方法onNotification: (scrollNotification){// scrollNotification.depth == 0 指的是深度為 0 的元素// 即 ListView 元素滾動時 , 才觸發滾動if(scrollNotification is ScrollUpdateNotification &&scrollNotification.depth == 0) {// 從 scrollNotification 中獲取滾動參數print("滾動距離 ${scrollNotification.metrics.pixels}");// 滾動距離在 0 ~ 100 之間時// 透明度組件透明度從 0 ~ 1 變化// 如果滾動距離 >= 100 , 則透明度組件為 1double alpha = scrollNotification.metrics.pixels / 100.0;// 處理小于 0 和 大于 1 極端情況// 如果只處于 0 ~ 1 之間 , 不做處理if (alpha < 0) {alpha = 0;} else if (alpha > 1) {alpha = 1;}// 更新 UI 數據setState(() {appBarAlpha = alpha;});}},child: ListView(children: <Widget>[Container(/// 設置 Banner 輪播圖 160 像素height: 160,/// 這是 flutter_swiper 插件的輪播圖child: Swiper(/// 輪播圖數量itemCount: _imageUrls.length,/// 設置輪播圖自動播放autoplay: true,/// 輪播條目組件itemBuilder: (BuildContext context, int index) {return Image.network(/// 圖片 URL 鏈接_imageUrls[index],/// 縮放方式fit: BoxFit.fill,);},/// 輪播圖指示器pagination: SwiperPagination(),),),Container(height: 800,child: ListTile(title: Text("標題透明漸變"),),),],),),),/// 透明度可變組件Opacity(opacity: appBarAlpha,child: Container(height: 80,decoration: BoxDecoration(color: Colors.white),child: Center(child: Padding(padding: EdgeInsets.only(top: 20),child: Text("標題透明漸變"),),),),),],),);} }

執行結果 :

六、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰電子書 : https://book.flutterchina.club/chapter1/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_app ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/21515304 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。