Flutter滚动应用栏插件scroll_app_bar的使用

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

Flutter滚动应用栏插件scroll_app_bar的使用

Hide or show app bar while scrolling. This package works without custom scroll views and slivers. So, you can use this widget in a scaffold widget, that turns your code more simple.

简单滚动与快照行为

简单滚动 快照行为

路线图

以下是当前路线图，欢迎请求添加或更改。

功能 进度
简单滚动 ✅
快照行为 ✅
固定/取消固定 ✅
渐变背景 ✅
透明背景 ✅

注意: 尝试使用此包与 scroll_bottom_navigation_bar 包结合以获得更好的用户体验。查看一个示例。

使用

开始

在你的项目中添加 scroll_app_bar 包。你可以按照 这些步骤 来安装它。

基本实现

首先，你需要一个 ScrollController 实例。

final controller = ScrollController();

这个控制器是为了获取该包的主要功能。你需要将其传递给 ScrollAppBar 的控制器，并在你的 ListView 中也设置控制器属性。如果没有这个，你将得到一个普通的应用栏。

现在，你可以在 Scaffold 中使用 ScrollAppBar 小部件，并在可滚动的主小部件中附加 ScrollController 实例。

注意: 只展示必要的代码。完整的实现请参阅 示例 部分。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: ScrollAppBar(
      controller: controller, // 注意这里的控制器
      title: Text("App Bar"),
    ),
    body: ListView.builder(
      controller: controller, // 控制器在这里
      itemBuilder: (context, index) {
        return ListTile(title: Text('Item $index'));
      },
    ),
  );
}
快照行为

要启用快照行为，你只需要将主滚动小部件包裹在一个 Snap 小部件中并附加控制器。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: ScrollAppBar(
      controller: controller, // 注意这里的控制器
      title: Text("App Bar"),
    ),
    body: Snap(
      controller: controller.appBar,
      child: ListView.builder(
        controller: controller, // 控制器在这里
        itemBuilder: (context, index) {
          return ListTile(title: Text('Item $index'));
        },
      ),
    ),
  );
}
示例

查看一个 完整的示例。

API 参考

// 返回栏的总高度
controller.appBar.height;

// 不透明度变化的通知器
controller.appBar.heightNotifier;

// 固定状态变化的通知器
controller.appBar.isPinned;

// 如果栏被固定返回 true，否则返回 false
controller.appBar.pinNotifier;

// 设置新的固定状态
controller.appBar.setPinState(state);

// 切换固定状态
controller.appBar.tooglePinState();

// 释放资源
controller.appBar.dispose();

更多关于Flutter滚动应用栏插件scroll_app_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter滚动应用栏插件scroll_app_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用scroll_app_bar插件的示例代码。scroll_app_bar插件通常用于创建响应滚动事件的自定义应用栏。不过需要注意的是，Flutter社区中有多个类似的插件，这里假设你指的是一个流行的或者自定义的插件，其核心功能是响应滚动事件来调整应用栏的状态。

由于Flutter官方并没有直接名为scroll_app_bar的插件，但我们可以使用Flutter内置的SliverAppBar来实现类似的功能，它本身已经提供了响应滚动事件的能力。如果你确实指的是一个第三方插件，并且它有特定的API，请根据实际情况调整代码。

下面是一个使用SliverAppBar实现滚动应用栏的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Scroll App Bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ScrollAppBarDemo(),
    );
  }
}

class ScrollAppBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            leading: IconButton(
              icon: Icon(Icons.menu),
              tooltip: 'Navigation menu',
              onPressed: () {
                // Handle menu button press
              },
            ),
            expandedHeight: 200.0,
            floating: true,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text('Scroll App Bar Demo'),
              background: Image.network(
                'https://via.placeholder.com/1500x500',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              List.generate(
                50,
                (index) => ListTile(
                  title: Text('Item $index'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

代码说明：

  1. MaterialApp：应用程序的根部件，定义了应用的主题和主页。
  2. Scaffold：提供了应用的基本布局结构，包括应用栏和主体内容。
  3. CustomScrollView：一个可以包含多个sliver部件的滚动视图。
  4. SliverAppBar：一个响应滚动的应用栏。
    • leading：应用栏左侧的图标按钮。
    • expandedHeight：应用栏展开时的高度。
    • floating：当滚动到内容顶部时，应用栏是否浮动。
    • pinned：应用栏是否固定在顶部。
    • flexibleSpace：定义了应用栏展开时的背景和内容。
  5. SliverList：包含了一个列表项集合。
    • delegate：定义了列表项的数据源。

如果你使用的是第三方scroll_app_bar插件，并且它有特定的配置和使用方法，请参考该插件的官方文档，通常会有详细的示例代码和API说明。如果插件的API与SliverAppBar类似，你可以参考上述代码结构进行调整。

回到顶部