在 CustomScrollView 中删除 Flutter 的 SliverList 中不需要的行

Question

你好，

设置：

我正在尝试在

SliverList

中渲染

CustomScrollView

。列表项的颜色与背景颜色不同。

问题：

我在

1px

项目之间发现了奇怪的

SliverList

线条，当我向下滚动时，这些线条跳进跳出。我已经包含了示例代码和示例图像。我怎样才能删除这些线条？

非常感谢任何帮助，谢谢！

代码：

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, // change your color here
        ),
        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 version 3.17.0-1.0.pre.3 on channel beta at C:\Dev\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 12b47270b7 (7 days ago), 2023-11-27 17:21:11 -0600
    • Engine revision dff66925dc
    • Dart version 3.3.0 (build 3.3.0-91.0.dev)
    • DevTools version 2.29.0

Answer 1

这是因为

SliverList.separated

只需使用

SliverList.builder

并删除

separatorBuilder

属性，就可以开始了。

注意：我不太确定导致这些线条的原因。根据我的观察，它们出现在容器 1 px 到 5 px 的高度处。 （在 Chrome 上测试）