import 'dart:ui';
import 'package:flutter/material.dart';
class ComplexUIPage extends StatefulWidget {
const ComplexUIPage({super.key});
@override
_ComplexUIPageState createState() => _ComplexUIPageState();
}
class _ComplexUIPageState extends State<ComplexUIPage> {
final ScrollController _scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
// 背景模糊与半透明覆盖层
Positioned.fill(
child: Image.asset(
'assets/images/3.jpeg', // 替换为实际背景图片路径
fit: BoxFit.cover,
),
),
Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
child: Container(
color: Colors.black.withAlpha(50),
),
),
),
// 可上下滑动的内容区域
ListView(
controller: _scrollController,
cacheExtent: 200, // 设置了cacheExtent属性优化滚动性能
children: [
// 顶部带有透明度变化和重叠效果的标题区域
Container(
margin: const EdgeInsets.all(20),
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(80),
),
child: const Stack(
children: [
// 底层文本，半透明
Positioned.fill(
child: Opacity(
opacity: 0.5,
// 使用const关键字优化，避免不必要重绘
child: Center(
child: Text(
'测试字体',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
)),
),
Positioned.fill(
child: Opacity(
opacity: 0.5,
// 使用const关键字优化，避免不必要重绘
child: Center(
child: Text(
'测试字体',
style: TextStyle(
fontSize: 50,
fontWeight: FontWeight.bold,
color: Colors.red,
),
)),
),
),
// 上层文本，完全不透明，与底层文本重叠
],
),
),
// 带有模糊和透明度变化的图片区域
// Container(
// height: 300,
// margin: const EdgeInsets.all(20),
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
// color: Colors.white.withAlpha(50),
// ),
// child: Stack(
// children: [
// // 原始图片
// // 使用缓存图片加载方式（假设为网络图片，本地图片可参考相应缓存库用法调整）
// Positioned.fill(
// child: Image.asset(
// 'assets/images/1.jpeg', // 替换为实际图片路径
// ),
// ),
// // 模糊层，覆盖在图片上，有透明度变化
// Positioned.fill(
// child: Opacity(
// opacity: 0.1,
// child: BackdropFilter(
// filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
// child: Container(
// color: Colors.black.withAlpha(30),
// ),
// ),
// ),
// ),
// ],
// ),
// ),
Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
),
Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
),
Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
),
Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
),
Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
),
Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
),
Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
),
Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
), Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
), Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
), Container(
margin: const EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white.withAlpha(50),
),
child: const Center(
child: Opacity(
opacity: 0.8,
// 使用const关键字优化，避免不必要重绘
child: Text(
'Scroll to explore more',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
),
],
),
],
),
);
}
}
Steps to reproduce
Slide the page up and down and this problem occurs frequently.
Device:Xiaomi 14 (HyperOS2.0)(Android V) Snapdragon 8 Gen3
Xiaomi 15 Pro (reproduce)
Expected results
The page can be rendered normally.
Actual results
There were many unexpected anomalies.
What puzzles me is that I started the application with the option --enable-vulkan-validation, but I didn't see any vulkan-related errors.
Code sample
Code sample
Screenshots or Video
Screenshots / Video demonstration
rendererror.mp4
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output