Flutter弹性应用栏插件rubber_app_bar的使用

描述

rubber_app_bar Flutter插件旨在通过提供灵活且可定制的弹性应用栏来增强您的应用程序用户界面。此插件允许开发者创建基于用户交互而平滑扩展、收缩和变形的应用栏。

关键特性

• 基于用户交互平滑扩展、收缩和变形
• 可定制
• 灵活
• 易于使用

安装

flutter pub add rubber_app_bar

如何使用

1. 将 RubberAppBar 小部件放在 Scaffold 小部件的 appBar 属性中

Scaffold(
  appBar: RubberAppBar(
    // ...
  ),
  // ...
)

2. 设置 height 属性以在应用栏折叠时的高度

Scaffold(
  appBar: RubberAppBar(
    height: 200,
    // ...
  ),
  // ...
)

3. 设置 maxExtent 属性以在应用栏展开时的高度

Scaffold(
  appBar: RubberAppBar(
    height: 200,
    maxExtent: 500,
    // ...
  ),
  // ...
)

4. 设置 builder 属性以返回应用栏的内容（自定义小部件）

Scaffold(
  appBar: RubberAppBar(
    height: 200,
    maxExtent: 500,
    builder: (extending) => YourCustomWidget(),
    // ...
  ),
  // ...
)

5. 使用 extending 参数控制应用栏的内容

您会看到，构建器会为您提供一个名为 extending 的参数，该参数是应用栏实时扩展值。 您可以使用此值根据扩展值条件渲染小部件。例如，当应用栏扩展到200时，我想渲染一个高度为200的小部件。

Scaffold(
  appBar: RubberAppBar(
    height: 200,
    maxExtent: 500,
    builder: (extending) => Column(
      children: [
        if (extending > 200)
          Container(
            height: 200,
            color: Colors.red,
          ),
      ],
    ),
  )
  // ...
),

5.A. 更好地使用 extending 参数

您可以根据 extending 值移动、缩放或旋转任何小部件。例如，当应用栏从200扩展到300时，我想将一个小部件从0缩放到1。

Scaffold(
  appBar: RubberAppBar(
    height: 200,
    maxExtent: 500,
    builder: (extending) => Column(
      children: [
        if (extending > 200)
          Transform.scale(
            // (extending >= 300 ? 100 : (extending - 200)) == a range between [0, 100],
            // so we divide it by 100 to get [0, 1]
            scale: (extending >= 300 ? 100 : (extending - 200)) / 100,
            child: Container(
              height: 200,
              color: Colors.red,
            ),
          ),
      ],
    ),
  )
  // ...
),

6. 使用 mode 属性控制应用栏的行为

应用栏的默认行为是在用户向下拖动时展开，在用户向上拖动时收缩。您可以通过将 mode 属性设置为 RubberAppBarMode.movementDirection 或 RubberAppBarMode.halfway 来更改此行为。RubberAppBarMode.movementDirection 模式将在用户向下拖动时展开应用栏，并在用户向上拖动时收缩。RubberAppBarMode.halfway 模式将在用户向下拖动时展开应用栏，并在用户向上拖动时收缩，直到达到 maxExtent 值的一半，然后在用户向上拖动时展开应用栏，并在用户向下拖动时收缩。

Scaffold(
  appBar: RubberAppBar(
    height: 200,
    maxExtent: 500,
    mode: RubberAppBarMode.movementDirection,
    builder: (extending) => YourCustomWidget(),
  )
  // ...
),

7. 使用 transitionCurve 属性控制应用栏的过渡曲线

应用栏的默认过渡曲线为 Curves.ease。您可以将 transitionCurve 属性设置为您想要的任何曲线。

Scaffold(
  appBar: RubberAppBar(
    height: 200,
    maxExtent: 500,
    transitionCurve: Curves.ease,
    builder: (extending) => YourCustomWidget(),
  )
  // ...
),

8. 使用 extendBodyBehindAppBar 属性控制应用栏的位置

