Button 按钮
按钮用于开始一个即时操作。
何时使用
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
代码演示
import 'package:antd_flutter_example/demo_block.dart';
import 'package:flutter/material.dart';
import 'package:trionesdev_antd_mobile/trionesdev_antd_mobile.dart';
class ButtonPage extends StatefulWidget {
const ButtonPage({super.key});
@override
State<StatefulWidget> createState() => _ButtonPageState();
}
class _ButtonPageState extends State<ButtonPage> {
@override
Widget build(BuildContext context) {
return AntScaffold(
appBar: AntAppBar(
title: Text('Button'),
),
body: ListView(children: [
DemoBlock(
title: "普通使用",
child: Wrap(
direction: Axis.horizontal,
alignment: WrapAlignment.start,
spacing: 4.0,
runSpacing: 4.0,
children: [
AntButton(
type: AntButtonType.primary,
text: 'Primary',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
text: 'Default',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
type: AntButtonType.text,
text: 'Text',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
type: AntButtonType.link,
text: 'Link',
onPressed: () {
print('ElevatedButton');
},
),
],
),
),
DemoBlock(
title: "类型",
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
spacing: 10,
children: [
Wrap(spacing: 4, runSpacing: 4, children: [
AntButton(
text: 'Primary',
color: Color(0xff000000),
variant: AntButtonVariant.solid,
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.outlined,
color: Color(0xff000000),
text: 'Outlined',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.filled,
color: Color(0xff000000),
text: 'Filled',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.text,
color: Color(0xff000000),
text: 'Text',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.link,
color: Color(0xff000000),
text: 'Link',
onPressed: () {
print('ElevatedButton');
},
),
]),
Wrap(spacing: 4, runSpacing: 4, children: [
AntButton(
text: 'Primary',
variant: AntButtonVariant.solid,
color: Color(0xff1677FF),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.outlined,
color: Color(0xff1677FF),
text: 'Outlined',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.filled,
color: Color(0xff1677FF),
text: 'Filled',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.text,
color: Color(0xff1677FF),
text: 'Text',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.link,
color: Color(0xff1677FF),
text: 'Link',
onPressed: () {
print('ElevatedButton');
},
),
]),
Wrap(spacing: 4, runSpacing: 4, children: [
AntButton(
text: 'Primary',
variant: AntButtonVariant.solid,
color: Color(0xffFF4D4F),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.outlined,
color: Color(0xffFF4D4F),
text: 'Outlined',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.filled,
color: Color(0xffFF4D4F),
text: 'Filled',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.text,
color: Color(0xffFF4D4F),
text: 'Text',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.link,
color: Color(0xffFF4D4F),
text: 'Link',
onPressed: () {
print('ElevatedButton');
},
),
]),
Wrap(spacing: 4, runSpacing: 4, children: [
AntButton(
text: 'Primary',
variant: AntButtonVariant.solid,
color: Color(0xffEB2F96),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.outlined,
color: Color(0xffEB2F96),
text: 'Outlined',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.filled,
color: Color(0xffEB2F96),
text: 'Filled',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.text,
color: Color(0xffEB2F96),
text: 'Text',
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
variant: AntButtonVariant.link,
color: Color(0xffEB2F96),
text: 'Link',
onPressed: () {
print('ElevatedButton');
},
),
]),
],
),
),
DemoBlock(
title: "大小",
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
spacing: 4,
runSpacing: 4,
children: [
AntButton(
text: 'Large',
size: AntSize.large,
color: Color(0xffEB2F96),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
size: AntSize.large,
color: Color(0xffEB2F96),
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
shape: AntButtonShape.circle,
size: AntSize.large,
color: Color(0xffEB2F96),
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
text: 'Middle',
color: Color(0xffEB2F96),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
text: 'Middle',
icon: Icon(Icons.add),
color: Color(0xffEB2F96),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
color: Color(0xffEB2F96),
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
color: Color(0xffEB2F96),
shape: AntButtonShape.circle,
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
text: 'Small',
size: AntSize.small,
color: Color(0xffEB2F96),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
size: AntSize.small,
color: Color(0xffEB2F96),
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
size: AntSize.small,
shape: AntButtonShape.circle,
color: Color(0xffEB2F96),
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
],
),
],
),
),
DemoBlock(
title: "图形",
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(spacing: 4, runSpacing: 4, children: [
AntButton(
shape: AntButtonShape.circle,
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
shape: AntButtonShape.round,
icon: Icon(Icons.add),
)
]),
Wrap(
spacing: 4,
runSpacing: 4,
children: [
AntButton(
text: 'Middle',
shape: AntButtonShape.circle,
color: Color(0xffEB2F96),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
shape: AntButtonShape.round,
color: Color(0xffEB2F96),
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
shape: AntButtonShape.circle,
size: AntSize.small,
color: Color(0xffEB2F96),
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
shape: AntButtonShape.circle,
size: AntSize.middle,
color: Color(0xffEB2F96),
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
shape: AntButtonShape.circle,
size: AntSize.large,
color: Color(0xffEB2F96),
icon: Icon(Icons.add),
onPressed: () {
print('ElevatedButton');
},
),
AntButton(
text: 'Middle',
icon: Icon(Icons.add),
shape: AntButtonShape.circle,
color: Color(0xffEB2F96),
onPressed: () {
print('ElevatedButton');
},
),
],
),
],
),
),
DemoBlock(title: "自定义样式",child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
children: [
AntButton(
style: StateStyle(
style: Style(borderColor: Colors.amber)
),
text: "Button",
)
],
)
],),)
]));
}
}
API
按钮的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| style | 按钮样式 | StateStyle | |
| type | 按钮类型 | AntButtonType:primary,text,link | |
| variant | 设置按钮的变体 | AntButtonVariant:outline,solid,filled,text,link | |
| text | 按钮文字 | String | |
| icon | 按钮图标 | Icon | |
| color | 按钮颜色 | Color | |
| shape | 按钮形状 | AntButtonShape:circle,round | round |
| size | 按钮大小 | AntButtonSize:small,middle,large | middle |
| onPressed | 点击事件 | Function | |
| disabled | 是否禁用 | bool | false |
| block | 是否块级元素 | bool | false |
| danger | 是否危险按钮 | bool | false |