Flutter滚动阴影效果插件scroll_shadow_container的使用

Flutter滚动阴影效果插件scroll_shadow_container的使用

scroll_shadow_container 是一个可以包裹滚动容器并在顶部或底部未达到时绘制阴影的小部件。

使用方法

要使用此插件，需要在 pubspec.yaml 文件中添加依赖项：

dependencies:
  scroll_shadow_container:

然后在代码中导入该包：

import 'package:scroll_shadow_container/scroll_shadow_container.dart';

示例

你可以通过 elevation 属性指定阴影的高度。elevation 属性不完全准确地模仿了 Material 的阴影效果。

// 基础用法
ScrollShadowContainer(
  elevation: MaterialElevation.the2dp, // 设置阴影高度为2dp
  child: ListView(
    children: List.generate(10, (i) {
      return ListTile(
        leading: CircleAvatar(child: Text((i + 1).toString())), // 列表项前的圆圈
        title: Text('List item title'), // 列表项的标题
        subtitle: Text('List item subtitle'), // 列表项的副标题
      );
    }),
  ),
)

你也可以使用 ScrollShadowContainer.custom 构造函数来提供自定义的 BoxShadow：

// 自定义阴影
ScrollShadowContainer.custom(
  boxShadow: BoxShadow(blurRadius: 5, spreadRadius: 5), // 设置模糊半径和扩展半径
  child: /* ... */ 
)

此外，你还可以通过以下代码获取由该包使用的 BoxDecoration：

Container(
  decoration: MaterialShadow.asBoxDecoration(elevation: MaterialElevation.the4dp), // 设置阴影高度为4dp
)

需要注意的是，我只尝试复制了 Material 的阴影效果，所以它们并不完全相同，但非常接近。只有 1 到 8 的阴影值可用。

完整示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scrollable shadow demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 48,
              child: Padding(
                padding: EdgeInsets.fromLTRB(16, 16, 0, 0),
                child: Text(
                  'Here comes the header', // 这里是头部
                  style: TextStyle(fontSize: 16),
                  textAlign: TextAlign.left,
                ),
              ),
            ),
            Expanded(
              child: ScrollShadowContainer(
                elevation: MaterialElevation.the2dp, // 设置阴影高度为2dp
                child: ListView(
                  children: List.generate(10, (i) {
                    return ListTile(
                      leading: CircleAvatar(child: Text((i + 1).toString())), // 列表项前的圆圈
                      title: Text('List item title'), // 列表项的标题
                      subtitle: Text('List item subtitle'), // 列表项的副标题
                    );
                  }),
                ),
              ),
            ),
            SizedBox(
              height: 48,
              child: Padding(
                padding: EdgeInsets.fromLTRB(16, 16, 0, 0),
                child: Text(
                  'Here comes the footer', // 这里是底部
                  style: TextStyle(fontSize: 16),
                  textAlign: TextAlign.left,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}