Flutter 中 Sliver 的各种装饰器介绍与使用

Zender Han

已于 2024-12-16 10:52:06 修改

阅读量644

点赞数 7

分类专栏： Flutter知识学习指南文章标签： flutter android ios

于 2024-12-16 10:51:45 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42698421/article/details/144500416

版权

Flutter知识学习指南专栏收录该内容

79 篇文章

订阅专栏

在 Flutter 中，Sliver 是一种可以在滚动视图中实现自定义效果的组件。Sliver 组件可以根据滚动位置动态改变其外观和行为。本文将介绍几种常用的 Sliver 装饰器及其使用方法。

1. SliverAppBar

SliverAppBar 是一个可以随着滚动而变化的应用栏。它可以在用户向下滚动时收缩，向上滚动时展开。

使用示例

import 'package:flutter/material.dart';

class SliverAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('SliverAppBar Example'),
              background: Image.network(
                'https://example.com/image.jpg',
                fit: BoxFit.cover,
              ),
            ),
            floating: false,
            pinned: true,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(title: Text('Item #$index'));
              },
              childCount: 100,
            ),
          ),
        ],
      ),
    );
  }
}

2. SliverList 和 SliverGrid

SliverList 和 SliverGrid 用于创建可滚动的列表和网格。它们可以与 CustomScrollView 一起使用，以实现更复杂的滚动效果。

使用示例

import 'package:flutter/material.dart';

class SliverListExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(title: Text('List Item #$index'));
              },
              childCount: 50,
            ),
          ),
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Card(
                  child: Center(child: Text('Grid Item #$index')),
                );
              },
              childCount: 50,
            ),
          ),
        ],
      ),
    );
  }
}

3. SliverToBoxAdapter

SliverToBoxAdapter 是一个适配器，可以将普通的 Widget 转换为 Sliver。它可以用于在 Sliver 组件中插入非 Sliver Widget。

使用示例

import 'package:flutter/material.dart';

class SliverToBoxAdapterExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: Container(
              height: 100.0,
              color: Colors.blue,
              child: Center(child: Text('Non-Sliver Widget')),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(title: Text('Item #$index'));
              },
              childCount: 50,
            ),
          ),
        ],
      ),
    );
  }
}

4. SliverPersistentHeader

SliverPersistentHeader 允许你创建一个可以在滚动时保持可见的头部。它可以用于实现自定义的滚动效果。

使用示例

import 'package:flutter/material.dart';

class SliverPersistentHeaderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPersistentHeader(
            pinned: true,
            delegate: _SliverAppBarDelegate(
              minHeight: 60.0,
              maxHeight: 200.0,
              child: Container(
                color: Colors.red,
                child: Center(child: Text('Persistent Header')),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(title: Text('Item #$index'));
              },
              childCount: 50,
            ),
          ),
        ],
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    required this.minHeight,
    required this.maxHeight,
    required this.child,
  });

  final double minHeight;
  final double maxHeight;
  final Widget child;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return SizedBox.expand(child: child);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return minHeight != oldDelegate.minHeight ||
        maxHeight != oldDelegate.maxHeight ||
        child != oldDelegate.child;
  }
}

5. SliverFixedExtentList

SliverFixedExtentList 用于创建具有固定高度的列表项，适合需要统一高度的列表。

使用示例

import 'package:flutter/material.dart';

class SliverFixedExtentListExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverFixedExtentList(
            itemExtent: 100.0, // 每个列表项的固定高度
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(title: Text('Fixed Item #$index'));
              },
              childCount: 50,
            ),
          ),
        ],
      ),
    );
  }
}

6. SliverPadding

SliverPadding 用于在 Sliver 组件周围添加内边距。

使用示例

import 'package:flutter/material.dart';

class SliverPaddingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPadding(
            padding: EdgeInsets.all(16.0), // 设置内边距
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(title: Text('Padded Item #$index'));
                },
                childCount: 50,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

7. SliverGrid

SliverGrid 用于创建可滚动的网格布局，适合展示图片或其他网格状内容。

使用示例

import 'package:flutter/material.dart';

class SliverGridExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, // 每行显示3个
              childAspectRatio: 1.0, // 宽高比
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Card(
                  child: Center(child: Text('Grid Item #$index')),
                );
              },
              childCount: 30,
            ),
          ),
        ],
      ),
    );
  }
}

8. SliverAppBar with TabBar

结合 SliverAppBar 和 TabBar 可以实现带有标签的可滚动应用栏。

使用示例

import 'package:flutter/material.dart';

class SliverAppBarWithTabsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverAppBar with Tabs'),
              ),
              bottom: TabBar(
                tabs: [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                  Tab(text: 'Tab 3'),
                ],
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(title: Text('Item #$index'));
                },
                childCount: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

9. SliverOpacity

SliverOpacity 用于在 Sliver 组件上应用透明度效果。

使用示例

import 'package:flutter/material.dart';

class SliverOpacityExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverOpacity(
            opacity: 0.5, // 设置透明度
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(title: Text('Opacity Item #$index'));
                },
                childCount: 50,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

总结

Sliver 组件为 Flutter 提供了强大的滚动效果和灵活的布局方式。通过使用 SliverAppBar、SliverList、SliverGrid、SliverToBoxAdapter、SliverPersistentHeader、SliverFixedExtentList、SliverPadding、SliverOpacity 等组件，你可以创建出丰富多彩的用户界面。希望本文能帮助你更好地理解和使用 Flutter 中的 Sliver 装饰器。