主页 / 问题 / 1147121
Accepted
NoProgress
Asked:2020-06-30 01:30:13 +0000 UTC2020-06-30 01:30:13 +0000 UTC

仅在特定区域可见的 ListView

  • 772
  1. 如何创建ListView仅在特定区域可见的小部件？

在图片Listview中，元素仅在矩形中可见 在此处输入图像描述

为什么我需要这个小部件？

我想创建这样一个小部件，以便在滚动某个小部件时，我可以scrollNotification.metrics.pixels为该小部件从屏幕顶部的平滑退出设置动画。

为了让这个小部件中的元素发生漂亮的变化（旧文本向上，新文本从底部出来），我相信ListView这是最简单的方法。 在此处输入图像描述

  1. 我想知道。也许这个小部件有某种已经存在的名称，并且它已经在 pub.dev 中。
listview

1 个回答

  1. Best Answer

    您要查找的内容称为Sticky Header.

    sticky_and_expandable_list

    return ExpandableListView(
  builder: SliverExpandableChildDelegate<String, ExampleSection>(
      sectionList: sectionList,
      headerBuilder: (context, sectionIndex, index) =>
          Text("Header #$sectionIndex"),
      itemBuilder: (context, sectionIndex, itemIndex, index) {
        String item = sectionList[sectionIndex].items[itemIndex];
        return ListTile(
          leading: CircleAvatar(
            child: Text("$index"),
          ),
          title: Text(item),
        );
      }),
);

    flutter_sticky_header

    SliverStickyHeader(
  header: Container(
    height: 60.0,
    color: Colors.lightBlue,
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    alignment: Alignment.centerLeft,
    child: Text(
      'Header #0',
      style: const TextStyle(color: Colors.white),
    ),
  ),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, i) => ListTile(
            leading: CircleAvatar(
              child: Text('0'),
            ),
            title: Text('List tile #$i'),
          ),
      childCount: 4,
    ),
  ),
);

    粘性标题

    return ListView.builder(itemBuilder: (context, index) {
  return StickyHeader(
    header: Container(
      height: 50.0,
      color: Colors.blueGrey[700],
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      alignment: Alignment.centerLeft,
      child: Text('Header #$index',
        style: const TextStyle(color: Colors.white),
      ),
    ),
    content: Container(
      child: Image.network(imageForIndex(index), fit: BoxFit.cover,
        width: double.infinity, height: 200.0),
    ),
  );
});

    }

    • 1

相关问题