flutter实现滚动导航栏发生透明变化-北京尧图网络

采用的是flutter的getx作为的状态管理product_content_view.dartimport package:flutter/material.dart; import package:flutter_app/app/components/AppBarTop.dart; import package:flutter_app/app/services/screenAdapter.dart; import package:get/get.dart; import ../controllers/product_content_controller.dart; class ProductContentView extends GetViewProductContentController { const ProductContentView({super.key}); override Widget build(BuildContext context) { return Obx(() { // ✅ Obx 包裹后opacity.value 变化会触发整个 Scaffold 重绘 final appBarBgOpacity controller.opacity.value; return Scaffold( extendBodyBehindAppBar: true, // 实现透明导航栏 appBar: AppBarTop( showBackButton: true, titleWidget: SizedBox( width: ScreenAdapter.width(400), height: ScreenAdapter.height(96), child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Padding( padding: const EdgeInsets.all(0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 商品, style: TextStyle( fontSize: ScreenAdapter.fontSize(36), color: Colors.black, ), ), Container( margin: EdgeInsets.only(top: ScreenAdapter.height(10)), width: ScreenAdapter.width(100), height: ScreenAdapter.height(2), color: Colors.red, ) ], ), ), Padding( padding: const EdgeInsets.all(0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 详情, style: TextStyle( fontSize: ScreenAdapter.fontSize(36), color: Colors.black, ), ), Container( margin: EdgeInsets.only(top: ScreenAdapter.height(10)), width: ScreenAdapter.width(100), height: ScreenAdapter.height(2), color: Colors.red, ) ], ), ), Padding( padding: const EdgeInsets.all(0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 推荐, style: TextStyle( fontSize: ScreenAdapter.fontSize(36), color: Colors.black, ), ), Container( margin: EdgeInsets.only(top: ScreenAdapter.height(10)), width: ScreenAdapter.width(100), height: ScreenAdapter.height(2), color: Colors.red, ) ], ), ), ], ), ), backgroundColor: Colors.white.withOpacity(appBarBgOpacity), actions: [ Container( margin: EdgeInsets.only(right: ScreenAdapter.width(20)), width: ScreenAdapter.width(88), height: ScreenAdapter.width(88), child: ElevatedButton( onPressed: () {}, style: ButtonStyle( //注意:去掉button默认的padding padding: MaterialStateProperty.all(const EdgeInsets.all(0)), alignment: Alignment.center, backgroundColor: MaterialStateProperty.all( Colors.black12.withOpacity(0.1 appBarBgOpacity * 0.02), ), foregroundColor: MaterialStateProperty.all(Colors.white), shape: MaterialStateProperty.all( const CircleBorder(), ), ), child: Icon( Icons.file_upload_outlined, color: appBarBgOpacity 0.5 ? Colors.black : Colors.white, )), ), Container( margin: EdgeInsets.only(right: ScreenAdapter.width(20)), width: ScreenAdapter.width(88), height: ScreenAdapter.width(88), child: ElevatedButton( onPressed: () {}, style: ButtonStyle( //注意 padding: MaterialStateProperty.all(const EdgeInsets.all(0)), alignment: Alignment.center, backgroundColor: MaterialStateProperty.all( Colors.black12 .withOpacity(0.1 appBarBgOpacity * 0.02), ), foregroundColor: MaterialStateProperty.all(Colors.white), shape: MaterialStateProperty.all(const CircleBorder())), child: Icon( Icons.more_horiz_rounded, color: appBarBgOpacity 0.5 ? Colors.black : Colors.white, )), ), ], ), body: ListView( // ✅ 必须把 controller 的 scrollController 绑定到 ListView否则 listener 永远不触发 controller: controller.scrollController, children: [ Container( width: ScreenAdapter.width(1080), height: ScreenAdapter.height(780), color: Colors.orange, ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ListTile( title: Text(我是一个内容列表), ), ], ), ); }); } }product_content_controllerimport package:flutter/material.dart; import package:get/get.dart; class ProductContentController extends GetxController { final ScrollController scrollController ScrollController(); /// 导航栏透明度0~1 final RxDouble opacity 0.0.obs; /// 触发完全不透明的滚动距离阈值 final double opacityThreshold 200; override void onInit() { super.onInit(); scrollController.addListener(_onScroll); } void _onScroll() { // 还没 attach 到 viewport 时 position 可能不存在防止报错 if (!scrollController.hasClients) return; final pixels scrollController.position.pixels; if (pixels 0) { opacity.value 0; } else if (pixels opacityThreshold) { opacity.value 1; } else { // 0 ~ threshold 之间做线性插值范围始终在 0~1 opacity.value (pixels / opacityThreshold).clamp(0.0, 1.0); } } override void onReady() { super.onReady(); } override void onClose() { scrollController.removeListener(_onScroll); scrollController.dispose(); super.onClose(); } }

flutter实现滚动导航栏发生透明变化

相关推荐

MediaInfo 快速上手：看懂视频音频文件的完整参数指南

GetQzonehistory完整指南：3步保存你的QQ空间历史说说

一键导出QQ空间十年老说说：GetQzonehistory使用全流程

更多资讯

培训电工证江阴报考条件与考试时间

呈贡学电工证去哪里考前押题怎么选培训机构

电工证湖南实操考试心里没底怕挂科？官方回应帮你拿捏关键点

龙江县电工证培训机构值不值得考？别被中介坑了

晋城电工证去哪里报名千万别踩坑，应届生求职必备

电工证学时可以累计吗？多久拿证才够用？

今日更新

桐乡去哪考电工证怎么考？全国通用电工证报考全流程详解

低压电工证是必须的嘛电子证书怎么申请更稳妥

特种作业证模板工怎么报名才不会被中介坑

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？