Flutter书签图标按钮插件awesome_bookmark_icon_button的使用

Flutter书签图标按钮插件awesome_bookmark_icon_button的使用

特性

这是一个非常简单但功能强大的书签按钮，无需任何外部依赖。

开始使用

使用起来非常容易。

使用方法

以下是一个简单的示例代码：

import 'package:flutter/material.dart';
import 'package:awesome_bookmark_icon_button/awesome_bookmark_icon_button.dart'; // 导入包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BookmarkButtonExample(), // 主页面
    );
  }
}

class BookmarkButtonExample extends StatefulWidget {
  @override
  _BookmarkButtonExampleState createState() => _BookmarkButtonExampleState();
}

class _BookmarkButtonExampleState extends State<BookmarkButtonExample> {
  bool _isSaved = false; // 定义一个布尔值来控制书签的状态

  void _toggleBookmark() {
    setState(() {
      _isSaved = !_isSaved; // 切换书签状态
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('书签图标按钮示例'),
      ),
      body: Center(
        child: BookMarkIconButton( // 使用BookMarkIconButton组件
          isSaved: _isSaved, // 根据布尔值设置初始状态
          onPressed: _toggleBookmark, // 点击时调用切换函数
        ),
      ),
    );
  }
}

说明

  1. 导入包
    首先需要在 pubspec.yaml 文件中添加 awesome_bookmark_icon_button 包，并运行 flutter pub get 来安装它：
    dependencies:
  awesome_bookmark_icon_button: ^1.0.0

更多关于Flutter书签图标按钮插件awesome_bookmark_icon_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter书签图标按钮插件awesome_bookmark_icon_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


awesome_bookmark_icon_button 是一个用于在 Flutter 应用中创建书签图标按钮的插件。它允许你轻松地切换书签状态，并在用户点击时触发回调。以下是如何使用这个插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  awesome_bookmark_icon_button: ^1.0.0  # 请确保使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 awesome_bookmark_icon_button 包：

import 'package:awesome_bookmark_icon_button/awesome_bookmark_icon_button.dart';

3. 使用 AwesomeBookmarkIconButton

你可以在你的 Flutter 应用中使用 AwesomeBookmarkIconButton 组件。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Bookmark Icon Button Example'),
        ),
        body: Center(
          child: BookmarkExample(),
        ),
      ),
    );
  }
}

class BookmarkExample extends StatefulWidget {
  @override
  _BookmarkExampleState createState() => _BookmarkExampleState();
}

class _BookmarkExampleState extends State<BookmarkExample> {
  bool isBookmarked = false;

  @override
  Widget build(BuildContext context) {
    return AwesomeBookmarkIconButton(
      isBookmarked: isBookmarked,
      onPressed: () {
        setState(() {
          isBookmarked = !isBookmarked;
        });
        print('Bookmark state changed: $isBookmarked');
      },
    );
  }
}

4. 属性说明

AwesomeBookmarkIconButton 组件的主要属性包括：

  • isBookmarked: 一个布尔值，表示当前的书签状态。如果为 true，则显示为已书签状态；如果为 false，则显示为未书签状态。
  • onPressed: 当用户点击按钮时触发的回调函数。通常在这里更新 isBookmarked 状态。

5. 自定义样式

你可以通过传递其他参数来自定义按钮的样式，例如图标大小、颜色等。以下是一些可选参数：

  • size: 图标的大小，默认为 24.0。
  • color: 图标的颜色，默认为 Colors.black。
  • bookmarkedColor: 书签状态时的图标颜色，默认为 Colors.blue。

例如：

AwesomeBookmarkIconButton(
  isBookmarked: isBookmarked,
  onPressed: () {
    setState(() {
      isBookmarked = !isBookmarked;
    });
  },
  size: 32.0,
  color: Colors.grey,
  bookmarkedColor: Colors.red,
)
回到顶部