Flutter自适应应用栏插件adaptive_appbar的使用

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

Flutter 自适应应用栏插件 adaptive_appbar 的使用

简介

adaptive_appbar 是一个用于创建适应不同设备（如移动设备和网页）的应用栏的模型。它可以轻松地实现根据屏幕大小变化的应用栏。

特点

  • 响应式：自动调整应用栏的大小以适应不同的设备。
  • 易于实现：使用简单，只需几行代码即可集成。
  • 完全可定制化：可以自定义应用栏的各种属性。

实现

首先，确保你已经在 pubspec.yaml 文件中添加了 adaptive_appbar 依赖项：

dependencies:
  adaptive_appbar: ^x.x.x

然后，你可以通过以下方式实现 AdaptiveAppBar：

AdaptiveAppBar(
    context,
    title: "Awesome AppBar",
    onBackPressed: () {},
);

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 AdaptiveAppBar：

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 设置主题
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
      ),
      // 主页面
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 使用 AdaptiveAppBar
      appBar: AdaptiveAppBar(
        context,
        title: "Awesome AppBar",
        onBackPressed: () {},
        
        // 可选参数：
        // backButtonTitle: "Discard", // 显示在大屏幕上后退按钮的标题
        // backgroundColor: Colors.white, // 自定义背景颜色
        // foregroundColor: Colors.blue, // 自定义前景颜色
        // elevation: 1, // 自定义阴影高度
        // widget: const Icon(Icons.access_alarm), // 应用栏末尾的自定义小部件
      ),
      body: Center(
        child: Text("Hello, Adaptive AppBar!", style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

自定义

AdaptiveAppBar 提供了许多参数来帮助你自定义应用栏的外观和行为。以下是一些常用的自定义选项：

AdaptiveAppBar(
    context,
    title: "Awesome AppBar",
    onBackPressed: () {},

    // 后退按钮的标题（仅在大屏幕上显示）
    backButtonTitle: "Discard",
    // 自定义背景颜色
    backgroundColor: Colors.white,
    // 自定义前景颜色
    foregroundColor: Colors.blue,
    // 自定义阴影高度
    elevation: 1,
    // 应用栏末尾的自定义小部件
    widget: const Icon(Icons.access_alarm),
);

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

1 回复

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


当然，以下是一个关于如何在Flutter中使用adaptive_appbar插件的示例代码。这个插件可以帮助你实现一个自适应的应用栏，当用户滚动页面内容时，应用栏可以相应地折叠或展开。

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

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

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

接下来是一个完整的示例代码，展示了如何使用adaptive_appbar插件：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  final List<String> items = List<String>.generate(100, (i) => "Item ${i + 1}");
  late ScrollController _scrollController;
  late AdaptiveAppBarController _adaptiveAppBarController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _adaptiveAppBarController = AdaptiveAppBarController();

    // 监听滚动事件
    _scrollController.addListener(() {
      // 根据滚动位置调整AppBar的扩展状态
      _adaptiveAppBarController.updateAppBarState(
        expanded: _scrollController.offset < 100, // 当滚动超过100时折叠AppBar
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AdaptiveAppBar(
        controller: _adaptiveAppBarController,
        title: Text('Adaptive AppBar Example'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 打开搜索框的逻辑
            },
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index]),
          );
        },
        controller: _scrollController,
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    _adaptiveAppBarController.dispose();
    super.dispose();
  }
}

代码说明：

  1. 依赖引入：

    • 在pubspec.yaml中添加adaptive_appbar依赖。

  2. 主应用入口：

    • MyApp是一个简单的MaterialApp，它包含了一个MyHomePage作为首页。

  3. 首页：

    • MyHomePage是一个有状态的Widget，它包含一个列表和一个滚动控制器。
    • initState方法中，我们初始化了滚动控制器和自适应应用栏控制器，并添加了一个滚动监听器来更新应用栏的扩展状态。
    • build方法中，我们构建了一个Scaffold，它包含了一个AdaptiveAppBar和一个ListView.builder。
    • AdaptiveAppBar的controller属性被设置为_adaptiveAppBarController，以便我们可以控制它的扩展和折叠状态。
    • ListView.builder的controller属性被设置为_scrollController，这样我们可以监听它的滚动事件。

  4. 资源释放：

    • 在dispose方法中，我们释放了滚动控制器和自适应应用栏控制器，以避免内存泄漏。

这样，当用户滚动页面内容时，应用栏会根据滚动位置自动折叠或展开。你可以根据需要调整_scrollController.offset < 100这个条件，以改变应用栏折叠的时机。

回到顶部