You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.16 03:05:23