阅读 29

flutter笔记(五) 图标Icon

flutter笔记汇总

const Icon(
  IconData icon,                          //具体展示的图标
 {                      
    Key key,
    double size,                          //字体大小
    Color color,                          //颜色
    String semanticLabel,                   //语义标签
    TextDirection textDirection            //icon里可以添加文本,文本的书写方向
  }
)
复制代码

官方给出了4种icon
Icons:基础的图标。
IconButton:交互式图标,就是图标按钮。
IconTheme:为图标提供环境配置。
ImageIcon:自定义图片图标。

一、Icons

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: Icon(
            Icons.add,
            size: 50.0,
            color: Colors.blue
          )
        )
      )
    );
  }
}
复制代码

比较简单,设置字体大小颜色。flutter内置了material的icon,所有icon看这里 design.google.com/icons/直接用就可以。(打不开?自己想办法)

自定义字体图标

不想用material提供的图标,想自定义?可以,看下面

1、首先生成一个字体:

可以去这里www.iconfont.cn/
也可以去这里icomoon.io/app/#/selec…
下载一个字体图标包,解压。

2、在项目根目录下新建一个fonts文件夹,把tff格式的字体放到文件夹下。

3、在pubspec.yaml中添加字体

flutter:
  uses-material-design: true
  fonts:
    - family: myIcon  #指定一个字体名
      fonts:
        - asset: fonts/icomoon.ttf
复制代码

4、使用字体图标

body: new Container(
  alignment: Alignment.center,
  child: Icon(
    IconData(
      0xe90c,                    //去下载的字体包里找到css文件,把字体的`content`粘过来,别忘了加`0x`表示十六进制
      fontFamily: 'myIcon'      //自定义的字体名
    )
  )
)
复制代码

二、IconButton

Icon里有这货,Button里也有这货,不纯洁。
写在Icon里吧,下一篇写Button就不写他了。

const IconButton({
  Key key,
  double iconSize: 24.0,                                        //字体大小
  EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),        //按钮的内边距
  AlignmentGeometry alignment: Alignment.center,                //图标的对齐方式
  @required Widget icon,                                         //图标
  Color color,                                                  //图标字体颜色
  Color focusColor,                                             //获得焦点时的颜色?
  Color hoverColor,                                              //鼠标悬停时的颜色?
  Color highlightColor,                                         //按钮按下时的背景颜色
  Color splashColor,                                           //点击时,水波动画中水波的颜色
  Color disabledColor,                                          //禁用时的颜色
  @require VoidCallback onPressed,                              //点击按钮的回调函数
  FocusNode focusNode,                                          //
  String tooltip                                                 //点击按钮的提示语
})
复制代码

上代码,看demo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: IconButton(
            icon: new Icon(Icons.add),
            iconSize: 24.0,
            padding: const EdgeInsets.all(4.0),
            alignment: Alignment.centerLeft,
            color: Colors.red,
            highlightColor: Colors.blue,
            splashColor: Colors.green,
            tooltip: 'test',
            onPressed: () {
              print(1);
            },
          )
        )
      )
    );
  }
}

复制代码

这是个圆形的按钮。
focusNodefocusColor推测是配合使用,和可以获得焦点的节点联动,获得焦点改变图标颜色,还未实验,欢迎补充。
tooltip是要长按才出现提示,点击不会出现,highlightColor也是需要长按。
hoverColor推测是桌面端和web端用的,毕竟移动端没发hover。
调整iconSize/alignment/padding会发现IconButton是有一个固定的宽高尺寸的,不可设置。

三、IconTheme

这货只有childdata,在data里配置样式。

const IconThemeData({
  Color color,
  double opacity,
  double size
})
复制代码

样式也不多,下面上代码,看用法。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: IconTheme(
            data:  IconThemeData(color: Colors.red, opacity: 0.5, size: 30.0),
            child: Container(
              child: new Icon(Icons.add)
            )
          )
        )
      )
    );
  }
}
复制代码

可以看到这里IconTheme的子节点,不一定必须是Icon,这里是个Container
IconTheme相当于一个装饰器,对其下面的所有图标样式统一设置。

四、ImageIcon

const ImageIcon(
  ImageProvider image,
  {
    Key key,
    double size,
    Color color,
    String semanticlabel
  }
)
复制代码

用一张图片做icon,和Imagecolor效果基本相同,不管什么花里胡哨的图片,都渲染成纯色,这里一定要用png这种背景透明的图片。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: ImageIcon(
            AssetImage('images/logo.png'),
            color: Colors.red,
            size: 50.0
          )
        )
      )
    );
  }
}
复制代码

Icon到这里基本上就结束了。