Flutter自定义应用栏插件jk_custom_appbar的使用

Flutter 自定义应用栏插件 jk_custom_appbar 的使用

jk_custom_appbar 是一个方便的 Flutter 插件，允许你使用任何自定义小部件作为应用栏或底部栏。它支持浮动/固定栏，并且支持水平屏幕模式。

特性

• 支持底部栏/应用栏。
• 可以使用任何自定义小部件作为应用栏/底部栏。
• 支持反向滚动。
• 支持在应用栏中添加图像背景。
• 支持水平模式。

快速开始

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  jk_custom_appbar: ^1.0.0

然后运行 flutter pub get 来安装该插件。

使用

自定义应用栏/底部栏

appBar 和 bottomBar 可以在滚动时展开/折叠。

但是 appBarPinned 和 bottomBarPinned 不会在滚动时展开/折叠，而是一直显示在屏幕上。

所有这些栏可以为 null（不显示）或者放置任何自定义小部件。

var layout = JkAppBarLayout(
  appBar: Text("自定义应用栏小部件"),                   // 可选
  appBarPinned: Text("自定义固定应用栏小部件"),       // 可选
  bottomBar: Text("自定义底部栏小部件"),             // 可选
  bottomBarPinned: Text("自定义固定底部栏小部件"),   // 可选
);

显示 ListView/GridView 作为内容（重要！）

要显示一个 ListView/GridView/SingleChildScrollView 作为内容，我们需要使用 JkAppBarListView/JkAppBarGridView/JkAppBarSingleChildScrollView。

这些新类的所有 API 都与 Flutter 官方类相同，只是类名不同。

注意：使用 Flutter 官方的 ListView/GridView/SingleChildScrollView 将不会使应用栏展开/折叠。

var layout = JkAppBarLayout(
  ...
  child: JkAppBarListView.builder( // API 与 ListView 相同
    itemCount: 300,
    itemBuilder: (context, index) => Text("列表项 $index"),
  ),
);

var layout = JkAppBarLayout(
  ...
  child: JkAppBarGridView.builder( // API 与 GridView 相同
    itemCount: 300,
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, mainAxisExtent: 30),
    itemCount: 300,
    itemBuilder: (context, index) => Text("网格项 $index"),
  ),
);

var layout = JkAppBarLayout(
  ...
  child: JkAppBarSingleChildScrollView.builder( // API 与 SingleChildScrollView 相同
    child: Column(
      children: List.generate(100, (index) => Text("列 $index")),
    ),
  ),
);

滑动和浮动

floating=true 表示当向后滚动时，appBar 和 bottomBar 会随时展开。

floating=false 表示只有当滚动回到列表开头时，appBar 和 bottomBar 才会随时展开。

snap=true 表示如果 appBar 和 bottomBar 没有完全展开/折叠，那么在按下时它们会自动展开/折叠。

var layout = JkAppBarLayout(
  ...
  floating: true,
  snap: true,
);

图像背景

在 appBarBackgroundBuilder 中返回一个 Image 小部件来显示图像作为 appBar 的背景。

appBarBackgroundBuilder 在每次折叠大小改变时被调用，因此我们通常可以在这里制作一个淡入效果。

设置 backgroundIncludingAppBarPinned 为 true 可以使图像也覆盖 appBarPinned 区域。

var layout = JkAppBarLayout(
  ...
  backgroundIncludingAppBarPinned: true,
  appBarBackgroundBuilder: (collapsedRatio) {
    return Opacity(
      opacity: 1 - collapsedRatio,
      child: Image.asset("assets/your_background.jpg", fit: BoxFit.cover),
    );
  },
);

颜色背景

默认情况下，我们将使用系统默认 AppBar 的颜色作为背景。

你可以通过 appBarBackgroundColor 自定义颜色：

var layout = JkAppBarLayout(
  ...
  appBarBackgroundColor: Colors.green,
);

默认文本大小/颜色和图标颜色

默认情况下，appBar、appBarPinned、bottomBar 和 bottomBarPinned 上的所有文本大小/颜色和图标颜色都与默认系统 AppBar 相同。

如果你想忽略这些默认主题/样式，可以将 appBarDefaultTheme 设置为 false：

var layout = JkAppBarLayout(
  ...
  appBarDefaultTheme: false,
);

水平支持

将 scrollDirection 设置为 Axis.horizontal 以在水平模式下显示应用栏。

别忘了在 JkAppBarListView/JkAppBarGridView/JkAppBarSingleChildScrollView 中同时设置 scrollDirection。

var layout = JkAppBarLayout(
  ...
  scrollDirection: Axis.horizontal,

  child: JkAppBarListView.builder(
    scrollDirection: Axis.horizontal,    // 别忘了这一步
    itemCount: 300,
    itemBuilder: (context, index) => Text("列表项 $index"),
  ),
);

示例代码

import 'package:flutter/material.dart';
import 'package:jk_custom_appbar/jk_appbar.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    Widget child = JkAppBarLayout(
      appBar: Text("应用栏"),                   // 可选
      appBarPinned: Text("固定应用栏"),       // 可选
      bottomBarPinned: Text("固定底部栏"), // 可选
      bottomBar: Text("底部栏"),             // 可选
      child: JkAppBarListView.builder(
        itemCount: 300,
        itemBuilder: (_, index) => Text("项目 $index"),
      )
    );

    return MaterialApp(
      home: Scaffold(
        body: child,
      ),
    );
  }
}