Flutter自定义SliverAppBar插件sliver_app_bar_builder的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter自定义SliverAppBar插件sliver_app_bar_builder的使用

插件介绍

sliver_app_bar_builder 是一个由 netglade 开发的Flutter插件,它提供了高度可定制化的 SliverAppBar,并利用构建器模式来增强灵活性。你可以通过配置不同的属性来自定义应用栏的行为和外观。

ci pub package license: MIT style: netglade analysis Discord

storybook demo

更多演示可以访问 storybook demo 进行交互式体验。

功能特性

SliverAppBarBuilder 支持多种配置选项:

  • bar

    • 高度
    • 初始高度(展开时)
    • 背景(适用于所有或仅限顶部栏)
  • content

    • 构建器
    • 初始高度
    • 内容是否位于栏下方
    • 内边距
  • leading 和 trailing actions

    • 构建器列表
    • 是否折叠
    • 内边距
  • stretching

    • 是否拉伸
    • 拉伸配置
  • miscellaneous

    • 固定模式
    • 切换模式
    • 调试模式(可视化调试各个部分)

每个构建器都提供 expandRatiocontentHeight/barHeight 参数,以便于根据当前状态自定义UI。

示例代码

以下是一个完整的示例代码,展示了如何创建一个标题从返回按钮下方移动到其右侧的自定义 SliverAppBar

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBarBuilder(
              barHeight: 60,
              pinned: true,
              leadingActions: [
                (context, expandRatio, barHeight, overlapsContent) {
                  return SizedBox(
                    height: barHeight,
                    child: const BackButton(),
                  );
                }
              ],
              initialContentHeight: 150,
              contentBuilder: (context, expandRatio, contentHeight, overlapsContent) {
                return Container(
                  alignment: Alignment.centerLeft,
                  height: 60,
                  transform: Matrix4.translationValues(10 + (1 - expandRatio) * 40, 0, 0),
                  child: Text(
                    'My Title',
                    style: TextStyle(
                      fontSize: 22 + expandRatio * 10,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

此代码实现了如下功能:

  • 创建了一个固定在顶部的应用栏。
  • 应用栏包含一个返回按钮。
  • 标题文本会随着滚动位置的变化而改变位置和大小,从而实现从返回按钮下方移动到其右侧的效果。

总结

sliver_app_bar_builder 提供了强大的工具集来创建复杂且美观的应用栏。通过灵活运用提供的API,开发者可以根据项目需求定制出独特的用户体验。如果你希望进一步探索这个插件的功能,建议参考官方文档和示例代码。


更多关于Flutter自定义SliverAppBar插件sliver_app_bar_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义SliverAppBar插件sliver_app_bar_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter中使用sliver_app_bar_builder(假设这是一个假设的插件名称,因为Flutter官方并没有直接名为sliver_app_bar_builder的插件,但我们可以模拟一个自定义的SliverAppBar的实现)来自定义SliverAppBar的代码示例。

首先,我们需要定义一个自定义的SliverAppBar。为了演示目的,我们将创建一个简单的自定义SliverAppBar,该SliverAppBar在滚动时会改变其背景颜色和标题。

步骤 1: 创建一个Flutter项目

确保你已经创建了一个Flutter项目。如果还没有,可以通过以下命令创建:

flutter create custom_sliver_app_bar_demo
cd custom_sliver_app_bar_demo

步骤 2: 定义自定义SliverAppBar

lib目录下创建一个新的Dart文件,比如custom_sliver_app_bar.dart,并在其中定义我们的自定义SliverAppBar:

import 'package:flutter/material.dart';

class CustomSliverAppBar extends StatefulWidget {
  final String title;

  CustomSliverAppBar({required this.title});

  @override
  _CustomSliverAppBarState createState() => _CustomSliverAppBarState();
}

class _CustomSliverAppBarState extends State<CustomSliverAppBar> {
  double _scrollPosition = 0.0;

  void _onScroll(double position) {
    setState(() {
      _scrollPosition = position;
    });
  }

  @override
  Widget build(BuildContext context) {
    final Color backgroundColor = _scrollPosition > 200 ? Colors.blue : Colors.transparent;
    final String displayedTitle = _scrollPosition > 200 ? 'Scrolled' : widget.title;

    return SliverPersistentHeader(
      delegate: _SliverAppBarDelegate(
        backgroundColor: backgroundColor,
        title: displayedTitle,
        onScroll: _onScroll,
      ),
      pinned: true,
      floating: true,
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  final Color backgroundColor;
  final String title;
  final ValueChanged<double> onScroll;

  _SliverAppBarDelegate({required this.backgroundColor, required this.title, required this.onScroll});

  @override
  double get minExtent => kToolbarHeight;

  @override
  double get maxExtent => kToolbarHeight;

  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    onScroll(shrinkOffset);
    return Container(
      color: backgroundColor,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Center(
          child: Text(
            title,
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
      ),
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return oldDelegate.backgroundColor != backgroundColor || oldDelegate.title != title;
  }
}

步骤 3: 使用自定义SliverAppBar

现在,我们在主应用文件中使用这个自定义的SliverAppBar。打开lib/main.dart并修改如下:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom SliverAppBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            CustomSliverAppBar(title: 'My Title'),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. CustomSliverAppBar: 这是一个有状态的Widget,它使用SliverPersistentHeader来创建一个持久的头部。头部的背景颜色和标题会根据滚动位置改变。

  2. _SliverAppBarDelegate: 这是一个实现了SliverPersistentHeaderDelegate的类,它定义了头部的最小和最大扩展,以及头部的构建逻辑。

  3. Main Application: 在主应用中,我们使用CustomScrollView来包含我们的自定义SliverAppBar和一个简单的列表。

这个示例展示了如何创建一个自定义的SliverAppBar,并根据滚动位置改变其外观。虽然这不是一个实际的sliver_app_bar_builder插件的使用示例,但它提供了一个自定义SliverAppBar的实现思路。如果你有一个具体的sliver_app_bar_builder插件,请根据该插件的文档进行相应调整。

回到顶部