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

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

一个用于核心按钮的Flutter小部件。

支持平台

  • Flutter Android
  • Flutter iOS

安装

  1. 在你的pubspec.yaml文件中添加最新版本的包（然后运行dart pub get）：
dependencies:
  pm_core_button: ^0.0.1
  1. 导入该包并在你的Flutter应用中使用它：
import 'package:pm_core_button/pm_core_button.dart';

特性

你可以修改以下属性：

  • height：按钮的高度
  • width：按钮的宽度
  • text：按钮上显示的文字
  • isEnabled：是否启用按钮的功能
  • borderColor：边框颜色
  • textColor：文字颜色
  • fontFamily：字体族
  • shape：按钮形状

使用示例

下面是一个使用PMCoreButton的简单示例：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('PM Core Button Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PMCoreButton(
                text: 'Filled Button', // 按钮上的文本
                onPressed: () {
                  print('Filled Button pressed'); // 按钮点击事件
                },
                isEnabled: true, // 启用按钮
                textColor: Colors.white, // 文字颜色
                fillColor: Colors.deepPurpleAccent[100], // 填充颜色
                radius: 20.0, // 圆角半径
              ),
              const SizedBox(height: 20), // 间距
              PMCoreButton(
                text: 'Border Button', // 按钮上的文本
                onPressed: () {
                  print('Border Button pressed'); // 按钮点击事件
                },
                isEnabled: true, // 启用按钮
                borderColor: Colors.deepPurpleAccent[100], // 边框颜色
                borderWidth: 2.0, // 边框宽度
                radius: 20.0, // 圆角半径
              ),
              const SizedBox(height: 20), // 间距
              PMCoreButton(
                text: 'Disabled Button', // 按钮上的文本
                onPressed: () {
                  print('Disabled Button pressed'); // 按钮点击事件
                },
                isEnabled: false, // 禁用按钮
                fillColor: Colors.grey, // 填充颜色
                radius: 20.0, // 圆角半径
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


pm_core_button 是一个自定义的 Flutter 按钮插件，它提供了多种样式和功能的按钮，可以方便地在 Flutter 项目中使用。以下是如何使用 pm_core_button 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  pm_core_button: ^1.0.0  # 请根据实际版本号进行替换

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

2. 导入插件

在你的 Dart 文件中导入 pm_core_button 插件：

import 'package:pm_core_button/pm_core_button.dart';

3. 使用 PMCoreButton

PMCoreButton 提供了多种构造函数来创建不同样式的按钮。以下是一些常见的用法示例：

基本按钮

PMCoreButton(
  onPressed: () {
    // 按钮点击事件
    print('Button Pressed');
  },
  child: Text('Click Me'),
)

带有图标的按钮

PMCoreButton.icon(
  onPressed: () {
    // 按钮点击事件
    print('Button with Icon Pressed');
  },
  icon: Icon(Icons.favorite),
  label: Text('Like'),
)

自定义样式的按钮

PMCoreButton(
  onPressed: () {
    // 按钮点击事件
    print('Custom Styled Button Pressed');
  },
  child: Text('Custom Style'),
  color: Colors.blue,
  textColor: Colors.white,
  borderRadius: BorderRadius.circular(10.0),
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
)

禁用按钮

PMCoreButton(
  onPressed: null,  // 设置为 null 以禁用按钮
  child: Text('Disabled Button'),
)

加载状态的按钮

PMCoreButton(
  onPressed: () {
    // 模拟异步操作
    Future.delayed(Duration(seconds: 2), () {
      print('Async Operation Completed');
    });
  },
  child: Text('Loading Button'),
  isLoading: true,  // 设置为 true 以显示加载状态
)

4. 自定义主题

你可以通过 PMCoreButtonTheme 来自定义按钮的主题样式：

PMCoreButtonTheme(
  data: PMCoreButtonThemeData(
    color: Colors.green,
    textColor: Colors.white,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: PMCoreButton(
    onPressed: () {
      print('Themed Button Pressed');
    },
    child: Text('Themed Button'),
  ),
)
回到顶部