1. FlatButton
在 Flutter 中,FlatButton 用于创建高度为 0 的平面按钮。
FlatButton构造函数:
const FlatButton(
{Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ValueChanged<bool> onHighlightChanged,
MouseCursor mouseCursor,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
ShapeBorder shape,
Clip clipBehavior: Clip.none,
FocusNode focusNode,
bool autofocus: false,
MaterialTapTargetSize materialTapTargetSize,
@required Widget child}
)
FlatButton.icon 构造函数:
FlatButton.icon(
{Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ValueChanged<bool> onHighlightChanged,
MouseCursor mouseCursor,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Clip clipBehavior,
FocusNode focusNode,
bool autofocus,
MaterialTapTargetSize materialTapTargetSize,
@required Widget icon,
@required Widget label}
)
FlatButton 可以用在工具栏、对话框等中。但通常需要突出显示它以免给用户造成混淆。如果您有意使用没有边框的FlatButton,则应将其放在上下文的适当位置。避免将 FlatButton 放置在与其他内容混合的地方,例如列表的中间。
如果 callback: onPressed 和 onLongPress 函数都没有指定,FlatButton 将被禁用并且触摸时没有响应。此外,它的颜色将由 disableColor 属性而不是 color 属性指示。
FlatButton 的最小尺寸是 88x36,但它可以被 ButtomTheme 覆盖。
2. FlatterButton示例
在下面的示例中,它由两个 FlatButton 组成,一个最简单的 FlatButton(仅包含一个文本标签)和另一个已设置背景和文本颜色的 FlatButton。
示例代码 -
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title of Application',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
// backgroundColor: Color(0xffF4F6F6),
appBar: AppBar(
title: Text("FlatButton Example"),
),
body: Center (
child: Row (
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FlatButton (
child: Text("Default Flat Button"),
onPressed: () {},
),
FlatButton (
child: Text("Flat Button with Color"),
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
)
],
)
)
);
}
}
运行上面示例代码,得到以下结果 -
3. child属性
child属性是 FlatButton 最重要的属性。在大多数用例中,它是一个 Text 对象。
@required Widget child
下面是一个最简单的例子,child属性是一个 Text 对象:
FlatButton (
child: Text("Click Me!"),
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
)
将 Row 对象分配给 child 属性可以创建更复杂的 FlatButton,例如包含 Icon 和 Text。
// 1 Icon and 1 Text
FlatButton (
child: Row (
children: [
Icon(Icons.settings),
SizedBox(width: 5),
Text("Settings")
],
) ,
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
)
// 2 Icons and 1 Text
FlatButton (
child: Row (
children: [
Icon(Icons.directions_bus),
Icon(Icons.train),
SizedBox(width: 5),
Text("Transportation")
],
) ,
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
)
注意:当想要一个包含 Icon 和 Text 的 FlatButton 时,最好使用 FlatButton.icon 构造函数。
FlatButton.icon(
icon: Icon(Icons.file_upload),
label: Text("Upload"),
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
)
4. onPressed回调函数
onPressed 是一个回调函数。当用户单击 FlatButton 时调用它。具体来说,当用户完成包括按下和释放 FlatButton 的两个任务时,将发生 onPressed 事件。
注意:如果 onPress 和 onLongPress 属性都没有指定,FlatButton 将被禁用。因此,当它被触摸时将没有响应,并且它的颜色将由 disableColor 属性而不是 color 属性指示。
@required VoidCallback onPressed
示例效果 -
示例代码 -
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title of Application',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return MyHomePageState();
}
}
class MyHomePageState extends State<MyHomePage> {
int pressCount = 0;
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: Text("FlatButton Example"),
),
body: Center (
child: FlatButton (
child: Text("Click Me! " + this.pressCount.toString()),
color: Colors.blue,
textColor: Colors.white,
onPressed: onPressHander
),
)
);
}
onPressHander() {
this.setState(() {
this.pressCount++;
});
}
}
注意:如果同时指定 callback: onPressed 和 onLongPress 函数,则根据用户的行为只会调用其中之一。
5. onLongPress回调函数
onLongPress 是一个回调函数,当用户按下 FlatButton 的时间超过 LONG_PRESS_TIMEOUT 毫秒时调用。如果在此期间 (0 —> LONG_PRESS_TIMEOUT) 用户没有移动光标,则长按事件将在 LONG_PRESS_TIMEOUT 的毫秒内发生。
VoidCallback onLongPress
如果为 FlatButton 指定两个回调函数:onPressed 和 onLongPress,则在任何情况下最多只能调用一个函数。
如果用户在 LONG_PRESS_TIMEOUT
之前按下并释放,则只会发生 onPressed 事件。
如果用户按下的时间超过 LONG_PRESS_TIMEOUT 毫秒,则 onLongPress 事件将发生,Flutter 将忽略此后发生的 onPressed 事件。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title of Application',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return MyHomePageState();
}
}
class MyHomePageState extends State<MyHomePage> {
int pressedCount = 0;
int longPressCount = 0;
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: Text("Pressed: " + this.pressedCount.toString()
+" --- Long Press: " + this.longPressCount.toString()),
),
body: Center (
child: FlatButton (
child: Text("Test Me"),
color: Colors.blue,
textColor: Colors.white,
onPressed: onPressHander,
onLongPress: onLongPressHandler
),
)
);
}
onPressHander() {
this.setState(() {
this.pressedCount++;
});
}
onLongPressHandler() {
this.setState(() {
this.longPressCount++;
});
}
}
6. onHighlightChanged属性
onHighlightChanged 是一个回调函数,在按钮开始和结束按钮高亮过程时调用。因此,每次用户与按钮交互时,此函数将被调用两次。
下面来看看 highlightColor 属性以了解有关按钮突出显示过程的更多信息。
ValueChanged<bool> onHighlightChanged
突出显示按钮的过程在用户按下时开始,并在 HIGHLIGHT_TIMEOUT 毫秒后结束,或者当用户释放它时,取决于哪个事件先发生。
LONG_PRESS_TIMEOUT 500 milliseconds
HIGHLIGHT_TIMEOUT 300 milliseconds
HIGHLIGHT_TIMEOUT 比 LONG_PRESS_TIMEOUT 短,所以有三种可能的情况:
情况1:如果用户在 HIGHLIGHT_TIMEOUT 之前释放按钮,则事件将按以下顺序发生:
onHighlightChanged(true)
onHighlightChanged(false)
onPressed
情况2:如果用户在 HIGHLIGHT_TIMEOUT 之后 LONG_PRESS_TIMEOUT 之前的时间内释放按钮,事件将按以下顺序发生:
onHighlightChanged(true)
onHighlightChanged(false)
onPressed
情况3: 如果用户在 LONG_PRESS_TIMEOUT 之后释放按钮,事件将按以下顺序发生:
onHighlightChanged(true)
onHighlightChanged(false)
onLongPress
示例代码 -
FlatButton.icon (
icon: Icon(Icons.add_shopping_cart),
label: Text("Add To Cart"),
onPressed: () {
print("onPressed");
},
onHighlightChanged: (valueChanged) {
print("onHighlightChanged: " + valueChanged.toString());
},
onLongPress: () {
print("onLongPress");
},
)
7. shape属性
shape 属性用于指定 FlatButton 的形状。注意:当用户按下它时出现的闪光仅在形状区域内传播。
ShapeBorder shape
动态效果图示-
示例代码 -
FlatButton (
child: Text("Add To Cart"),
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
),
)
FlatButton (
child: Text("Buy Now"),
onPressed: () {},
color: Colors.red,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: BorderSide(color: Colors.red)
),
)
FlatButton (
child: Text("Reset"),
onPressed: () {},
shape: UnderlineInputBorder(
borderSide: new BorderSide(
color: Colors.red
)
),
)
8. textTheme属性
textTheme 属性用于定义按钮的基本颜色和最小尺寸、填充和形状的默认值。
ButtonTextTheme textTheme
// Values:
ButtonTextTheme.normal
ButtonTextTheme.accent
ButtonTextTheme.primary
FlatButton.icon (
icon: Icon(Icons.place),
label: Text("Normal"),
onPressed: () {},
textTheme: ButtonTextTheme.normal,
)
FlatButton.icon (
icon: Icon(Icons.place),
label: Text("Primary"),
onPressed: () {},
textTheme: ButtonTextTheme.primary,
)
FlatButton.icon (
icon: Icon(Icons.place),
label: Text("Accent"),
onPressed: () {},
textTheme: ButtonTextTheme.accent,
)
示例2
FlatButton.icon (
icon: Icon(Icons.place),
label: Text("Normal"),
onPressed: () {},
color: Colors.lightGreen,
textTheme: ButtonTextTheme.normal,
)
FlatButton.icon (
icon: Icon(Icons.place),
label: Text("Primary"),
onPressed: () {},
color: Colors.lightGreen,
textTheme: ButtonTextTheme.primary,
)
FlatButton.icon (
icon: Icon(Icons.place),
label: Text("Accent"),
onPressed: () {},
color: Colors.lightGreen,
textTheme: ButtonTextTheme.accent,
)
示例2效果如下 -
9. textColor属性
textColor 属性用于指定 FlatButton 中的文本颜色。它也适用于 FlatButton 中的图标。
Color textColor
FlatButton.icon (
icon: Icon(Icons.add_shopping_cart),
label: Text("Add To Cart"),
onPressed: () {},
textColor: Colors.red,
)
FlatButton.icon (
icon: Icon(Icons.monetization_on),
label: Text("Buy Now"),
onPressed: () {},
textColor: Colors.blue,
)
FlatButton (
child: Text("Reset"),
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
)
10. disabledTextColor属性
disabledTextColor 属性用于指定禁用 FlatButton 时 FlatButton 的文本颜色。它适用于 FlatButton 图标。
注意:当 onPressed 和 onLongPress 属性均未指定或它们具有空值时,将禁用 FlatButton。
Color disabledTextColor
disabledTextColor属性示例 -
FlatButton.icon (
icon: Icon(Icons.add_shopping_cart),
label: Text("Add To Cart"),
)
FlatButton.icon (
icon: Icon(Icons.monetization_on),
label: Text("Buy Now"),
disabledTextColor: Colors.black38,
)
FlatButton (
child: Text("Reset"),
color: Colors.blue,
textColor: Colors.white,
disabledTextColor: Colors.blueGrey,
)
11. color属性
color 属性用于指定 FlatButton 处于正常状态时 FlatButton 的背景颜色。
Color color
color属性示例
FlatButton.icon (
icon: Icon(Icons.add_shopping_cart),
label: Text("Add To Cart"),
onPressed: (){},
color: Colors.blue
)
FlatButton.icon (
icon: Icon(Icons.monetization_on),
label: Text("Buy Now"),
onPressed: (){},
color: Colors.red,
)
FlatButton (
child: Text("Reset"),
onPressed: (){},
color: Colors.yellow,
)
12. disabledColor属性
disabledColor 属性用于指定 FlatButton 禁用时 FlatButton 的背景颜色。
注意:当 onPressed 和 onLongPress 属性均未指定或为 null 时,将禁用 FlatButton。
Color disabledColor
示例如下 -
FlatButton.icon (
icon: Icon(Icons.add_shopping_cart),
label: Text("Add To Cart"),
)
FlatButton.icon (
icon: Icon(Icons.monetization_on),
label: Text("Buy Now"),
disabledColor: Colors.black12,
)
FlatButton (
child: Text("Reset"),
disabledColor: Colors.black26,
)
13. focusColor属性
如果此按钮具有输入焦点,则 focusColor 属性用于设置 FlatButton 的背景颜色。
Color focusColor
您如果对 Windows 操作系统的评分系统很熟悉:要将焦点从一个元素切换到另一个元素,只需按 TAB 键。但是,在 Android 或 iOS 上运行的 Flutter 应用程序无法使用这种方式。相反,它使用了以下文章中解释的不同原则:
以下是使用 focusColor 属性的示例。当您在 Android Emulator 上运行此应用程序时,您仍然可以使用计算机上的 TAB 键将焦点从界面上的一个 Widget 切换到另一个 Widget。
focusColor属性的示例如下 -
FlatButton.icon (
icon: Icon(Icons.add_shopping_cart),
label: Text("Add To Cart"),
onPressed: () {},
focusColor: Colors.red,
)
FlatButton.icon (
icon: Icon(Icons.monetization_on),
label: Text("Buy Now"),
onPressed: () {},
color: Colors.blue,
focusColor: Colors.red,
)
FlatButton (
child: Text("Reset"),
onPressed: () {},
color: Colors.blueGrey,
focusColor: Colors.red,
)
14. highlightColor属性
highlightColor 属性用于指定按钮的高亮颜色。
Color highlightColor
当用户按下时,按钮的背景颜色会逐渐从当前背景颜色变为 highlightColor,然后在用户松开按钮时恢复到正常状态。
如果从按下到释放的时间很短,按钮的背景颜色将不会达到高亮颜色。
FlatButton.icon (
icon: Icon(Icons.add_shopping_cart),
label: Text("Add To Cart"),
onPressed: () {},
highlightColor: Colors.red
)
FlatButton.icon (
icon: Icon(Icons.monetization_on),
label: Text("Buy Now"),
onPressed: () {},
color: Colors.blue,
highlightColor: Colors.red
)
FlatButton (
child: Text("Reset"),
onPressed: () {},
color: Colors.blueGrey,
highlightColor: Colors.red
)
15. splashColor属性
splashColor 属性用于指定用户按下位置周围的 flash 颜色。
Color splashColor
FlatButton.icon (
icon: Icon(Icons.add_shopping_cart),
label: Text("Add To Cart"),
onPressed: () {},
splashColor: Colors.lime,
)
FlatButton.icon (
icon: Icon(Icons.monetization_on),
label: Text("Buy Now"),
onPressed: () {},
color: Colors.blue,
splashColor: Colors.lime,
)
FlatButton (
child: Text("Reset"),
onPressed: () {},
color: Colors.blueGrey,
splashColor: Colors.lime,
)
16. colorBrightness属性
colorBrightness 属性用于推荐 Flutter,它可以取两个值之一,Brightness.dart 或 Brightness.light。
- 使用 colorBrightness = Brightness.dark 告诉 Flutter 按钮背景颜色为深色,自动为按钮的文字选择合适的颜色。
- 使用 colorBrightness = Brightness.light 告诉 Flutter 按钮背景颜色为浅色,自动为按钮文本选择合适的颜色。
Brightness colorBrightness
FlatButton.icon (
icon: Icon(Icons.add_shopping_cart),
label: Text("Dark"),
onPressed: () {},
color: Colors.green,
colorBrightness: Brightness.dark
)
FlatButton.icon (
icon: Icon(Icons.add_shopping_cart),
label: Text("Light"),
onPressed: () {},
color: Colors.green,
colorBrightness: Brightness.light
)
FlatButton.icon (
icon: Icon(Icons.monetization_on),
label: Text("Dark"),
onPressed: () {},
color: Colors.blue,
colorBrightness: Brightness.dark
)
FlatButton.icon (
icon: Icon(Icons.monetization_on),
label: Text("Light"),
onPressed: () {},
color: Colors.blue,
colorBrightness: Brightness.light
)