Flutter自定义滚动视图插件slivers的使用

Flutter 自定义滚动视图插件 Slivers 的使用

在 Flutter 中，Sliver 组件允许你创建复杂的滚动视图。本文将展示如何使用 Slivers 创建一个自定义滚动视图，并提供一个完整的示例代码。

Slivers

Slivers 是一种特殊的 Widget，它们可以被组合在一起形成一个自定义的滚动视图。常见的 Sliver 组件包括 SliverList、SliverGrid 等。本文将介绍几个有用的 Sliver 组件，如 SliverContainer、SliverGroup 等。

// SliverClipRect, SliverClipRRect, SliverClipPath, ColoredSliver, SliverContainer, SliverGroup.

这些组件还在开发中，但已经可以用于创建复杂的滚动视图效果。

示例代码

以下是一个完整的示例代码，展示了如何使用 Slivers 创建一个自定义滚动视图。

import 'package:flutter/material.dart';
import 'package:slivers/slivers.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这个 widget 是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这次调用 setState 告诉 Flutter 框架某些东西发生了变化，
      // 因此它会重新运行 build 方法以反映更新后的值。
      // 如果我们不调用 setState 而直接改变 _counter，那么 build 方法不会被再次调用，
      // 因此屏幕上什么都不会发生变化。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每当 setState 被调用时，这个方法会被重新运行。
    // 
    // Flutter 框架已经优化了重新运行 build 方法的速度，
    // 所以你可以简单地重建任何需要更新的内容，而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 我们从 MyHomePage 对象中获取值，
        // 并将其用于设置我们的 appbar 标题。
        title: Text(widget.title),
      ),
      body: CustomScrollView(
        slivers: [
          SliverContainer(
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(color: Colors.green),
            sliver: DecoratedSliver(
              sliver: SliverGroup(
                slivers: [
                  for (int i in List.generate(100, (i) => i))
                    SliverToBoxAdapter(
                      child: Container(
                        color: Colors.blue,
                        width: double.infinity,
                        child: ListTile(title: Text('$i')),
                      ),
                    )
                ],
              ),
              decoration: BoxDecoration(color: Colors.blue),
            ),
          ),
          for (int j in List.generate(10, (i) => i))
            SliverGroup(
              slivers: [
                for (int i in List.generate(2, (i) => i))
                  SliverToBoxAdapter(
                    child: Container(
                      width: double.infinity,
                      child: ListTile(title: Text('$i')),
                    ),
                  )
              ],
            )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}