記錄：導航默認透明，頁面發生滾動后，導航背景色由0-1，過渡到白色背景。

view

import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:redone/common/index.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'index.dart';class SendRedPacketReceivePage extends GetView<SendRedPacketReceiveController> {const SendRedPacketReceivePage({super.key});// 頭部Widget _buildHeader() {return <Widget>[TDImage(assetUrl: 'assets/chat/images/6.png', width: 750.w, height: 216.w,type: TDImageType.square,),<Widget>[SizedBox(height: 150.w,),TDImage(assetUrl: 'assets/chat/images/user.png', width: 130.w, height: 130.w,type: TDImageType.circle,),SizedBox(height: 20.w,),TextWidget.body('黃玲玲發出的紅包', size: 32.sp, color: AppTheme.color333,weight: FontWeight.w600,),SizedBox(height: 10.w,),TextWidget.body('恭喜發財，大吉大利', size: 26.sp, color: AppTheme.color999,),SizedBox(height: 10.w,),<Widget>[TextWidget.body('8.88', size: 80.sp, color: AppTheme.primary,weight: FontWeight.w600,),SizedBox(width: 10.w,),TextWidget.body('元', size: 26.sp, color: AppTheme.primary,weight: FontWeight.w600,),].toRow(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.baseline,textBaseline: TextBaseline.alphabetic),].toColumn()].toStack();}// 紅包總數Widget _buildRedPacketCount() {return <Widget>[TextWidget.body('共10個紅包，5秒鐘搶完', size: 26.sp, color: AppTheme.color999,),].toRow().paddingHorizontal(30.w).height(68.w).backgroundColor(const Color(0xfff3f4f5)).clipRRect(all: 10.w);}// 紅包列表Widget _buildRedPacketList() {return SliverList(delegate: SliverChildBuilderDelegate((BuildContext context, int index) {return <Widget>[TDImage(assetUrl: 'assets/chat/images/user.png',width: 84.w,height: 84.w, type: TDImageType.circle,),SizedBox(width: 20.w),<Widget>[TextWidget.body('黃玲玲', size: 30.sp,color: AppTheme.color333,),SizedBox(height: 10.w),TextWidget.body('2024-01-01 12:00',size: 24.sp,color: AppTheme.color999,),].toColumn(crossAxisAlignment: CrossAxisAlignment.start,).expanded(),TextWidget.body('0.88元',size: 30.sp,color: AppTheme.color333,),].toRow(crossAxisAlignment: CrossAxisAlignment.start).paddingVertical(20.w).decorated(border: const Border(bottom: BorderSide(width: 1, color: AppTheme.dividerColor),));},childCount: 15,),);}// 主視圖Widget _buildView() {return CustomScrollView(controller: controller.scrollController,slivers: [_buildHeader().sliverToBoxAdapter(),SizedBox(height: 60.w,).sliverToBoxAdapter(),_buildRedPacketCount().sliverToBoxAdapter().sliverPaddingHorizontal(30.w),SizedBox(height: 20.w,).sliverToBoxAdapter(),_buildRedPacketList().sliverPaddingHorizontal(30.w),],);}@overrideWidget build(BuildContext context) {return GetBuilder<SendRedPacketReceiveController>(init: SendRedPacketReceiveController(),id: "send_red_packet_receive",builder: (_) {return Scaffold(backgroundColor: AppTheme.pageBgColor,body: <Widget>[_buildView(),AnimatedContainer(duration: const Duration(milliseconds: 100),color: Colors.white.withOpacity(controller.opacity),child: TDNavBar(height: 44,title: '領取紅包',titleColor: AppTheme.color333.withOpacity(controller.opacity),titleFontWeight: FontWeight.w600,backgroundColor: Colors.transparent,screenAdaptation: true,useDefaultBack: true,),).positioned(left: 0, right: 0, top: 0),].toStack());},);}
}

controller

import 'package:get/get.dart';
import 'package:flutter/material.dart';class SendRedPacketReceiveController extends GetxController {SendRedPacketReceiveController();// 滾動控制器final ScrollController scrollController = ScrollController();// 漸變系數 0-1double opacity = 0.0;// 滾動開始變化的位置final double scrollStartPoint = 20.0;// 滾動結束變化的位置final double scrollEndPoint = 120.0;_initData() {update(["send_red_packet_receive"]);}@overridevoid onInit() {super.onInit();// 監聽滾動scrollController.addListener(() {// 計算 0-1 之間的漸變系數double newOpacity;if (scrollController.offset <= scrollStartPoint) {// 開始點之前完全透明newOpacity = 0.0;} else if (scrollController.offset >= scrollEndPoint) {// 結束點之后完全不透明newOpacity = 1.0;} else {// 在開始點和結束點之間線性計算newOpacity = (scrollController.offset - scrollStartPoint) /  (scrollEndPoint - scrollStartPoint);// 確保值在0-1范圍內并保留更多小數位精度newOpacity = double.parse(newOpacity.toStringAsFixed(3)).clamp(0.0, 1.0);}// 只有當透明度變化時才更新UIif ((opacity - newOpacity).abs() > 0.001) {opacity = newOpacity;update(["send_red_packet_receive"]);}});_initData();}@overridevoid onReady() {super.onReady();_initData();}@overridevoid onClose() {scrollController.dispose();super.onClose();}
}