Flutter自定义浮动芯片插件chips_floating_custom的使用

Flutter自定义浮动芯片插件chips_floating_custom的使用

ChipsFloating

pub package

ChipsFloating 是一个 Flutter 插件，允许你在应用程序中以浮动气泡的形式展示和管理关键词。

安装

要在你的 Flutter 项目中使用 ChipsFloating，请在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  chips_floating: ^1.2.2

使用

要使用 ChipsFloating，只需将该组件添加到你的 widget 树中，并根据需要配置其属性：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ChipsFloating Example'),
        ),
        body: Center(
          child: ChipsFloating(
            inputDecoration: InputDecoration(
              labelText: '添加关键词',
            ),
            controller: TextEditingController(),
            keywords: [], // 关键词列表
            maxKeywords: 5, // 关键词的最大数量限制
            maxKeywordsToastMessage: '已达到关键词最大数量限制！',
            displayChipsBelow: true, // 显示气泡在输入框下方
            chipColor: Colors.blueAccent, // 气泡颜色
            toastBackgroundColor: Colors.red, // 提示信息背景色
            toastTextColor: Colors.white, // 提示信息文字颜色
            deleteIconColorChip: Colors.black, // 删除图标颜色
            spacingChip: 8.0, // 气泡之间的水平间距
            runSpacingChip: 8.0, // 多行气泡之间的垂直间距
            elevationChip: 3, // 气泡阴影高度
            spacingElement: 10, // 元素之间的垂直间距
            directionScroll: Axis.vertical, // 气泡滚动方向
            deleteIconChip: Icon(Icons.cancel), // 气泡内的删除图标
            textStyleChip: TextStyle(color: Colors.white), // 气泡内文字样式
            borderRadius: BorderRadius.circular(20.0), // 气泡圆角半径
            fontSizeToast: 14, // 提示信息字体大小
            createTagOnSubmit: true, // 表单提交时创建标签
            showSaveBotton: true, // 显示保存按钮
            textBotton: '添加', // 保存按钮文本
            textStyleBotton: TextStyle(fontSize: 16), // 保存按钮文字样式
            heightBotton: 40, // 保存按钮高度
            widthBotton: 100, // 保存按钮宽度
            boxDecorationBotton: BoxDecoration(
              color: Colors.blue, // 保存按钮背景色
              borderRadius: BorderRadius.circular(10.0), // 保存按钮圆角半径
            ),
            spacingTextBotton: 8, // 输入框与保存按钮之间的垂直间距
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义浮动芯片插件chips_floating_custom的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义浮动芯片插件chips_floating_custom的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


chips_floating_custom 是一个用于在 Flutter 中创建自定义浮动芯片的小插件。虽然没有官方文档或广泛的使用案例，但通常这种插件允许开发者创建类似于 Material Design 中的浮动操作按钮（Floating Action Button, FAB）的芯片（Chip），并且可以根据需要自定义其外观和行为。

以下是一个简单的使用示例，展示如何使用 chips_floating_custom 插件来创建一个自定义的浮动芯片。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  chips_floating_custom: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 使用 FloatingChip 组件

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

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

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

class FloatingChipDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Floating Chip Demo'),
      ),
      body: Center(
        child: Text('Press the floating chip!'),
      ),
      floatingActionButton: FloatingChip(
        label: Text('Custom Chip'),
        backgroundColor: Colors.blue,
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('You pressed the chip!')),
          );
        },
      ),
    );
  }
}

3. 解释代码

  • FloatingChip: 这是一个类似于 FloatingActionButton 的浮动芯片组件。你可以在 Scaffold 的 floatingActionButton 属性中使用它。
  • label: 这是芯片上显示的文本。
  • backgroundColor: 设置芯片的背景颜色。
  • onPressed: 当用户点击芯片时触发的回调函数。

4. 自定义更多属性

你可以根据需要自定义更多的属性，例如图标、形状、大小等。具体的属性取决于 chips_floating_custom 插件的实现。

FloatingChip(
  label: Text('Custom Chip'),
  backgroundColor: Colors.green,
  icon: Icon(Icons.add),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
  ),
  onPressed: () {
    // Handle chip press
  },
)
回到顶部