flutter SliverList抖动中的分隔符/分隔符

8ulbf1ek  于 2022-11-30  发布在  Flutter
关注(0)|答案(5)|浏览(264)

我们如何在SliverList. ListView中实现分隔符/分隔符?separated是在列表中创建分隔符的方便方法,但我没有看到任何关于SliverList的文档或示例

0s7z1bwu

0s7z1bwu1#

简单的方法,
使用SliverFillRemaining

return CustomScrollView(
    slivers: <Widget>[
      SliverFillRemaining(
        child: ListView.separated(
            itemCount:value.length,
            //shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            //padding: EdgeInsets.all(0),
            separatorBuilder: (BuildContext context, int index){
              return Divider();
            },
            itemBuilder: (BuildContext context, int index) {
              //widget return
            })
      ),

使用SliverList

SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Column(
                  children: <Widget>[
                    SizedBox(height: 5),
                    //your main widget is here
                    SizedBox(height: 5),
                    Divider(height: 1)
                  ],
                );

              },
              childCount: model.length,
            ),
          )
lmyy7pcs

lmyy7pcs2#

虽然这个问题已经很老了,但我还是会为未来的读者提供答案。你只需用Container Package 你的小部件,然后给容器一个底部边框。下面是一个例子:

Container(
    decoration: BoxDecoration(
        border: Border(
            bottom: BorderSide(color: Colors.grey.shade300, width: 0.5))),
    child: YourWidget(),
  ),
wz1wpwve

wz1wpwve3#

如果你想知道如何显示Divider,但不显示在最后一个项目。试试这个。
把你的小部件 Package 成Column,然后给出构建Divider的条件。Divider小部件将显示,除了最后一个索引。例如:

CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (_, int index) {
          return Column(
            children: <Widget>[
              // Put your widget here
              YourWidget(),

              // This divider will not appears on last index
              if(index != (item.length - 1))
                const Divider(),
            ],
          );
        },
        childCount: item.length,
      ),
    ),
  ],
),
j8yoct9x

j8yoct9x5#

类似于ListView。分隔

import 'dart:math' as math;

  List<String> values = List();
  for (int i = 1; i <= 50; i++) {
    values.add(i.toString());
  }

  return CustomScrollView(
    semanticChildCount: values.length,
    slivers: <Widget>[
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            final int itemIndex = index ~/ 2;
            if (index.isEven) {
              return Padding(
                  child: Text(values[itemIndex]),
                  padding: EdgeInsets.all(16));
            }
            return Divider(height: 0, color: Colors.grey);
          },
          semanticIndexCallback: (Widget widget, int localIndex) {
            if (localIndex.isEven) {
              return localIndex ~/ 2;
            }
            return null;
          },
          childCount: math.max(0, values.length * 2 - 1),
        ),
      ),
    ],
  );

相关问题