Flutter自定义按钮插件tb_custom_button的使用

Flutter自定义按钮插件tb_custom_button的使用

TB Custom Button 插件可以帮助你轻松创建基本或自定义按钮。以下是该插件的功能和使用方法。

特性

iOS

MacOS

Web

开始使用

要使用此插件，请在 pubspec.yaml 文件中添加 tb_custom_button 作为依赖项，并在你的文件中导入它。

import 'package:tb_custom_button/tb_custom_button.dart';

安装

在 pubspec.yaml 文件中添加以下内容：

dependencies:
  ...
  tb_custom_button: ^0.0.2

使用

以下是一些使用示例：

普通按钮

MTSCustomButton(
        primaryColor: const Color.fromARGB(255, 14, 5, 90), // 主色调
        onPrimaryColor: Colors.white, // 文字颜色
        title: "Normal", // 按钮文字
        width: 148, // 按钮宽度
        height: 34, // 按钮高度
        spaceInImageAndTitle: 10, // 图标与文字之间的间距
        onTap: () {}, // 点击事件
        borderRadius: 7.0, // 圆角半径
      );

带图标的按钮

MTSCustomButton(
        primaryColor: const Color(0xFF26bcb3), // 主色调
        onPrimaryColor: Colors.white, // 文字颜色
        title: "Sign Up", // 按钮文字
        width: 148, // 按钮宽度
        imageHeight: 20, // 图标高度
        spaceInImageAndTitle: 10, // 图标与文字之间的间距
        imageWidht: 20, // 图标宽度
        buttonImageNamge: 'assets/icons/smiley_icon.png', // 图标路径
        onTap: () {}, // 点击事件
        borderRadius: 7.0, // 圆角半径
      );

带内联图标的按钮

MTSCustomButton(
        primaryColor: const Color.fromARGB(255, 149, 40, 13), // 主色调
        onPrimaryColor: Colors.white, // 文字颜色
        title: "Login", // 按钮文字
        width: 148, // 按钮宽度
        buttonIcon: Icons.login, // 图标
        imageHeight: 20, // 图标高度
        imageWidht: 20, // 图标宽度
        spaceInImageAndTitle: 5, // 图标与文字之间的间距
        height: 50, // 按钮高度
        onTap: () {
          log("Welcome"); // 点击事件
        },
        borderRadius: 25.0, // 圆角半径
      );

右侧图标按钮

MTSCustomButton(
        primaryColor: const Color.fromARGB(255, 20, 5, 1), // 主色调
        onPrimaryColor: Colors.white, // 文字颜色
        title: "Right Side Image", // 按钮文字
        width: 248, // 按钮宽度
        buttonIcon: Icons.login, // 图标
        imageHeight: 20, // 图标高度
        imageWidht: 20, // 图标宽度
        isIconOrImageRightSide: true, // 图标位于右侧
        spaceInImageAndTitle: 5, // 图标与文字之间的间距
        height: 50, // 按钮高度
        onTap: () {
          log("Welcome"); // 点击事件
        },
        borderRadius: 25.0, // 圆角半径
      );

列表式按钮

MTSCustomButton(
        primaryColor: const Color.fromARGB(255, 54, 137, 2), // 主色调
        onPrimaryColor: Colors.white, // 文字颜色
        title: "Logout", // 按钮文字
        width: 148, // 按钮宽度
        buttonIcon: Icons.logout, // 图标
        imageHeight: 20, // 图标高度
        imageWidht: 20, // 图标宽度
        height: 50, // 按钮高度
        isColumnButton: true, // 列表样式按钮
        spaceInImageAndTitle: 0, // 图标与文字之间的间距
        side: const BorderSide(color: Colors.white, width: 2), // 边框样式
        onTap: () {
          log("Welcome"); // 点击事件
        },
        borderRadius: 25.0, // 圆角半径
      );

列表式右侧图标按钮

MTSCustomButton(
        primaryColor: const Color.fromARGB(255, 54, 137, 2), // 主色调
        onPrimaryColor: Colors.white, // 文字颜色
        title: "Sample", // 按钮文字
        width: 248, // 按钮宽度
        buttonIcon: Icons.logout, // 图标
        imageHeight: 20, // 图标高度
        imageWidht: 20, // 图标宽度
        height: 50, // 按钮高度
        isColumnButton: true, // 列表样式按钮
        isIconOrImageRightSide: true, // 图标位于右侧
        spaceInImageAndTitle: 0, // 图标与文字之间的间距
        side: const BorderSide(color: Colors.white, width: 2), // 边框样式
        onTap: () {
          log("Welcome"); // 点击事件
        },
        borderRadius: 25.0, // 圆角半径
      );

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

1 回复

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


tb_custom_button 是一个自定义的 Flutter 按钮插件，它允许你创建具有自定义样式和行为的按钮。以下是如何在 Flutter 项目中使用 tb_custom_button 的基本步骤：

1. 添加依赖

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

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

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

2. 导入包

在需要使用 tb_custom_button 的 Dart 文件中，导入该包：

import 'package:tb_custom_button/tb_custom_button.dart';

3. 使用 TbCustomButton

TbCustomButton 提供了多种自定义选项，你可以根据需要配置按钮的外观和行为。

以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TbCustomButton Example'),
        ),
        body: Center(
          child: TbCustomButton(
            onPressed: () {
              print('Button Pressed!');
            },
            text: 'Click Me',
            textColor: Colors.white,
            backgroundColor: Colors.blue,
            borderRadius: 8.0,
            padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
            elevation: 5.0,
          ),
        ),
      ),
    );
  }
}

4. 参数说明

TbCustomButton 提供了以下常用参数：

  • onPressed: 按钮点击时的回调函数。
  • text: 按钮上显示的文本。
  • textColor: 文本颜色。
  • backgroundColor: 按钮背景颜色。
  • borderRadius: 按钮的圆角半径。
  • padding: 按钮的内边距。
  • elevation: 按钮的阴影高度。

5. 自定义样式

你可以通过调整参数来进一步自定义按钮的样式。例如，你可以设置不同的颜色、圆角、内边距等。

TbCustomButton(
  onPressed: () {
    print('Custom Button Pressed!');
  },
  text: 'Custom Button',
  textColor: Colors.black,
  backgroundColor: Colors.yellow,
  borderRadius: 20.0,
  padding: EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
  elevation: 10.0,
),
回到顶部