姬長信(Redy)

4.4 图标及按钮组件

## 4.4 图标及按钮组件 ### 4.4.1 图标组件 图标组件/uff08Icon/uff09为展示图标的组件/uff0c该组件不可交互/uff0c要实现可交互的图标/uff0c可以考虑使用IconButton组件。图标组件相关的组件有以下几个/uff1a /u2022IconButton/uff1a可交互的Icon。 /u2022Icons/uff1a框架自带Icon集合。 /u2022IconTheme/uff1aIcon主题。 /u2022ImageIcon/uff1a通过AssetImages或者其他图片显示Icon。 图标组件常用属性见表4-5。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041831183725) 接下来通过一个示例来展示图标组件的使用/uff0cIcon实例化需要传入几个主要的参数/uff0c分别为图标、颜色、大小。其中Icon的实例化代码如下/uff1a ```objective-c new Icon(Icons.phone,color: Colors.green[500],size: 80.0,) 完整的示例代码如下/uff1a 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所示。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041831576000) ### 4.4.2 图标按钮组件 图标按钮组件/uff08IconButton/uff09是基于Material Design风格的组件/uff0c它可以响应按下事件/uff0c并且按下时会带一个水波纹的效果。如果它的onPressed回调函数为null/uff0c那么这个按钮处于禁用状态/uff0c并且不可以按下。常用属性见表4-6。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041832495658) ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041833028650) 示例代码如下/uff1a ```objective-c 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所示。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041834083892) 当按下图中的喇叭小按钮后/uff0c会触发onPressed事件/uff0c控制台打印输出内容/uff0c如图4-6所示。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041834205310) ### 4.4.3 凸起按钮组件 凸起按钮组件/uff08RaisedButton/uff09是Material Design中的button/uff0c一个凸起的材质矩形按钮/uff0c它可以响应按下事件/uff0c并且按下时会带一个触摸的效果。 RaisedButton组件常用属性见表4-7。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041835092275) 示例代码如下/uff1a ```objective-c 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所示/uff0c当按下图中按钮后/uff0c会触发onPressed事件/uff0c这和IconButton一样。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041836083986)