Flutter基础之图标按钮组件

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

IconButton组件属性及详细描述

属性名	类型	默认值	说明
alignment	AlignmentGeometry	Alignment.center	定义IconButton的Icon对齐方式，默认为居中，Alignment是可以设置x，y偏移量的
icon	Widget	null	展示的具体图标，可以使用Icons图标列表中的任意一个图标
color	Color	null	图标颜色
disabledColor	Color	ThemeData.disableColor	图标组件禁用的颜色
iconSize	double	24.0	图标大小
onPressed	VoidCallBack	null	当按钮按下时会触发此回调事件
tooltip	String	“”	当按钮按下时的组件提示

 

 

一段代码示例，点击IconButton，出发onPressed回调并toast一句话

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

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

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'IconButtonDemo',
      home: new IconButtonDemo(),
    );
  }
}

class IconButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('IconButton Demo'),
        leading: Icon(Icons.menu),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
          )
        ],
      ),
      body: new Center(
        child: new IconButton(
            icon: Icon(Icons.add_circle_outline),
            iconSize: 50.0,
            tooltip: '按下这个按钮',
            disabledColor: Colors.green,
            onPressed: (){
              Fluttertoast.showToast(
                msg: '点击IconButton并且弹出TOAS',
                toastLength: Toast.LENGTH_LONG,
                textColor: Colors.deepOrange,
                gravity: ToastGravity.BOTTOM
              );
        }),
      ),
    );
  }
}

在Flutter中添加弹出Toast出提示语，首先需要在pubspec.yaml引入fluttertoast包，点击Packages get，然后在你需要toast的地方import该库

//pubspec.yaml
fluttertoast: ^2.2.11

//import对应库
import 'package:fluttertoast/fluttertoast.dart';