Flutter入门（23）：Flutter 组件之 IconButton 详解

1. 基本介绍

FlatButton 是一个 google 风格的扁平化按钮，使用方法与 Flutter 组件之 RaisedButton 详解 一致，这里就按照 RaisedButton 的讲解方式过一遍样式。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. FlatButton 使用

3.1 创建容器

优雅的编程，首先创建一个 iconbutton.dart 文件。

import 'package:flutter/material.dart';

class FMIconButtonVC extends StatefulWidget{
  @override
  FMIconButtonState createState() => FMIconButtonState();
}

class FMIconButtonState extends State  {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("IconButton"),
      ),
      body: _listView(),
    );
  }

  ListView _listView(){
    return ListView(
      children: [
        _normalIconButton(),
      ],
    );
  }

  IconButton _normalIconButton(){
    return IconButton(
      icon: Icon(Icons.ac_unit),
      iconSize: 50,
      onPressed: (){},
    );
  }
}

iconbutton.png

3.2 颜色

常用颜色属性	介绍
color	icon 颜色
disabledColor	icon 不可点击颜色，onPressed == null 时生效
splashColor	点击时闪过的颜色
highlightColor	按下去高亮的颜色

  IconButton _normalIconButton(){
    return IconButton(
      icon: Icon(Icons.ac_unit),
      iconSize: 50,
      onPressed: (){},
      color: Colors.red,
      disabledColor: Colors.black,
      splashColor: Colors.yellow,
      highlightColor: Colors.green,
    );
  }

iconbutton colors.gif

3.3 大小

  IconButton _normalIconButton(){
    return IconButton(
      icon: Icon(Icons.ac_unit),
      iconSize: 100,
      onPressed: (){},
    );
  }

iconbutton size.png

3.4 外边距

padding 不设置时，默认为 8.0

  IconButton _normalIconButton(){
    return IconButton(
      icon: Icon(Icons.ac_unit),
      iconSize: 100,
      onPressed: (){},
      padding: EdgeInsets.all(50),
    );
  }

iconbutton 8padding.gif

iconbutton 50padding.gif

4. 技术小结

IconButton 是一个非常简单的控件，稍微了解一下用法即可。