如何移除Flutter中CustomScrollView内SliverList的多余线条

您好： #

环境配置： #

我正在尝试在CustomScrollView中渲染SliverList，列表项颜色与背景色不同。

问题描述： #

SliverList的列表项之间出现奇怪的1px线条，向下滚动时这些线条会时隐时现。请问如何移除这些线条？

非常感谢您的帮助！

示例代码： #

import 'package:flutter/material.dart';

class SliverListTest extends StatefulWidget {
  const SliverListTest({super.key});

  @override
  State<SliverListTest> createState() => _SliverListTestState();
}

class _SliverListTestState extends State<SliverListTest> {
  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);

    return Scaffold(
      backgroundColor: Colors.purple,
      appBar: AppBar(
        title: Text(
          'Sliver List Test',
          style: theme.textTheme.titleLarge?.apply(color: Colors.white),
        ),
        backgroundColor: Colors.purple,
        foregroundColor: Colors.white,
        surfaceTintColor: Colors.transparent,
        iconTheme: const IconThemeData(
          color: Colors.purple, // 修改颜色
        ),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            PageNavigationManager().pop();
          },
        ),
      ),
      body: Container(
        decoration: const BoxDecoration(
          color: Colors.purple,
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 5.0),
          child: CustomScrollView(
            slivers: [
              SliverList.separated(
                itemCount: 20,
                itemBuilder: (BuildContext context, int index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 5.0),
                    child: Container(
                      height: 100,
                      color: Colors.white,
                    ),
                  );
                },
                separatorBuilder: (BuildContext context, int index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 5.0),
                    child: Container(
                      height: 5,
                      color: Colors.white,
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

运行环境： #

Flutter (Channel beta, 3.17.0-1.0.pre.3, on Microsoft Windows [Version 10.0.19045.3693], locale en-CA)
    • Flutter版本3.17.0-1.0.pre.3，渠道beta，路径C:\Dev\flutter
    • 上游仓库https://github.com/flutter/flutter.git
    • Framework修订版本12b47270b7（7天前），2023-11-27 17:21:11 -0600
    • Engine修订版本dff66925dc
    • Dart版本3.3.0（编译版本3.3.0-91.0.dev）
    • DevTools版本2.29.0

这种线条是Flutter渲染时的像素对齐/抗锯齿问题，通常由列表项布局计算出现小数像素导致，以下是几种可行解决方法：

1. 给列表项添加同色边框覆盖间隙 #

在白色容器的上下添加1px同色边框，直接覆盖可能出现的间隙：

Container(
  height: 100,
  color: Colors.white,
  decoration: BoxDecoration(
    border: Border.symmetric(
      horizontal: BorderSide(color: Colors.white, width: 1),
    ),
  ),
)

2. 合并列表项与分隔符为单个容器 #

因为你的列表项和分隔符都是白色，直接将两者合并成一个容器，避免多容器拼接产生的间隙：

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 5.0),
        child: Column(
          children: [
            Container(height: 100, color: Colors.white),
            // 最后一项不加分隔符
            if (index != 19) Container(height: 5, color: Colors.white),
          ],
        ),
      );
    },
    childCount: 20,
  ),
)

3. 基于像素密度对齐容器高度 #

通过设备像素密度将容器高度转换为整数像素，避免小数像素导致的渲染问题：

final pixelRatio = MediaQuery.of(context).devicePixelRatio;
Container(
  height: (100 * pixelRatio).round() / pixelRatio,
  color: Colors.white,
)

优先推荐方法1或2，操作简单且效果稳定。

内容的提问来源于stack exchange，提问作者Nick