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? | null |
| type | 按钮类型 | AntButtonType? | null |
| variant | 设置按钮的变体 | AntButtonVariant? | null |
| text | 按钮文字 | String? | null |
| icon | 按钮图标 | Widget? | null |
| color | 按钮颜色 | Color? | null |
| shape | 按钮形状 | AntButtonShape | round |
| size | 按钮大小 | AntSize | middle |
| onPressed | 点击事件 | VoidCallback? | null |
| disabled | 是否禁用 | bool? | false |
| block | 是否块级元素 | bool? | false |
| danger | 是否危险按钮 | bool? | false |
| child | 子组件 | Widget? | null |
AntButtonType 枚举值
| 值 | 说明 |
|---|---|
| primary | 主要按钮 |
| text | 文本按钮 |
| link | 链接按钮 |
AntButtonVariant 枚举值
| 值 | 说明 |
|---|---|
| outlined | 描边按钮 |
| solid | 实心按钮 |
| filled | 填充按钮 |
| text | 文本按钮 |
| link | 链接按钮 |
AntButtonShape 枚举值
| 值 | 说明 |
|---|---|
| circle | 圆形 |
| round | 圆角矩形 |
AntSize 枚举值
| 值 | 说明 | 尺寸 |
|---|---|---|
| small | 小尺寸 | 高24px |
| middle | 中尺寸 | 高32px |
| large | 大尺寸 | 高48px |
优先级说明
- child 和 text 属性中，优先使用 child 属性作为按钮内容。
- 当 icon 和 text 都存在时，按钮会同时显示图标和文字。
- 当只有 icon 且没有 text 和 child 时，按钮表现为图标按钮。