Flutter开发者

Icons

2018-03-09

上期回顾

在前面的文章中我们学习了Flutter中Text和Image的用法,相必大家对Flutter Widget的使用方法都有了一定的认识,在开始今天的内容之前,我们先来看看上篇文章最后留下的问题。

首先,我们可以看到文章的字体是加黑并且倾斜的,而且文字的字间距做了放大的处理,文字的下方都有了一根红色的下划线。

根据上篇文章学到的知识,我们可以根据textStyle很简单的实现上面的效果。

  • fontWeight :FontWeight.bold参数使文字表粗
  • fontStyle :FontStyle.italic参数使文字倾斜
  • decoration: TextDecoration.underline参数给文字加上下划线
  • decorationColor: Colors.red参数使文字下划线的颜色变成红色
  • letterSpacing: 8.0 参数调整字与字之间的距离

完整代码如下:

import 'package:flutter/material.dart';
void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("Hello Flutter")),
        body: new Text(
          "夜晚走在喧闹的小街上,反而心能更加的平静,"
              "或许这就是物极必反的缘故吧,"
              "总喜欢在最吵闹的地方去寻找那一份属于自己的宁静,"
              "可以不思考所有的困扰,也可以闭着眼睛静听来自远方的人间天堂的呼唤,"
              "然后在忽明忽暗的灯光下丢弃心中的包袱,和一脸的苦闷,"
              "再走到起点时,又翻去了一页,也尘封了以往。", style: new TextStyle(
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            decoration: TextDecoration.underline,letterSpacing: 8.0,decorationColor: Colors.red),
        ));
  }
}

当然,大家字符间的间距是多少无所谓,我也是随便写了个值。

好了,看完了前篇文章的问题,那么我们今天就来学习一个新的东西 Icons

Icon

提到Icon(iconfont)相比做过前端和移动端开发的同学都不会陌生,Icon顾名思义就是小图标的意思,在平时的开发中我们都会在很多的地方使用到这些小图标。

在Flutter中默认为大家提供了很多自带的小图标,我们可以根据自己的需要去选择这些图标

Icon的构造方法

const Icon(this.icon//IconDate, {
   Key key,
   this.size,//大小
   this.color,//颜色
   this.semanticLabel,//标志位
   this.textDirection,//绘制方向,一般使用不到
 }) 

由构造方法可以很清楚的看出Icon构造方法需要一个默认的类型为IconData类型的参数

加载Flutter内置的Icon

在Flutter内部为我们提供了material_fonts,在安装目录flutter\bin\cache\artifacts\material_fonts下

在Flutter中,我们可以根据Icons中定义的图标来进行引入,在Icon是中大概定义了1000个左右的Icon。

使用内置Icon图片代码:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Icons"),
      ),
      body: new Center(
        child: new Icon(Icons.android,size: 100.0),
      ),
        );
  }
}

可以看到上面的这段代码跟前几篇文章中出现的代码并没有什么不同,只不过把把Center的child换成了一个Icon,iconData参数我们传入了一个Icons中的一个静态对象Icons.android,一个android图标,并且设置icon的大小为100px。

运行效果如下:

当然,我们也可以设置这个Icon显示的颜色。

child: new Icon(Icons.android,size: 100.0,color: Colors.blueAccent,),

当然,你可以根据自己的需要选择Flutter 内置Icon库的图标。

使用第三方图标

由Icon的构造方法我们可以很清楚的看出,Icon初始化必须要传入一个IconData对象,而在Icons对象中为我们提供的也是仅仅是一个个静态的IconData对象。

那么,这个IconData我们肯定也可以自己构建啊,接下来我们就来看下这个IconData如果调用外部的iconfont。

首先,我们还是来看下IconData的构造方法:

  const IconData(
  this.codePoint,//必填参数,fonticon对应的16进制Unicode {
  this.fontFamily,//字体库系列
  this.fontPackage,//字体在那个包中,不填仅在自己程序包中查找
  this.matchTextDirection: false,图标是否按照图标绘制方向显示
});

是的构造方法里面的参数也非常的简单的,但是我们该如何使用呢?

想一想前面从应用内加载Image方法,同样加载第三方的icon同样需要把第三方的iconfont下载到本地,放置在应用内。

先,我们在lib目录的同级新建fonts文件夹,把第三方字体库放入fonts目录下

置pubspec.yaml文件

引入并配置第三方字体库

fonts:

- family: flyou
  fonts:
    - asset: fonts/fa-solid-900.ttf

flyou是我们给字体系列起的名字,可以根据自己的需要填写
对应的fa-solid-900.ttf就是我们第三方字体图片库

字体系列地址

下载地址

使用第三方字体库

child: new Icon(new IconData(0xf118,fontFamily: "flyou"),size: 100.0,color: Colors.blueAccent,)

第一个值是我们要显示图片的Unicode,这个Uniode的值可以在图片详情页面获取

第二个参数“flyou”就是我们定义在pubspec.yaml中字体系列的名称。

和加载Flutter自带的Icon相比,我们仅仅是把从Icons中获取IconData换成了从直接构造一个IconData对象而已。

还是来看下运行效果如何:

但是,大家可能都会发现这个问题,我们只使用这个图标一次还好,我们可以这样写,但是如果这个图标我们多次使用,每次还让我这么写我就不乐意了(不仅仅是我懒,毕竟不符合程序设计的思想啊)。

在上面加载内置Icon中我们可以看到,我们是根据Icons类直接调用内部声明好的静态IconData对象,那么我们肯定也可以这么做啊。

首先,我们建立一个专门用来管理Icon的类FlyouIcons(和Icons是一样的道理),把经常用到的iconfont按照Icons的写法写进去就ok了

import 'package:flutter/material.dart';

class FaIcons {
  FaIcons._();

  static const String FONT_FAMILY_FLYOU='flyou';

  static const IconData archive = const IconData(0xf187 ,fontFamily: FONT_FAMILY_FLYOU);
  static const IconData ambulance = const IconData(0xf0f9, fontFamily: FONT_FAMILY_FLYOU);
  static const IconData interpreting = const IconData(0xf2a3, fontFamily: FONT_FAMILY_FLYOU);
  static const IconData syringe = const IconData(0xf48e,fontFamily: FONT_FAMILY_FLYOU);
  static const IconData smile = const IconData(0xf118, fontFamily: FONT_FAMILY_FLYOU);
  static const IconData mars= const IconData(0xf228, fontFamily: FONT_FAMILY_FLYOU);
  static const IconData heartbeat = const IconData(0xf21e, fontFamily: FONT_FAMILY_FLYOU);
}

上面我们仅仅放了部分图标,大家可以根据自己的需要来定制自己的图标库。

调用我们声明的第三方Icon库

当然,调用的方式跟上面调用内部Icon的方式是一样的

child: new Icon(FlyouIcons.smile,size: 100.0,color: Colors.blueAccent)

备注:

关于获取iconfont的方式有很多,比如阿里的http://iconfont.imweb.io/等等,大家可以根据自己的需要去选择。

小结

Icon是矢量图,可以减少应用加载的速度,保证图片的清晰度
在Flutter中默认内置了一套比较完善的Icon库
Icon支持从第三方引入并使用第三方字体库图标

试一试

从阿里的的图标库中收藏,下载并在自己的应用中使用阿里iconfont

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

打赏请备注姓名或者昵称,方便我后期统计哦

关注公众号,及时查阅最新文章