Flutter自定义按钮插件art_buttons_kh的使用
Flutter 自定义按钮插件 art_buttons_kh 的使用
Art Buttons kh 包允许你在 Flutter 应用程序中添加漂亮的自定义按钮。这是一个可定制的按钮库，提供了多种预设样式的按钮，例如平面按钮、凸起按钮和图标按钮。此外，该库还支持对按钮的颜色、形状和文本进行自定义。
Art Buttons kh 是由 Voern Kimsoer 开发的开源库。
特性
- 多种按钮样式可供选择，包括平面按钮、凸起按钮和图标按钮。
- 支持自定义按钮的颜色、形状和文本。
- 完全兼容 Flutter 的 Material Design 指南。
- 可以使用轮廓按钮、普通按钮和圆形按钮样式。
安装
- 将最新版本的包添加到你的
pubspec.yaml文件中（然后运行dart pub get）：
dependencies:
art_buttons_kh: ^0.0.7
- 导入包并在你的 Flutter 应用中使用它：
import 'package:art_buttons_kh/art_buttons_kh.dart';
自定义
Art Buttons Kh 小部件支持许多属性，可以用来定制按钮的外观，包括：
text: 显示在按钮上的文本。onPressed: 当按钮被按下时调用的回调函数。color: 按钮的背景颜色。backgroundColor: 按钮背景的颜色。borderRadius: 按钮角的半径。margin: 按钮文本周围的填充量。
示例
以下是一个创建具有白色文本的按钮的示例：
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: Colors.white
)
),
SizedBox(width: 10),
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: Colors.white,
radius: 20,
),
),
SizedBox(
width: 10,
),
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: Colors.white,
customizeBorderRadius: const BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
),
],
),
示例代码
以下是完整的示例代码：
import 'package:flutter/material.dart';
import 'package:art_buttons_kh/art_buttons_kh.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const ButtonListStyleView(),
);
}
}
class LoginView extends StatefulWidget {
const LoginView({Key? key}) : super(key: key);
[@override](/user/override)
_LoginViewState createState() => _LoginViewState();
}
class _LoginViewState extends State<LoginView> {
final _formKey = GlobalKey<FormState>();
String _email = '';
String _password = '';
void _submitForm() {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// TODO: 实现登录功能
}
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login'),
),
body: Padding(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return '请输入您的邮箱';
}
return null;
},
onSaved: (value) {
_email = value!;
},
),
const SizedBox(height: 16),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return '请输入您的密码';
}
return null;
},
onSaved: (value) {
_password = value!;
},
),
SizedBox(height: 32),
ArtButtonsKh(
onPressed: _submitForm,
text: 'Login',
backgroundColor: Theme.of(context).primaryColor,
),
ArtButtonsKh(
margin: const EdgeInsets.only(top: 10),
onPressed: _submitForm,
text: 'Save',
backgroundColor: Colors.amber,
),
ArtButtonsKh(
margin: const EdgeInsets.only(top: 10),
onPressed: _submitForm,
text: 'Closed',
backgroundColor: Colors.redAccent,
),
ArtButtonsKh(
prefixesIcons: const Icon(Icons.add),
margin: const EdgeInsets.only(top: 10),
onPressed: _submitForm,
text: 'Disabled',
backgroundColor: Colors.brown,
suffixesIcons: const Icon(Icons.add),
isDisable: true,
),
ArtButtonsKh(
margin: const EdgeInsets.only(top: 10),
onPressed: _submitForm,
isCircleButton: true,
backgroundColor: Color(0xffF23358),
circleIcon: Padding(
padding: const EdgeInsets.all(5),
child: Icon(
Icons.add,
size: 16,
),
),
),
ArtButtonsKh(
margin: const EdgeInsets.only(top: 10),
onPressed: _submitForm,
isCircleButton: true,
isOutlineButton: true,
backgroundColor: Colors.yellow,
elevation: 1,
circleIcon: const Padding(
padding: EdgeInsets.all(10),
child: Icon(
Icons.add,
size: 10,
),
),
),
],
),
),
),
);
}
}
class ButtonListStyleView extends StatefulWidget {
const ButtonListStyleView({Key? key}) : super(key: key);
[@override](/user/override)
State<ButtonListStyleView> createState() => _ButtonListStyleViewState();
}
class _ButtonListStyleViewState extends State<ButtonListStyleView> {
[@override](/user/override)
Widget build(BuildContext context) {
var color = Color(0xffF23358);
return Scaffold(
appBar: AppBar(
title: const Text("所有 ArtButtonsKh 列表"),
),
body: ListView(
padding: EdgeInsets.all(10),
children: [
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: ArtButtonsKh(onPressed: () {}, text: "Button", backgroundColor: color)),
SizedBox(
width: 10,
),
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
radius: 20,
),
),
SizedBox(
width: 10,
),
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
customizeBorderRadius: const BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
),
],
),
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
prefixesIcons: Icon(Icons.add),
)),
const SizedBox(
width: 10,
),
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
radius: 20,
prefixesIcons: Icon(Icons.add),
),
),
SizedBox(
width: 10,
),
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
prefixesIcons: Icon(Icons.add),
),
),
],
),
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
suffixesIcons: Icon(Icons.add),
)),
const SizedBox(
width: 10,
),
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
radius: 20,
suffixesIcons: Icon(Icons.add),
),
),
SizedBox(
width: 10,
),
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
suffixesIcons: Icon(Icons.add),
),
),
],
),
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
suffixesIcons: Icon(Icons.add),
prefixesIcons: Icon(Icons.add),
fontSize: 10,
)),
const SizedBox(
width: 10,
),
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
radius: 20,
fontSize: 10,
suffixesIcons: Icon(Icons.add),
prefixesIcons: Icon(Icons.add),
),
),
SizedBox(
width: 10,
),
Expanded(
child: ArtButtonsKh(
onPressed: () {},
text: "Button",
backgroundColor: color,
fontSize: 10,
suffixesIcons: Icon(
Icons.add,
size: 20,
),
prefixesIcons: Icon(
Icons.add,
size: 25,
),
),
),
],
),
const SizedBox(height: 20),
],
),
);
}
}
更多关于Flutter自定义按钮插件art_buttons_kh的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义按钮插件art_buttons_kh的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用自定义按钮插件 art_buttons_kh 的示例代码。假设你已经通过 pubspec.yaml 文件添加了该插件依赖。
1. 添加依赖
首先，在你的 pubspec.yaml 文件中添加 art_buttons_kh 依赖：
dependencies:
flutter:
sdk: flutter
art_buttons_kh: ^latest_version # 替换为最新版本号
然后运行 flutter pub get 来获取依赖。
2. 导入包
在你的 Dart 文件中导入 art_buttons_kh 包：
import 'package:art_buttons_kh/art_buttons_kh.dart';
3. 使用自定义按钮
下面是一个使用 ArtButtonsKh 插件创建自定义按钮的示例代码：
import 'package:flutter/material.dart';
import 'package:art_buttons_kh/art_buttons_kh.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ArtButtonsKh Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 使用默认样式的按钮
ArtButton(
text: 'Default Button',
onPressed: () {
print('Default Button Pressed');
},
),
// 自定义样式的按钮
ArtButton.custom(
color: Colors.red,
textColor: Colors.white,
borderRadius: BorderRadius.circular(20),
text: 'Custom Button',
onPressed: () {
print('Custom Button Pressed');
},
),
// 使用图标和文本的按钮
ArtButton.icon(
icon: Icons.star,
text: 'Icon Button',
onPressed: () {
print('Icon Button Pressed');
},
),
// 禁用状态的按钮
ArtButton(
text: 'Disabled Button',
onPressed: null, // 设置为null来禁用按钮
),
],
),
),
);
}
}
解释
- 导入包：首先导入
art_buttons_kh包。 - 默认按钮：使用
ArtButton创建一个默认样式的按钮。 - 自定义按钮：使用
ArtButton.custom创建一个自定义样式的按钮，可以指定颜色、文本颜色、圆角等。 - 图标按钮：使用
ArtButton.icon创建一个带有图标的按钮。 - 禁用按钮：通过将
onPressed回调设置为null来禁用按钮。
请确保你使用的 art_buttons_kh 版本支持上述用法，因为插件的API可能会随着版本更新而变化。如果有任何疑问或需要更多高级用法，请参考插件的官方文档或仓库。
