Flutter中的 SliverList

在Flutter中，使用 slivers，我们可以创建不同的滚动效果。当 Sliver 向上或向下滚动时，它们会提供令人惊叹的列表视图。条子允许我们影响列表、网格的滚动体验。在本文中，我们将研究 sliver_tools 包提供的 Slivers 功能。 sliver_tools 提供的功能如下：

• MultiSliver
• 银栈
• 银夹
• SliverAnimatedPaintExtent

添加依赖

在pubspec.yaml文件中，添加 sliver_tools 作为依赖项，然后通过运行 pub get 对其进行配置。

Dart

dependencies:
  sliver_tools: ^0.2.5

导入依赖

在主要。 dart文件，添加依赖如下：

Dart

import 'package:sliver_tools/sliver_tools.dart';

执行

Slivers 应该被包裹在 CustomScrollView 中，以便为列表或网格提供滚动效果。 CustomScrollView 包装了 Slivers 小部件，其中包括我们创建的所有 slivers。

MultiSliver

MultiSliver() 小部件允许将多个 sliver 包装在一起。例如，在下面的代码中，我们正在创建一个 SliverPinnedHeader() - 一个会粘在顶部的标题，甚至列表到达屏幕的末尾，并且 SliverList() 小部件位于单个 MultiSliver() 小部件中。

Dart

MultiSliver(
           // defaults to false
           pushPinnedChildren: true, 
           children: [
             SliverPinnedHeader(
                 child: Container(
                     color: Colors.yellow,
                     height: 100,
                     child: Text(
                       "I am a Pinned Header",
                       style: TextStyle(fontSize: 30),
                     ))),
             SliverList(
               delegate: SliverChildBuilderDelegate(
                 (BuildContext context, int index) {
                   return Padding(
                     padding: const EdgeInsets.all(8.0),
                     child: Container(
                       color:
                           index % 2 == 0 ? Colors.green : Colors.greenAccent,
                       height: 80,
                       alignment: Alignment.center,
                       child: Text(
                         "Item $index",
                         style: const TextStyle(fontSize: 30),
                       ),
                     ),
                   );
                 },
                 // 40 list items
                 childCount: 40, 
               ),
             ),
           ],
         )

输出：

银栈

SliverStack() 允许将一条条放在另一条上。在下面的示例中，通过 SliverPositioned()，我们创建了黄色的完整布局，在其之上我们使用 SliverList() 呈现列表项。 SliverList() 将委托作为参数将项目提供给要滚动的列表。

Dart

SliverStack(
           // defaults to false
           insetOnOverlap: true, 
           children: [
             SliverPositioned.fill(
               child: Container(color: Colors.yellow),
             ),
             SliverList(
               delegate: SliverChildBuilderDelegate(
                 (BuildContext context, int index) {
                   return Padding(
                     padding: const EdgeInsets.all(15.0),
                     child: Container(
                       color:
                           index % 2 == 0 ? Colors.green : Colors.greenAccent,
                       height: 40,
                       alignment: Alignment.center,
                       child: Text(
                         "Item $index",
                         style: const TextStyle(fontSize: 30),
                       ),
                     ),
                   );
                 },
                 // 40 list items
                 childCount: 40, 
               ),
             ),
           ],
         )

输出：

银格

SliverGrid() 将项目放入 2D 系统中。它需要用于构建网格布局的 gridDelegate 和一个传递要在屏幕上显示以进行滚动的项目的委托。参数 childCount 是要显示的项目数。

Dart

SliverGrid(
           gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
             crossAxisCount: 3,
             mainAxisSpacing: 10,
             crossAxisSpacing: 10,
             childAspectRatio: 2.0,
           ),
           delegate: SliverChildBuilderDelegate(
             (context, index) {
               return Container(
                 height: 20,
                 color: Colors.amber[100],
                 alignment: Alignment.center,
                 child: Text(index.toString()),
               );
             },
             childCount: 41,
           ),
         )

输出：

一个完整的例子

Dart

import 'package:flutter/material.dart';
import 'package:sliver_tools/sliver_tools.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'SliverList in Flutter',
      theme: ThemeData(primarySwatch: Colors.green),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          centerTitle: true,
        ),
        body: CustomScrollView(slivers: [
          SliverPinnedHeader(
              child: Container(
                  color: Colors.blue[100],
                  height: 100,
                  child: Text(
                    "I am a Pinned Header",
                    style: TextStyle(fontSize: 30),
                  ))),
          SliverAnimatedPaintExtent(
            duration: const Duration(milliseconds: 150),
            child: SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Container(
                      color: Colors.pink[100],
                      height: 40,
                      alignment: Alignment.center,
                      child: Text(
                        "$index",
                        style: const TextStyle(fontSize: 30),
                      ),
                    ),
                  );
                },
                // 40 list items
                childCount: 10, 
              ),
            ),
          ),
          SliverStack(
            // defaults to false
            insetOnOverlap: true, 
            children: [
              SliverPositioned.fill(
                child: Container(color: Colors.yellow),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: Container(
                        color:
                            index % 2 == 0 ? Colors.green : Colors.greenAccent,
                        height: 40,
                        alignment: Alignment.center,
                        child: Text(
                          "Item $index",
                          style: const TextStyle(fontSize: 30),
                        ),
                      ),
                    );
                  },
                  // 40 list items
                  childCount: 10, 
                ),
              ),
            ],
          ),
          SliverGrid(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              childAspectRatio: 2.0,
            ),
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return Container(
                  height: 20,
                  color: Colors.amber[100],
                  alignment: Alignment.center,
                  child: Text(index.toString()),
                );
              },
              childCount: 41,
            ),
          )
        ]));
  }
}

输出：