4 按钮组件

4.1 图标组件

图标组件(Icon)为展示图标的组件,该组件不可交互,要实现可交互的图标,可以考虑使用IconButton组件。图标组件相关的组件有以下几个: •IconButton:可交互的Icon。 •Icons:框架自带Icon集合。 •IconTheme:Icon主题。 •ImageIcon:通过AssetImages或者其他图片显示Icon。 图标组件常用属性见表4-5。 接下来通过一个示例来展示图标组件的使用,Icon实例化需要传入几个主要的参数,分别为图标、颜色、大小。其中Icon的实例化代码如下:

new Icon(Icons.phone,color: Colors.green[500],size: 80.0,)
完整的示例代码如下:
import 'package:flutter/material.dart';

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

class LayoutDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('图标组件示例'),
      ),
      body: new Icon(Icons.phone,color: Colors.green[500],size: 80.0,),
    );

  }
}

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

4.2 图标按钮组件

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

import 'package:flutter/material.dart';

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

class LayoutDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('图标按钮组件示例'),
      ),
      body: new Center(
        child: new IconButton(
          icon: Icon(Icons.volume_up,size: 48.0,),
          tooltip: '按下操作',
          onPressed: () {
            print('按下操作');
          },
        ),
      ),
    );

  }
}

上述示例代码视图展现大致如图4-5所示。 当按下图中的喇叭小按钮后,会触发onPressed事件,控制台打印输出内容,如图4-6所示。

4.3 凸起按钮组件

凸起按钮组件(RaisedButton)是Material Design中的button,一个凸起的材质矩形按钮,它可以响应按下事件,并且按下时会带一个触摸的效果。 RaisedButton组件常用属性见表4-7。 示例代码如下:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'RaisedButton示例',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('RaisedButton组件示例'),
        ),
        body: new Center(
          child: new RaisedButton(
            onPressed: () {
              //按下事件处理
            },
            child: new Text('RaisedButton组件'),
          ),
        ),
      ),
    );
  }
}

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