Flutter中CustomScrollView滚动后按钮文本模糊像素化问题求助
问题描述
- 页面使用包含SliverList和SliverGrid的CustomScrollView组件,首次加载时文本显示正常;滚动至底部返回顶部后,“MAKE A SALE”和“ADD PRODUCT”按钮文本出现模糊、像素化现象。
- 仅在iPhone 14 Pro、Samsung Galaxy S21设备上触发问题,iPhone 7无异常。
- 按钮文本清晰度明显低于页面其他文本。
页面Build代码
return Scaffold( backgroundColor: Color(0xFFf8f9f8), body: CustomScrollView( slivers: <Widget>[ SliverList( delegate: SliverChildListDelegate([ Container( width: size.width, color: color_bluepurple, child: Column( children: [ SizedBox(height: 40), Container( width: inputWidth, alignment: Alignment.topLeft, child: Padding( padding: const EdgeInsets.all(8.0), child: Row( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ ProfileAvatar(), IconButton( onPressed: () { widget.GetAccountData(); }, icon: Icon(Icons.refresh) ), ], ), Badge( badgeContent: Text(notificationLen.toString()), child: Icon(Icons.notifications, color: Colors.white), ) ], ), ), ), Padding( padding: const EdgeInsets.all(8.0), child: Container( width: inputWidth, height: 201, decoration: BoxDecoration( image: DecorationImage( image: AssetImage( 'assets/images/dashboard_bg.png', ), fit: BoxFit.cover ), borderRadius: BorderRadius.all( Radius.circular(15)), ), child: Padding( padding: const EdgeInsets.all(20.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("Hello, " + accountData["userprofile"]["company"], style: TextStyle( color: Colors.grey) ), SizedBox(height: 75), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ Text("₦", style: TextStyle( fontSize: 28, fontFamily: 'Verdana', color: Colors.white, )), Text(balance, style: TextStyle( color: Colors.white, fontSize: 35) ), ], ), Text( "Your Wallet Balance", style: TextStyle( color: Colors.grey) ), ], ), ), Container( width: inputWidth * 0.20, child: IconButton( onPressed: () { HideBalance(); }, icon: Icon( Icons.remove_red_eye, color: balanceIconColor),), ) ], ), ],), ) ), ), Padding( padding: const EdgeInsets.all(8.0), child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( width: inputWidth / 2 - 15, child: ElevatedButton.icon( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => AddSale(products, productsStrings, widget.GetAccountData) ) ); }, icon: Icon(Icons.edit, color: Colors.black), label: Text("MAKE A SALE", style: TextStyle( fontSize: 12, color: Colors.black, )), style: ElevatedButton.styleFrom( primary: Colors.white, shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(10)) ), ), ), SizedBox(width: 25), Container( width: inputWidth / 2 - 15, child: ElevatedButton.icon( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => AddProduct(suppliers, suppliersStrings, widget.GetAccountData) ) ); }, icon: Icon( Icons.add, color: Colors.black), label: Text("ADD PRODUCT", style: TextStyle( fontSize: 12, color: Colors.black )), style: ElevatedButton.styleFrom( primary: Colors.white, shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(10)) ), ), ), ], ), ), SizedBox(height: 25), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ GestureDetector( onTap: () { setState(() { overviewSelected = true; transactionsSelected = false; expensesSelected = false; }); }, child: Text("OVERVIEW", style: TextStyle( fontSize: 14, color: Colors.white )), ), GestureDetector( onTap: () { setState(() { overviewSelected = false; transactionsSelected = true; expensesSelected = false; }); }, child: Text("TRANSACTIONS", style: TextStyle( fontSize: 14, color: Colors.white )), ), GestureDetector( onTap: () { setState(() { overviewSelected = false; transactionsSelected = false; expensesSelected = true; }); }, child: Text("EXPENSES", style: TextStyle( fontSize: 14, color: Colors.white )), ), ], ), TabUnderline(), ], ), ), ]), ), Content(inputWidth, todaysProfits, salesToday, productCount, totalSalesCounter, totalSales, productsWithSales), TopSellingProductsHeader(), TopSellingProducts(), SliverList( delegate: SliverChildListDelegate([ SizedBox(height: 50), ])) ]));
注:代码中Content()、TopSellingProductsHeader()返回SliverList,TopSellingProducts()返回SliverGrid
解决方案
尝试以下方案修复文本模糊问题:
隔离渲染层:用
RepaintBoundary包裹按钮组件,避免滚动时的重绘异常影响文本渲染:RepaintBoundary( child: ElevatedButton.icon( // 原有按钮代码 ), )修正像素对齐:按钮宽度
inputWidth / 2 - 15可能产生非整数值,导致文本模糊,改为整数宽度:width: (inputWidth / 2 - 15).roundToDouble(),固定文本缩放:给按钮的Text组件添加
textScaleFactor: 1.0,避免系统自动缩放导致的清晰度下降:Text("MAKE A SALE", style: TextStyle(fontSize: 12, color: Colors.black), textScaleFactor: 1.0, )优化Sliver结构:将顶部复杂的Column嵌套从SliverList中拆分,改用
SliverPersistentHeader或SliverAppBar实现顶部区域,减少滚动时的重绘范围。升级Flutter版本:该问题可能是框架在高分辨率设备上的已知渲染bug,升级到最新稳定版可修复部分底层问题。
内容的提问来源于stack exchange,提问作者Kyle Andrew
相关产品推荐
相关产品推荐

