Flutter 图标及按钮组件

Flutter 图标及按钮组件(Icon,IconButton,RaisedButton)

图标组件

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

• IconButton：可交互的Icon。
• Icons：框架自带Icon集合。
• IconTheme：Icon主题。
• ImageIcon：通过AssetImages或者其他图片显示Icon。图标组件常用属性见表。

接下来通过一个示例来展示图标组件的使用，Icon实例化需要传入几个主要的参数，分别为图标、颜色、大小。其中Icon的实例化代码如下：

Icon(Icons.phone,color: Colors.green[500],size: 80.0,)

完整的示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        title: '图标组件示例',
        home: LayoutDemo(),
      ),
    );

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图标组件示例'),
      ),
      // 添加图标
      body: Icon(
        // 图标内容
        Icons.phone,
        // 图标颜色
        color: Colors.green[500],
        // 图标大小
        size: 80.0,
      ),
    );
  }
}

上述示例代码视图展现大致如图所示。

图标按钮组件

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

示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    title: '图标按钮组件示例',
    home: LayoutDemo(),
  ),
);

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图标按钮组件示例'),
      ),
      body: Center(
        // 添加图标按钮
        child: IconButton(
          // 图标元素
          icon: Icon(Icons.volume_up,size: 48.0,),
          // 按钮提示
          tooltip: '按下操作',
          // 按下事件响应
          onPressed:(){
              print('按下操作');
          },
        ),
      ),
    );
  }
}

上述示例代码视图展现大致如图所示。

当按下图中的小喇叭按钮后，会触发onPressed事件，控制台打印输出内容，如图所示。

凸起按钮组件

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

RaisedButton组件常用属性见表:

示例代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RaisedButton示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text('RaisedButton组件示例'),
        ),
        body: Center(
          // RaisedButton具有一种立体感
          child: RaisedButton(
              // 按下事件响应
              onPressed: () {
                // 按下事件处理
              },
              // 添加按钮文本
              child: Text('RaisedButton组件'),
          ),
        ),
      ),
    );
  }
}

上述示例代码视图展现大致如图所示，当按下图中按钮后，会触发onPressed事件，这和Icon-Button一样。