Flutter 常用组件-4 图标及按钮组件

1 图标组件

图标组件Icon展示图标的组件，该组件不可交互，要实现交互图标，可以考虑使用IconButton组件。图标相关组件有以下几个：

• IconButton：可交互的Icon
• Icons：框架自带Icon集合
• IconTheme：Icon主题
• ImageIcon：通过AssetImages或者其他图片显示Icon

常用属性

属性名	类型	默认值	说明
color	Color	null	图标的颜色，例如Colors.green[500]
icon	IconData	null	展示的具体图标，可使用Icons图标列表中的任意一个图标即可，如Icons.phone表示一个电话的图标
style	TextStyle	null	文本样式，可定义文本的字体大小、颜色、粗细等
size	Double	24.0	图标的大小，注意需要带上小数位
textDirection	TextDirection	TextDirection.ltr	Icon组件里也可以添加文本内容。有些文本书写的方向是从左到右，有些则是从右到左。从左到右使用TextDirection.ltr，从右到左使用TextDirection.rtl

2 图标按钮组件

图标按钮组件IconButton是基于Meterial Design风格的组件，可以响应按下的事件，并且按下时带水波纹效果。如果它的onPressed回调函数为null，那么这个按钮处于禁用状态，并且不可按下。

常用属性

属性名	类型	默认值	说明
alignment	AlignmentGeometry	Alignment.center	定义IconButton的Icon对齐方式，默认为居中。Alignment可以设置x，y的偏移量
icon	Widget	null	展示的具体图标，可以使用Icons图标列表中任意一个图标即可，如Icons.phone表示一个电话图标
color	Color	null	图标组件的颜色
disabledColor	Color	ThemeData.disabledColor	图标组件禁用状态的颜色，默认为主题里的禁用颜色，也可以设置为其他颜色
iconSize	double	24.0	图标的大小，注意需要带上小数点
onPressed	VoidCallback	null	当按钮按下时会触发此回调事件
tooltip	String	“”	当按钮长按下时的提示语句

3 凸起按钮组件

凸起按钮组件RaisedButton是Material Design中的button，一个凸起的材质矩形按钮，它可以响应按下事件，并且按下时会带一个触摸效果。

常用属性

属性名	类型	默认值	说明
color	Color	null	组件的颜色
disabledColor	Color	ThemeData.disabledColor	组件禁用状态的颜色，默认为主题里的禁用颜色，也可以设置为其他颜色
onPressed	VoidCallback	null	当按钮按下时会触发此回调事件
child	Widget	-	按钮的child通常为一个Text文本组件，用来显示按钮的文本
enable	bool	true	按钮是否为禁用状态

---

4 示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('icon_button示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.person),
              SizedBox(
                height: 10.0,
              ),
              IconButton(icon: Icon(Icons.error), onPressed: () {}),
              Container(
                height: 10.0,
                color: Colors.blue,
              ),
              RaisedButton(
                onPressed: () {},
                child: Text('RaisedButton'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

显示效果：