Flutter可折叠头部应用栏插件accordion_sliver_app_bar的使用

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

Flutter可折叠头部应用栏插件accordion_sliver_app_bar的使用

AccordionSliverAppBar 是一个自定义的 Flutter 包,它提供了一个带有动态折叠动画效果的 SliverAppBar。你可以使用它来创建可以基于优先级展开或折叠的 SliverAppBars,从而创建出具有吸引力和响应式的用户界面。

示例

Accordion Sliver App Bar Demo

功能

  • 具有自定义动画效果的折叠式 SliverAppBar
  • 支持子部件的展开和折叠状态。
  • 可以根据优先级确定折叠顺序。
  • 可以完全控制对齐方式、布局和动画持续时间。
  • 兼容 SafeArea 以正确处理布局。

安装

运行以下命令将包添加到 pubspec.yaml 文件:

flutter pub add accordion_sliver_app_bar

然后运行:

flutter pub get

使用

这是一个基本示例,展示如何使用 AccordionSliverAppBar

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          AccordionSliverAppBar(
            delegate: AccordionSliverDelegate(
              children: [
                AccordionSliverChild(
                  expanded: SizedSliverChild(
                    child: Container(color: Colors.blue, height: 200),
                    preferredSize: Size(double.infinity, 200),
                  ),
                  collapsed: SizedSliverChild(
                    child: Container(color: Colors.blue, height: 100),
                    preferredSize: Size(double.infinity, 100),
                  ),
                  priority: 1,
                ),
                AccordionSliverChild(
                  expanded: SizedSliverChild(
                    child: Container(color: Colors.red, height: 200),
                    preferredSize: Size(double.infinity, 200),
                  ),
                  collapsed: SizedSliverChild(
                    child: Container(color: Colors.red, height: 100),
                    preferredSize: Size(double.infinity, 100),
                  ),
                  priority: 2,
                ),
              ],
              duration: Duration(milliseconds: 300),
              pinned: true,
              floating: false,
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text('Item #$index')),
              childCount: 50,
            ),
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter应用中使用accordion_sliver_app_bar插件的示例代码。这个插件允许你创建一个可折叠的头部应用栏,类似于某些应用中的扩展详情视图。

首先,你需要在pubspec.yaml文件中添加依赖项:

dependencies:
  flutter:
    sdk: flutter
  accordion_sliver_app_bar: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来,下面是一个完整的Flutter应用示例,展示了如何使用accordion_sliver_app_bar

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Accordion Sliver App Bar Demo'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          AccordionSliverAppBar(
            expandedHeight: 200.0,
            collapsedHeight: 60.0,
            backgroundColor: Colors.blue,
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              ),
            ],
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Expandable Header'),
              background: Image.network(
                'https://via.placeholder.com/800x200',
                fit: BoxFit.cover,
              ),
            ),
            expandedTitle: Text('Expanded Title'),
            onExpansionChanged: (bool newValue) {
              setState(() {
                isExpanded = newValue;
              });
            },
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              List.generate(20, (index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              }),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Toggle expansion state manually for demonstration
          setState(() {
            isExpanded = !isExpanded;
          });
          // Note: This won't actually change the expansion state of AccordionSliverAppBar
          // because it doesn't expose a direct way to control it from outside.
          // Instead, you should rely on user interaction or internal state management.
        },
        tooltip: 'Toggle Expansion',
        child: Icon(isExpanded ? Icons.expand_more : Icons.chevron_right),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

在这个示例中:

  1. AccordionSliverAppBar被用作CustomScrollView的第一个sliver。
  2. expandedHeightcollapsedHeight属性定义了应用栏展开和折叠时的高度。
  3. backgroundColor属性设置了应用栏的背景颜色。
  4. leadingactions属性允许你添加导航图标和操作图标。
  5. flexibleSpace属性允许你添加更复杂的布局,比如图片和文本。
  6. expandedTitle属性定义了应用栏展开时的标题。
  7. onExpansionChanged回调函数允许你在应用栏展开或折叠时执行一些操作。

请注意,虽然示例中包含了一个FloatingActionButton来手动切换扩展状态,但AccordionSliverAppBar本身并不支持从外部直接控制其扩展状态。因此,按钮的点击事件只是用于演示,并不会实际改变应用栏的扩展状态。在实际应用中,你应该依赖用户的交互或内部状态管理来控制应用栏的扩展和折叠。

回到顶部