Flutter自定义按钮插件wbutton

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

在本教程中，我们将展示如何使用Flutter插件wbutton_easier来创建一个自定义按钮。通过此插件，您可以轻松地定制按钮的样式和行为。

Getting started（开始使用）

要开始使用wbutton_easier插件，请确保您的项目已正确配置并包含该依赖项。如果您尚未添加此依赖项，请将其添加到pubspec.yaml文件中：

dependencies:
  wbutton_easier: ^版本号

然后运行以下命令以安装依赖项：

flutter pub get

Example（示例）

以下是一个简单的示例，展示了如何使用WButton小部件来自定义按钮的外观和功能。

import 'package:flutter/material.dart';
import 'package:wbutton_easier/widget/w_button.dart';

void main() {
  runApp(const MainApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("wbutton_easier 示例"),
        ),
        body: Center(
          child: WButton(
            onTap: () {
              // 按钮点击时执行的操作
              print("按钮被点击了！");
            },
            text: "提交",
            borderRadius: 10, // 设置圆角半径
            textStyle: const TextStyle(
              fontSize: 22, // 设置字体大小
              color: Colors.white, // 设置文本颜色
              fontWeight: FontWeight.w500, // 设置字体粗细
            ),
            backgroundColor: Colors.blue, // 设置按钮背景颜色
            // disabled: false, // 是否禁用按钮
            // loading: false, // 是否显示加载状态
          ),
        ),
      ),
    );
  }
}

wuwangju 1楼•1 个月前

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

wbutton_easier 是一个用于 Flutter 的自定义按钮插件，旨在简化按钮的创建和样式化过程。它提供了多种预定义的按钮样式，并且允许开发者轻松自定义按钮的外观和行为。

安装

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

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

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

基本用法

wbutton_easier 提供了多种按钮类型，如 WButton、WIconButton、WTextButton 等。以下是一些基本的使用示例：

1. 使用 `WButton`

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WButton Easier Example'),
      ),
      body: Center(
        child: WButton(
          onPressed: () {
            print('Button Pressed!');
          },
          text: 'Click Me',
          color: Colors.blue,
          textColor: Colors.white,
        ),
      ),
    );
  }
}

2. 使用 `WIconButton`

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WButton Easier Example'),
      ),
      body: Center(
        child: WIconButton(
          onPressed: () {
            print('Icon Button Pressed!');
          },
          icon: Icons.favorite,
          color: Colors.red,
          iconColor: Colors.white,
        ),
      ),
    );
  }
}

3. 使用 `WTextButton`

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WButton Easier Example'),
      ),
      body: Center(
        child: WTextButton(
          onPressed: () {
            print('Text Button Pressed!');
          },
          text: 'Text Button',
          textColor: Colors.blue,
        ),
      ),
    );
  }
}

自定义按钮样式

wbutton_easier 允许你通过传递不同的参数来自定义按钮的外观。以下是一些常见的自定义选项：

color: 按钮的背景颜色。
textColor: 按钮文本的颜色。
iconColor: 按钮图标的颜色。
borderRadius: 按钮的圆角半径。
padding: 按钮的内边距。
elevation: 按钮的阴影高度。

示例：自定义按钮样式

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WButton Easier Example'),
      ),
      body: Center(
        child: WButton(
          onPressed: () {
            print('Custom Button Pressed!');
          },
          text: 'Custom Button',
          color: Colors.green,
          textColor: Colors.white,
          borderRadius: 20.0,
          padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 15.0),
          elevation: 5.0,
        ),
      ),
    );
  }
}

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