Flutter---CustomScrollView的UI项目（2）

发布时间：2026/7/14 9:34:13

Flutter---CustomScrollView的UI项目（2）

效果图：

详细描述：随着用户往上滑，顶部信息栏随着滑动慢慢变小和变透明，最后留下了50的大小，这50的大小就是用来放标题栏的，这回的标题栏没有写在顶部信息区。一共分为四个部分，一个是背景渐变，一个是可滚动的内容（顶部信息栏和列表），一个是标题行，一个是固定在底部的播放栏。

核心代码

==================================================================================== flexibleSpace: LayoutBuilder( builder: (context,constraints){ //计算收缩比例 final shrinkOffset = constraints.maxHeight; //收缩偏移量 //收缩比例：shrinkRatio = (currentHeight - minHeight) / (maxHeight - minHeight),这里minHeight = collapsedHeight: 50, //收起高度 final shrinkRatio = (shrinkOffset - 50) / (270 - 50); ==================================================================================== // 耳机图 Positioned( //50是收缩时的最终位置，109是展开的起始位置，109 - 50 = 59：位置变化的距离，shrinkRatio：收缩比例（0.0到1.0） top: 50 + (109 - 50) * shrinkRatio.clamp(0.0, 1.0),//耳机图随着用户往上滑，而往上滑 left: 0, right: 0, child:Opacity( opacity: shrinkRatio.clamp(0.0, 1.0), //设置耳机图片的透明度 child: Container( //80是耳机图在完全收缩时的高度，141是耳机完全展开时的高度，(141 - 80)高度的变化范围 height: 80 + (141 - 80) * shrinkRatio.clamp(0.0, 1.0), child: Image.asset( "assets/images/earphone.png", fit: BoxFit.contain, ), ), ) ,

实现步骤：

1.背景渐变

Container( width: double.infinity, height: double.infinity, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Colors.white, Colors.purple.withOpacity(0.7), ], ), ), ),

2.可滚动内容