应用栏的默认位置在其上方。因此，随着应用栏的扩展，它会将主体向下推。您可以通过将 extendBodyBehindAppBar 属性设置为 true 来更改此行为。这将允许应用栏位于主体上方。因此，随着应用栏的扩展，它将位于主体上方。

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: RubberAppBar(
    height: 200,
    maxExtent: 500,
    builder: (extending) => YourCustomWidget(),
  )
  // ...
),

9. 从 Scaffold 主体开始一个高度为 YourCustomWidget 高度的 SizedBox 小部件

为了防止主体顶部部分被应用栏遮挡，您需要从 Scaffold 主体开始一个高度为 YourCustomWidget 高度的 SizedBox 小部件。例如，如果 YourCustomWidget 的高度为200，则需要从 SizedBox 小部件开始 Scaffold 主体，高度为200作为 Column 中的第一个子项。

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: RubberAppBar(
    height: 200,
    maxExtent: 500,
    builder: (extending) => YourCustomWidget(),
  )
  body: Column(
    children: [
      // 这是第一个子项
      SizedBox(height: 200),
      // 主体的其余部分
      // ...
    ],
  ),
),

示例

import 'package:flutter/material.dart';
import 'package:rubber_app_bar/growing_widget.dart';
import 'package:rubber_app_bar/rubber_app_bar.dart';
import 'package:rubber_app_bar/scale_up_widget.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: '旅行应用',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: RubberAppBar(
        transitionCurve: Curves.ease,
        height: 200,
        maxExtent: 500,
        mode: RubberAppBarMode.movementDirection,
        builder: (extending) => Container(
          height: double.infinity,
          decoration: const BoxDecoration(
            color: Color.fromARGB(255, 9, 58, 255),
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(45),
              bottomRight: Radius.circular(45),
            ),
          ),
          child: SafeArea(
            child: Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(16),
              child: Column(
                children: [
                  const Text(
                    '弹性应用栏',
                    style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                      color: Color.fromARGB(255, 233, 233, 233),
                    ),
                  ),

                  // 条件是仅在用户向下拖动应用栏时渲染该小部件
                  // 如果不使用此条件，尝试向上拖动应用栏时会引发溢出错误
                  if (extending > 0)
                    GrowingWidget(
                      availableHeight: extending,
                      maxHeight: 200,
                      child: const DummyWidget(
                        color: Color.fromARGB(255, 255, 204, 0),
                        height: 200,
                      ),
                    ),

                  // 条件是仅在前一个小部件渲染并占用其空间时渲染该小部件
                  // 200 表示前一个小部件的高度
                  if (extending > 200)
                    // 我们想渲染两个小部件，
                    // 所以我们将它们放在列表中并使用展开运算符
                    ...[
                    const SizedBox(height: 20),
                    // extending - 200 是小部件的可用高度
                    ScaleUpWidget(
                      availableHeight: extending - 200,
                      maxHeight: 150,
                      child: const DummyWidget(
                        color: Color.fromARGB(255, 255, 204, 0),
                        height: 150,
                      ),
                    )
                  ],
                  const Spacer(),
                  // 拖动把手
                  const DragHandler(),
                ],
              ),
            ),
          ),
        ),
      ),

      // 这里我们使用此属性使应用栏位于主体上方
      // 如果不使用它，应用栏将把主体向下推
      extendBodyBehindAppBar: true,
      body: const Center(
        child: Text(
          '这是主体！',
          style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Color(0xFF2A2A2A),
          ),
        ),
      ),
    );
  }
}

class DragHandler extends StatelessWidget {
  const DragHandler({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 16),
      width: 50,
      height: 5,
      decoration: BoxDecoration(
        color: const Color(0xFF2A2A2A),
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }
}

class DummyWidget extends StatelessWidget {
  final Color color;
  final double height;
  const DummyWidget({
    super.key,
    required this.color,
    required this.height,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: height,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
      child: const Center(
        child: Text(
          '示例小部件',
          style: TextStyle(
            fontSize: 22,
            fontWeight: FontWeight.bold,
            color: Color(0xFF2A2A2A),
          ),
        ),
      ),
    );
  }
}