1. Flutter IconButton
在 Flutter 中,IconButton 是一个带有图标的按钮,用户可以点击它来执行操作。IconButton 将不包含文本内容,因此如果要一个由图标和文本组成的按钮,请使用 FlatButton 或 RaisedButton。
Flutter IconButton构造函数:
const IconButton (
{Key key,
double iconSize: 24.0,
VisualDensity visualDensity,
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),
AlignmentGeometry alignment: Alignment.center,
double splashRadius,
@required Widget icon,
Color color,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Color disabledColor,
@required VoidCallback onPressed,
MouseCursor mouseCursor: SystemMouseCursors.click,
FocusNode focusNode,
bool autofocus: false,
String tooltip,
bool enableFeedback: true,
BoxConstraints constraints}
)
IconButton 在 AppBar.actions
属性中用作操作,该属性也用于许多其他情况。
IconButton 的点击区域对用户的交互很敏感。无论 Icon 的实际大小如何,它都有最小的 kMinInteractiveDimension (48.0) 大小。
2. icon属性
icon 属性用于为 IconButton 指定一个图标。
@required Widget icon
示例代码:main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@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(
appBar: AppBar(
title: Text("IconButton Example"),
),
body: Center(
child: IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
}
)
),
);
}
}
可以将任何 Widget 对象分配给 IconButton.icon 属性。但是,它应该包含一个图标或图像,否则将不适合 IconButton 的设计目的。
ImageButton示例代码 -
IconButton (
icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_24.png"),
onPressed: () {
print("Pressed");
}
)
让我们看看如果 IconButton.icon 是一个 Text 对象会发生什么 -
示例代码:
IconButton (
icon: Text("???????????"),
onPressed: () {
print("Pressed");
}
)
3. iconSize属性
iconSize 属性用于指定图标的大小,默认值为 24。如果图标实际大小大于 iconSize,显示时会缩小 iconSize。否则,图标的显示大小不会改变。
double iconSize: 24.0
例如:
IconButton (
icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_24.png"),
onPressed: () {
print("Pressed");
},
iconSize: 96
)
效果如下:
IconButton 的点击区域对用户的交互很敏感,比如点击。iconSize 的值越大,无论图标的实际大小如何,点击区域都会越大。但是,命中区域将具有最小的 kMinInteractiveDimension (48.0) 大小,以确保它不会太小以供用户交互。
如果图标的实际尺寸大于 iconSize,则显示时会缩小到与 iconSize 相同的尺寸。
示例:main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@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 (
appBar: AppBar(
title: Text("IconButton Example"),
),
body: Center(
child: getIconButtons()
),
);
}
Widget getIconButtons() {
double MAX_SIZE = 96;
double LEFT = 30;
return Center(
child: Column (
children: [
Row (
children: [
SizedBox(width: LEFT),
IconButton (
icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_96.png"),
onPressed: () {
print("Pressed");
},
iconSize: MAX_SIZE,
),
Text("Real Size: 96"),
Text(" --- "),
Text("Set iconSize: " + MAX_SIZE.toString()),
]
),
Row (
children: [
SizedBox(width: LEFT),
IconButton (
icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_72.png"),
onPressed: () {
print("Pressed");
},
iconSize: MAX_SIZE,
),
Text("Real Size: 72"),
Text(" --- "),
Text("Set iconSize: " + MAX_SIZE.toString()),
]
),
Row (
children: [
SizedBox(width: LEFT),
IconButton (
icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_24.png"),
onPressed: () {
print("Pressed");
},
iconSize: MAX_SIZE,
),
Text("Real Size: 24"),
Text(" --- "),
Text("Set iconSize: " + MAX_SIZE.toString()),
]
),
])
);
}
}
4. onPressed属性
onPressed 是一个回调函数,当用户单击 IconButton 时将调用该函数。如果未指定 onPressed,则 IconButton 将被禁用,这意味着当用户单击它时将没有响应。
@required VoidCallback onPressed;
示例代码:
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
}
)
// Or:
Function onPressedHandler = () {
print("Pressed");
};
....
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: onPressedHandler
)
应用示例:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@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 clickCount = 0;
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: Text("IconButton Example. Click count: " + this.clickCount.toString()),
),
body: IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
setState(() {
this.clickCount++;
});
}
)
);
}
}
运行上面代码得到以下结果:
5. color属性
color属性指定启用 IconButton 时 IconButton 内图标的颜色。
Color color
使用效果如下图所示 -
构造函数示例 -
IconButton (
icon: Icon(Icons.directions_boat),
onPressed: () {
print("Pressed");
},
iconSize: MAX_SIZE,
color: Colors.blue,
),
6. disabledColor属性
disabledColor 属性指定禁用此 IconButton 时 IconButton 内图标的颜色。如果 onPressed 为 null 或未指定,则 IconButton 将被禁用。
Color disabledColor
显示效果如下 -
IconButton (
icon: Icon(Icons.directions_boat),
iconSize: 64
disabledColor: Colors.black45,
),
7. splashRadius属性
slashRadius 属性指定当用户按下 IconButton 时 IconButton 周围的闪光半径。它的默认值是 defaultSplashRadius (35)。
double splashRadius
显示效果如下 -
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
},
splashRadius: 50,
)
8. splashColor属性
splashColor 属性指定用户按下 IconButton 点周围的闪光的主要颜色。
Color splashColor
显示效果如下 -
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
},
splashRadius: 100,
splashColor: Colors.lightGreenAccent
)
9. highlightColor属性
splashColor 属性指定用户按下 IconButton 点周围的闪光灯的辅助颜色。
Color highlightColor
效果如下所示 -
10. tooltip属性
tooltip 属性是 IconButton 的描述性文本。当用户单击此 IconButton 时,它就会出现。
String tooltip
效果如下所示 -
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
},
iconSize: 64,
tooltip: "Bus Direction",
)