Positioned.fill( child: CustomScrollView( slivers: [ // 顶部可搜索区域 SliverAppBar( expandedHeight: 270, //展开高度 collapsedHeight: 50, //收起高度 pinned: true, //固定在顶部，不让滑动 snap: false, floating: false, automaticallyImplyLeading: false, backgroundColor: Colors.transparent, elevation: 0, toolbarHeight: 0, // 设置工具栏高度为0 flexibleSpace: LayoutBuilder( builder: (context,constraints){ //计算收缩比例 final shrinkOffset = constraints.maxHeight; //收缩偏移量 //收缩比例：shrinkRatio = (currentHeight - minHeight) / (maxHeight - minHeight),这里minHeight = collapsedHeight: 50, //收起高度 final shrinkRatio = (shrinkOffset - 50) / (270 - 50); return Container( child: Stack( children: [ //背景容器 Positioned.fill( child: Image.asset( "assets/images/start.png", fit: BoxFit.cover, ), ), //渐变遮罩 Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.bottomCenter, end: Alignment.topCenter, colors: [ Colors.black.withOpacity(0.3), Colors.transparent, ], ) ), ), // 耳机图 Positioned( //50是收缩时的最终位置，109是展开的起始位置，109 - 50 = 59：位置变化的距离，shrinkRatio：收缩比例（0.0到1.0） top: 50 + (109 - 50) * shrinkRatio.clamp(0.0, 1.0),//耳机图随着用户往上滑，而往上滑 left: 0, right: 0, child:Opacity( opacity: shrinkRatio.clamp(0.0, 1.0), //设置耳机图片的透明度 child: Container( //80是耳机图在完全收缩时的高度，141是耳机完全展开时的高度，(141 - 80)高度的变化范围 height: 80 + (141 - 80) * shrinkRatio.clamp(0.0, 1.0), child: Image.asset( "assets/images/earphone.png", fit: BoxFit.contain, ), ), ) ), ], ), ); }) ), // 内容列表 SliverToBoxAdapter( child: Column( children: [ const SizedBox(height: 8), buildItem( title: "列表1", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表2", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表3", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表4", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表5", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表6", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表7", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表8", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表9", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表9", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表10", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表11", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表12", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), // 添加底部间距，为固定播放栏留出空间 const SizedBox(height: 80), // 播放栏高度 + 边距 ], ), ), ], ), ),

3.标题栏

Positioned( top:0, left: 0, right: 0, child: Container( height: 100, color: Colors.transparent, child: Column( children: [ // 状态栏间距 SizedBox(height: MediaQuery.of(context).padding.top), Expanded( child: Padding( padding: EdgeInsets.symmetric(horizontal: 20), child:Row( children: [ //SizedBox(width: 20), GestureDetector( onTap: () => Navigator.pop(context), child: Image.asset("assets/images/back_white.png",width: 20,height: 20,), ), Spacer(), Text( "标题栏", style: TextStyle(color: Colors.white, fontSize: 24), ), Spacer(), //SizedBox(width: 20), ], ), ), ), ], ), ) ),

4.底部播放栏

Positioned( left: 10, right: 15, bottom: 15, // 距离底部的距离 child: Container( height: 60, padding: const EdgeInsets.symmetric(horizontal: 20), decoration: BoxDecoration( color: const Color(0xFF2C2C2E), borderRadius: BorderRadius.circular(10), ), child: Row( children: [ Image.asset("assets/images/cherry.png",), const SizedBox(width: 10), const Text( "Rain", style: TextStyle(color: Colors.white), ), const Spacer(), Image.asset("assets/images/mango.png",), const SizedBox(width: 10), Image.asset("assets/images/banana.png"), ], ), ), ),

关键点

1.为什么标题栏和底部播放栏能够叠放在最上层？

因为Stack是按顺序绘制的，比如

Stack( children: [ WidgetA, // 最先绘制 → 最底层 WidgetB, // 其次绘制 → 在WidgetA上面 WidgetC, // 最后绘制 → 最上层 ], )

可视化的层级关系

┌─────────────────────────────────┐ │ 4. 标题栏 (最上层) │ ← 最后绘制，覆盖所有内容 │ ← 固定显示，不会被滚动内容遮挡 │ ├─────────────────────────────────┤ │ 3. 底部播放栏 (最上层) │ ← 最后绘制，覆盖所有内容 │ ← 固定显示，不会被滚动内容遮挡 │ ├─────────────────────────────────┤ │ 2. 可滚动内容 (中间层) │ ← 在背景之上，但在固定组件之下 │ ← 可以滚动，但不会覆盖固定组件 │ ├─────────────────────────────────┤ │ 1. 背景渐变 (最底层) │ ← 最先绘制，作为背景 │ ← 被所有其他层覆盖 │ └─────────────────────────────────┘

2.标题栏的缩放是怎么实现的？

原理：

①通过 constraints.maxHeight 获取当前高度，constraints.maxHeight会随着用户的上滑而减小，使用 shrinkRatio 控制内部组件的缩放
②SliverAppBar 自动处理高度变化，展开时：height = 270，收缩时：height = 50，中间状态：height 在 50-270 之间平滑变化
③start背景图片能够自动缩放（因为使用 Positioned.fill，BoxFit.cover,自动填充可用空间）
④耳机图的top控制位置变化，opacity控制透明度变化，height控制耳机图的高度变化

过程：

完全展开状态：shrinkRatio = 1.0

SliverAppBar 高度: 270px ┌─────────────────┐ │ 背景图充满270px高度 │ │ 耳机图在109px位置 │ │ 耳机图高度141px │ │ 完全不透明 │ └─────────────────┘

半收缩状态：shrinkRatio = 0.5

SliverAppBar 高度: 160px (50 + 110) ┌─────────────────┐ │ 背景图自动缩放 │ ← BoxFit.cover 自动处理 │ 耳机图在79.5px位置│ ← 50 + (109-50)*0.5 │ 耳机图高度110.5px │ ← 80 + (141-80)*0.5 │ 半透明 │ └─────────────────┘

完全收缩状态：shrinkRatio = 0.0

SliverAppBar 高度: 50px ┌─────────────────┐ │ 背景图缩放至50px │ │ 耳机图在50px位置 │ │ 耳机图高度80px │ │ 完全透明 │ └─────────────────┘

完整的缩放时间线

用户向上滚动时： 1. SliverAppBar 高度从 270px 开始减小 2. LayoutBuilder 的 constraints.maxHeight 实时更新 3. shrinkRatio 从 1.0 逐渐减小到 0.0 4. 所有组件根据 shrinkRatio 平滑过渡 5. 达到 collapsedHeight: 50px 时停止缩放

代码实例

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class SleepPage extends StatefulWidget { const SleepPage({super.key}); @override State<StatefulWidget> createState() => _SleepPage(); } class _SleepPage extends State<SleepPage> { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.transparent, body: Stack( children: [ //1.背景渐变 Container( width: double.infinity, height: double.infinity, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Colors.white, Colors.purple.withOpacity(0.7), ], ), ), ), // 2. 可滚动内容 Positioned.fill( child: CustomScrollView( slivers: [ // 顶部可搜索区域 SliverAppBar( expandedHeight: 270, //展开高度 collapsedHeight: 50, //收起高度 pinned: true, //固定在顶部，不让滑动 snap: false, floating: false, automaticallyImplyLeading: false, backgroundColor: Colors.transparent, elevation: 0, toolbarHeight: 0, // 设置工具栏高度为0 flexibleSpace: LayoutBuilder( builder: (context,constraints){ //计算收缩比例 final shrinkOffset = constraints.maxHeight; //收缩偏移量 //收缩比例：shrinkRatio = (currentHeight - minHeight) / (maxHeight - minHeight),这里minHeight = collapsedHeight: 50, //收起高度 final shrinkRatio = (shrinkOffset - 50) / (270 - 50); return Container( child: Stack( children: [ //背景容器 Positioned.fill( child: Image.asset( "assets/images/start.png", fit: BoxFit.cover, ), ), //渐变遮罩 Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.bottomCenter, end: Alignment.topCenter, colors: [ Colors.black.withOpacity(0.3), Colors.transparent, ], ) ), ), // 耳机图 Positioned( //50是收缩时的最终位置，109是展开的起始位置，109 - 50 = 59：位置变化的距离，shrinkRatio：收缩比例（0.0到1.0） top: 50 + (109 - 50) * shrinkRatio.clamp(0.0, 1.0),//耳机图随着用户往上滑，而往上滑 left: 0, right: 0, child:Opacity( opacity: shrinkRatio.clamp(0.0, 1.0), //设置耳机图片的透明度 child: Container( //80是耳机图在完全收缩时的高度，141是耳机完全展开时的高度，(141 - 80)高度的变化范围 height: 80 + (141 - 80) * shrinkRatio.clamp(0.0, 1.0), child: Image.asset( "assets/images/earphone.png", fit: BoxFit.contain, ), ), ) ), ], ), ); }) ), // 内容列表 SliverToBoxAdapter( child: Column( children: [ const SizedBox(height: 8), buildItem( title: "列表1", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表2", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表3", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表4", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表5", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表6", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表7", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表8", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表9", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表9", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表10", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表11", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), buildItem( title: "列表12", icon: "assets/images/apple.png", rightIcon: "assets/images/apple.png", ), const SizedBox(height: 8), // 添加底部间距，为固定播放栏留出空间 const SizedBox(height: 80), // 播放栏高度 + 边距 ], ), ), ], ), ), // 3.标题行 Positioned( top:0, left: 0, right: 0, child: Container( height: 100, color: Colors.transparent, child: Column( children: [ // 状态栏间距 SizedBox(height: MediaQuery.of(context).padding.top), Expanded( child: Padding( padding: EdgeInsets.symmetric(horizontal: 20), child:Row( children: [ //SizedBox(width: 20), GestureDetector( onTap: () => Navigator.pop(context), child: Image.asset("assets/images/back_white.png",width: 20,height: 20,), ), Spacer(), Text( "标题栏", style: TextStyle(color: Colors.white, fontSize: 24), ), Spacer(), //SizedBox(width: 20), ], ), ), ), ], ), ) ), // 4. 固定在底部的播放栏 Positioned( left: 10, right: 15, bottom: 15, // 距离底部的距离 child: Container( height: 60, padding: const EdgeInsets.symmetric(horizontal: 20), decoration: BoxDecoration( color: const Color(0xFF2C2C2E), borderRadius: BorderRadius.circular(10), ), child: Row( children: [ Image.asset("assets/images/cherry.png",), const SizedBox(width: 10), const Text( "Rain", style: TextStyle(color: Colors.white), ), const Spacer(), Image.asset("assets/images/mango.png",), const SizedBox(width: 10), Image.asset("assets/images/banana.png"), ], ), ), ), ], ), ); } //功能小卡片 Widget buildItem({ required String title, required String icon, required String rightIcon, VoidCallback? callback }) { return Container( padding: EdgeInsets.symmetric(horizontal: 20), margin: EdgeInsets.only(left: 15,right: 20), height: 52, width: double.infinity, decoration:BoxDecoration( color: Colors.white.withOpacity(0.1), borderRadius: BorderRadius.circular(10), ), child: Material( color: Colors.transparent, child: Ink( child: InkWell( onTap: callback, child: Row( children: [ Image.asset(icon), SizedBox(width: 15,), Text(title,style: const TextStyle(color: Colors.white,fontSize: 18),), const Expanded(child: SizedBox()), Image.asset(rightIcon), ], ) ), ), ) ); } }

相关新闻

AI代理进程隔离架构：突破上下文窗口限制的工程实践

AI代理进程隔离架构：突破上下文窗口限制的工程实践

1. 项目背景与核心挑战 当前AI代理系统面临的最大瓶颈之一就是上下文窗口限制。主流大模型如GPT-4的上下文长度通常在32K-128K tokens之间&#xff0c;但在实际业务场景中&#xff0c;复杂任务往往需要维护长达数小时的交互历史、工具调用记录和环境状态。这就像试图用一次性纸…

2026/7/14 9:34:13
2026年高精达代理日本Nakanishi E3000系列电动高速主轴 正规采购渠道盘点 - 资讯报道

2026年高精达代理日本Nakanishi E3000系列电动高速主轴 正规采购渠道盘点 - 资讯报道

国内E3000系列主轴市场行情与痛点分析 当前国内精密制造产业正处于升级迭代关键阶段，日本Nakanishi E3000系列电动高速主轴凭借微米级加工精度、高稳定性和轻量化特性，成为医疗、3C、精密模具、航空航天等领域高端产…

2026/7/14 9:34:13
2026泰兴暴雨多发！楼顶阳光房阳台窗边漏水如何彻底解决？ - 宅安选房屋修缮

2026泰兴暴雨多发！楼顶阳光房阳台窗边漏水如何彻底解决？ - 宅安选房屋修缮

步入 2026 年夏季，泰兴正式进入暴雨、强对流天气高发时段，受苏中平原地形及亚热带季风气候影响，本地夏季多雨、高温高湿，梅雨季雨水绵长，夏季受台风外围影响明显，境内河网密布、水网纵横，空气湿度大，平原地形易…

2026/7/14 9:34:13

最新新闻

Windows系统RabbitMQ安装避坑指南：从环境变量到服务启动的完整排错

Windows系统RabbitMQ安装避坑指南：从环境变量到服务启动的完整排错

1. 环境准备&#xff1a;Erlang与RabbitMQ版本匹配 RabbitMQ是用Erlang语言编写的消息中间件&#xff0c;所以安装前必须确保Erlang环境正确配置。我见过太多开发者在这里踩坑——最常见的就是版本不兼容问题。比如RabbitMQ 3.9.x要求Erlang版本至少是23.2以上&#xff0c;如果…

2026/7/14 13:37:34
界面组件DevExpress Reports v23.2增强用户体验 - 轻松导航Web设计器

界面组件DevExpress Reports v23.2增强用户体验 - 轻松导航Web设计器

DevExpress Reporting是.NET Framework下功能完善的报表平台&#xff0c;它附带了易于使用的Visual Studio报表设计器和丰富的报表控件集&#xff0c;包括数据透视表、图表&#xff0c;因此您可以构建无与伦比、信息清晰的报表。 DevExpress Reports v23.2(我们最近的主要更新…

2026/7/14 13:37:34
STM32通过SPI驱动W5500实现TCP客户端通信实战

STM32通过SPI驱动W5500实现TCP客户端通信实战

1. 硬件连接与SPI初始化 第一次用STM32驱动W5500时&#xff0c;我对着数据手册画了整整三天的接线图。W5500的SPI接口看似简单&#xff0c;但实际布线时有很多坑要避开。先说最关键的硬件连接部分&#xff1a; 电源引脚 &#xff1a;VCC3.3必须接3.3V&#xff0c;误差不超过1…

2026/7/14 13:37:34
界面控件Telerik UI for WPF中文教程 - 用RadSvgImage升级应用程序UI

界面控件Telerik UI for WPF中文教程 - 用RadSvgImage升级应用程序UI

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序&#xff0c;同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等&#xff0c;创建的应用程序可靠且结构良好&#xff0c;非常容易维护&#xff0c;其直观的API将无缝地集成Visual Studio…

2026/7/14 13:37:34
FPGA时序约束实战指南（三）、从时序报告定位关键路径

FPGA时序约束实战指南（三）、从时序报告定位关键路径

1. 时序报告中的关键路径定位实战当你第一次看到Vivado生成的时序报告时&#xff0c;可能会被密密麻麻的数据吓到。但别担心&#xff0c;关键路径就像交通堵塞的路段&#xff0c;我们只需要找到最拥堵的那个点。我在实际项目中遇到过这样一个案例&#xff1a;设计频率明明只有1…

2026/7/14 13:37:34
Kuroba-Experimental主题系统：Android Q日夜模式与完全动态主题支持终极指南

Kuroba-Experimental主题系统：Android Q日夜模式与完全动态主题支持终极指南

Kuroba-Experimental主题系统&#xff1a;Android Q日夜模式与完全动态主题支持终极指南 【免费下载链接】Kuroba-Experimental Free and open source image board browser 项目地址: https://gitcode.com/gh_mirrors/ku/Kuroba-Experimental Kuroba-Experimental作为一…

2026/7/14 13:36:55

日新闻

2026综合实力出众的国内投票系统服务商汇总:兼顾安全与性价比

2026综合实力出众的国内投票系统服务商汇总:兼顾安全与性价比

网络投票早已不是“能发起就行”的时代了。刷票毁公平、收费毁预算、卡顿毁体验、导不出数据等于白干——这四条铁律&#xff0c;是无数活动组织者用真金白银换来的教训。市面上打着“免费”旗号的投票工具多如牛毛&#xff0c;但真正能做到永久免费、零广告、强防刷、免费导出…

2026/7/14 0:00:55
【小程序毕业设计】基于 SpringBoot 的畲族特色文创产品电商小程序的设计与实现 八闽畲族文化数字化交流与线上交易系统(源码+文档+远程调试，全bao定制等)

【小程序毕业设计】基于 SpringBoot 的畲族特色文创产品电商小程序的设计与实现 八闽畲族文化数字化交流与线上交易系统(源码+文档+远程调试，全bao定制等)

博主介绍&#xff1a;✌️码农一枚 &#xff0c;专注于大学生项目实战开发、讲解和毕业&#x1f6a2;文撰写修改等。全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围&#xff1a;&am…

2026/7/14 0:00:55
微信投票到底该怎么做?2026三大平台对比+人人微投票保姆级图文教程

微信投票到底该怎么做?2026三大平台对比+人人微投票保姆级图文教程

在 2026 年的微信生态中&#xff0c;投票依然是社群互动、品牌营销和校园赛事中最直接有效的“流量引擎”。无论是幼儿园想办一场引爆朋友圈的“萌宝大赛”&#xff0c;还是企业要评选年度“优秀员工”&#xff0c;选对工具&#xff0c;活动就成功了一半。然而&#xff0c;面对…

2026/7/14 0:00:55

周新闻

PlantUML 实战：5分钟将 UML 2.5 序列图转换为可执行代码草图

PlantUML 实战：5分钟将 UML 2.5 序列图转换为可执行代码草图

PlantUML 实战&#xff1a;5分钟将 UML 2.5 序列图转换为可执行代码草图 在软件开发过程中&#xff0c;清晰的系统设计往往比编码本身更为关键。传统拖拽式UML工具虽然直观&#xff0c;却常常成为效率杀手——频繁的鼠标操作打断设计思路&#xff0c;版本控制困难&#xff0c;…

2026/7/14 2:00:43
【RT-DETR涨点改进】29 动态Batch推理：让RT-DETR在低延迟下吃满GPU算力

【RT-DETR涨点改进】29 动态Batch推理：让RT-DETR在低延迟下吃满GPU算力

29 动态Batch推理：让RT-DETR在低延迟下吃满GPU算力 开篇故事 上个月帮一家安防厂商做项目优化，他们用RT-DETR做实时人流统计，部署在NVIDIA A10上。客户反馈说：“GPU利用率才30%，但延迟已经飙到40ms了，加人流量就丢帧。” 我远程一看，好家伙——生产环境里每个请求单独…

2026/7/14 3:20:10
Postman 环境变量实战：3种动态设置方法与CI/CD集成避坑指南

Postman 环境变量实战：3种动态设置方法与CI/CD集成避坑指南

Postman 环境变量高阶实战&#xff1a;动态管理与 CI/CD 深度集成在接口自动化测试领域&#xff0c;环境变量的灵活运用往往成为区分初级与高级测试工程师的关键能力。本文将深入探讨 Postman 环境变量的三种动态设置模式&#xff0c;并分享 Newman 在 CI/CD 流水线中的实战避坑…

2026/7/14 5:00:42

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/13 17:23:43
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/14 5:33:13
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/14 1:15:37