Flutter持久化头部自适应插件persistent_header_adaptive的使用

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

Flutter持久化头部自适应插件 persistent_header_adaptive 的使用

persistent_header_adaptive 是一个用于创建具有自适应高度的 SliverPersistentHeader 的 Flutter 插件。它允许你在不指定固定高度的情况下，创建一个灵活的头部组件。

Features（特性）

  • 使用该插件可以创建一个无需指定高度的 SliverPersisteHeader。

Getting Started（开始使用）

首先，在你的项目的 pubspec.yaml 文件中添加该插件依赖：

dependencies:
  ...
  persistent_header_adaptive: ^2.1.0

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

Usage（使用方法）

你可以创建自己的头部小部件，例如：

class Header extends StatelessWidget {
  const Header({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      color: Colors.grey,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text('line 1'),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              Text('line 2.1'),
              Text('line 2.2'),
            ],
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {},
            child: const Text('button'),
          ),
        ],
      ),
    );
  }
}

接着，使用 AdaptiveHeightSliverPersistentHeader 将这个头部小部件放入 CustomScrollView 中作为 SliverPersistentHeader：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Homepage(),
    );
  }
}

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

  @override
  State<Homepage> createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            const AdaptiveHeightSliverPersistentHeader(
              initialHeight: 20,
              floating: true,
              child: Header(),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => Card(
                  margin: const EdgeInsets.all(20),
                  child: Padding(
                    padding: const EdgeInsets.all(20),
                    child: Text('card $index'),
                  ),
                ),
                childCount: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

  • initialHeight: 初始高度。
  • floating: 是否浮动。
  • child: 头部内容的小部件。
  • needRepaint: 是否需要重绘。

以上就是一个完整的示例 demo，展示了如何在 Flutter 应用中使用 persistent_header_adaptive 插件来实现一个自适应高度的持久化头部。


更多关于Flutter持久化头部自适应插件persistent_header_adaptive的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter持久化头部自适应插件persistent_header_adaptive的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用persistent_header_adaptive插件的一个基本示例。这个插件通常用于创建具有自适应高度的持久化头部（Sticky Header）的滚动视图。

首先，你需要在你的pubspec.yaml文件中添加该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  persistent_header_adaptive: ^最新版本号  # 替换为实际的最新版本号

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

接下来是一个简单的示例代码，展示如何使用persistent_header_adaptive插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Persistent Header Adaptive Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PersistentHeaderDemo(),
    );
  }
}

class PersistentHeaderDemo extends StatefulWidget {
  @override
  _PersistentHeaderDemoState createState() => _PersistentHeaderDemoState();
}

class _PersistentHeaderDemoState extends State<PersistentHeaderDemo> with SingleTickerProviderStateMixin {
  final List<String> items = List.generate(100, (index) => "Item ${index + 1}");
  double _headerHeight = 200.0;
  double _minHeaderHeight = 60.0;
  bool _isExpanded = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Persistent Header Adaptive Demo'),
      ),
      body: PersistentHeaderAdaptive(
        header: _buildHeader(),
        content: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
        minHeaderHeight: _minHeaderHeight,
        onHeaderHeightChange: (newHeight) {
          setState(() {
            _headerHeight = newHeight;
          });
        },
      ),
    );
  }

  Widget _buildHeader() {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      height: _headerHeight,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(16.0),
          bottomRight: Radius.circular(16.0),
        ),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Header',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
            SizedBox(height: 10),
            Text(
              'Tap to toggle expansion',
              style: TextStyle(color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含持久化头部的PersistentHeaderAdaptive组件。头部的高度是动态的，可以通过点击头部来切换展开和收缩状态。注意，这个示例没有实际实现点击头部来切换展开和收缩的逻辑，这部分需要你根据自己的需求来实现。

PersistentHeaderAdaptive组件接受以下主要参数：

  • header：头部内容，通常是一个Widget。
  • content：内容部分，通常是一个滚动视图，如ListView。
  • minHeaderHeight：头部收缩后的最小高度。
  • onHeaderHeightChange：头部高度变化时的回调函数，可以更新状态。

你可以根据自己的需求进一步自定义和扩展这个示例。

回到顶部