Question

考虑以下示例：

{'a': ['b', 'c'], 'b': ['d'], 'd': ['e']}

当它在ListView中的黑色背景上呈现并向上滚动和向下滚动时，我看到在卡之间随机出现一些黑线。

我想这是由于舍入错误引起的。有没有办法使Cards稍微重叠一点，以免出现毛刺？

更新：

this.data$ = this.myService.getPeople().pipe(map(data => { const items = Object.values(data).filter( (item: any) => item && item.type === '2' ); return items; });无济于事。

Answer 1

会有某种方式使它们重叠（例如，使用Stack小部件），但是由于存在更简便的方法，因此不应考虑这种方式。 Card小部件的实现非常简单和小巧，没有什么特别之处，因此您可以轻松创建自己的小部件来创建所需的行为！我为您提供一个示例，该示例将产生您可能需要的输出：

ListView(
  children: [
    Card(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          ListTile(
            title: Text('Hello'),                 
          ),
          ListTile(
            title: Text('Hello'),
          )
        ],
      ),
    )
  ],
),

我使用Card小部件作为样式容器，并使用了Column小部件，该小部件不滚动并且可以具有多个小部件，这些小部件将通过MainAxisAlignment.start属性垂直呈现，以使内容向左对齐。

编辑

在SliverList中带有CustomScrollView的变体形式：

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Title'),
    ),
    SliverToBoxAdapter(
      child: Card(
        child: CustomScrollView(
          shrinkWrap: true,
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate((context, index) {
                return ListTile(
                  title: Text('Hello'),
                );
              }, childCount: 5),
            ),
          ],
        ),
      ),
    ),
  ],
),

Answer 2

我通过创建一个假装大于或小于它的小部件来解决了这个问题。

我用struct ContentView : View { var body: some View { PresentationButton(Text("Navigate to another View"), destination: NextView()) } }将Card包装到其中。

这样，相邻的卡片将重叠并且接缝消失。

代码如下：

AdjustSizeWidget(deltaSize: Size(0.0, -1.0), child: Card(...))

卡的ListView无边距仍显示卡之间的背景

2 个答案: