Flutter开发者

Text&Image

2018-03-07

上期回顾

在前一篇文章中我们留下了一个问题

  • 改变floatingActionButton的颜色为蓝色,字体颜色是白色
  • 把侧滑菜单放到右边,菜单内容是一个居中的文字“我是菜单”

其实这么问题非常的简单,floatingActionButton的省略参数中,backgroundColor参数可以设置floatingActionButton的背景颜色,至于Text文本的颜色,我们可以根据TextStyle中的color属性来指定。

在Scaffold中有drawer和endDrawer两个参数,分别对应左边的菜单和右边的菜单,我们只需要改变参数的名称即可把侧滑菜单变到右边。
具体的代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home:new MyApp(),theme:
  new ThemeData(primaryColor: Colors.red,accentColor: Colors.redAccent, ),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(appBar:
    new AppBar(title: new Text("Hello Flutter")),
        floatingActionButton: new FloatingActionButton(
          onPressed: null,
          backgroundColor: Colors.blueAccent,
          child: new Text("点我",style: new TextStyle(color: Colors.white),)
        ),
        endDrawer: new Drawer(child: new Center(child: new Text("我是菜单"),),),
        body: new Center(
            child: new Text("Hello Flutter")
        )
    );
  }
}

还是不太懂的小伙伴,留言告诉我哦


在上篇文章中我们主要学习了Flutter Widget的基本用法,从今天开始我们将对比较常用的Widget进行一一讲解,今天主要学习下用的最多的Text和Image控件。

Text

在前面的例子中我们已经用了许多次Text,顾名思义Text就是用来展示文本的类似于Android上的TextView。

构造方法如下:

const Text(this.data//内容, {
Key key,
this.style//样式
this.textAlign//对齐方式,
this.textDirection//文本方向,
this.softWrap//是否换行显示,
this.overflow//超出文本的处理方式,
this.textScaleFactor//每个逻辑像素的字体像素数,控制字体大小,
this.maxLines//最大行数,
  })

当然,每次非必填参数基本都有一个默认值,具体默认值是什么大家可以点击进去源码看下哦。

Text构造方法需要传入一个必须的参数data,也就是String类型的内容。

style需要传入需要传入一个TextStyle对象,决定Text的颜色、字体、字体大小、行间距、字体样式等。

TextStyle的构造方法如下:

const TextStyle({
this.inherit: true,
this.color//颜色,
this.fontSize//大小,默认10像素,
this.fontWeight,
this.fontStyle,
this.letterSpacing//字间距,
this.wordSpacing//字符间距,
this.textBaseline,
this.height,
this.decoration,
this.decorationColor,
this.decorationStyle,
this.debugLabel,
String fontFamily//字体,
String package,
  })

textAlign文本的对齐方式,【left:左对齐】、【right:右对齐】、【center:居中对齐】、【justify:自适应】、【start:文本开头,和textDirection有关】、【end:文本结尾,,和textDirection有关】

textDirection文本方向,【rtl:right to left 从右向左】、【ltr:left to right 从左向右】

overflow超出屏幕,是否换行显示 bool,传入true则换行,传入false这不换行

textScaleFactor传入double值,值越大字体大小越大,默认为1.0

maxLines最大显示行数

现在有一段文字,我们按照最基本的用法使用Text来展示它。

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(color: Colors.blueGrey,fontSize: 14.0),
        )
    );
     }
 }

接下来我们仅仅通过改变TextStyle来改变字体的颜色和大小

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(color: Colors.blueGrey,fontSize: 14.0),
        )
     );
    }
}

在上面的代码中我们仅仅增加了一行代码

style: new TextStyle(color: Colors.blueGrey,fontSize: 14.0),

将字体的颜色设置为蓝色,字体大小设置为14像素。

现在的文字对齐方式默认是左对齐的,现在我们把它变成居中对齐且最大显示3行

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(color: Colors.blueGrey, fontSize: 14.0),
          textAlign: TextAlign.center,
          maxLines: 3,
        ));
  }
}

同样的也非常的简单,我们仅仅多了两行代码

  textAlign: TextAlign.center,
maxLines: 3,

就可以指定文本居中对齐,最大显示3行文本,超过三行的文本就被控件给省略了。

当然,通过这些细微的改变就可以做出很大界面上的变化,其他参数的作用,大家可以结合上面的注释自己尝试下。

Image

在Flutter中系统为我们提供了可以加载图片的控件Image,Image 控件提供了如下几种用于加载不同方式的图片。

  • new Image, 用于从ImageProvider获取图像。
  • new Image.asset, 用于从AssetBundle获取图像。
  • new Image.network, 用于从URL获取图像。
  • new Image.file, 用于从文件中获取图像。
  • new Image.memory, 用于从内存中获取图像

在flutter中Image支持JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP这几种图片格式。
今天我们主要介绍下两种常用的方式,从asset目录和从network获取图片

从asset获取图片

构造方法如下,参数基本上是见名知意的,就不在标注了,如果有单词不认识,google吧,哈哈

Image.asset(String name, {
        Key key,
    AssetBundle bundle,
    double scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment: Alignment.center,
    this.repeat: ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection: false,
    this.gaplessPlayback: false,
        String package,
  })

1、 新建存放图片的目录

想要使Image加载asset加载apk内部的图片,首先需要在项目中建立放置图片的目录(名称随意,不要中文就好)
我们在lib目录的同级目录建立images文件夹,并在里面放置了一个cover.jpg的图片

2、 更细配置文件pubspec.yaml

在flutter节点下新增 文件声明 ,如下所示
flutter:
assets:

- images/cover.jpg

3、 加载目录中的图片文件

new Image.asset("images/helloflutter.png")

完整代码如下:

    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 Image.asset("images/cover.jpg")
    );
  }
}

当然,大家可以传入相应的参数来控制图片的显示效果。如,控制图片显示的大小,

body: new Image.asset("images/cover.jpg",width: 300.0,height: 200.0)

如上所示,只需要传入width和height参数即可

更多其他的参数,大家可以根据名称试一下,就不在一一演示了。

从network获取图片

构造方法:

Image.network(String src, {
    Key key,
    double scale: 1.0,//缩小倍数
    this.width,//宽
    this.height,//高
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment: Alignment.center,
    this.repeat: ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection: false,
    this.gaplessPlayback: false,
    Map<String, String> headers,
  })

基本上和上面asset的参数相同,只不过从网络获取的方式可以传入请求头。

但是,从我网络获取图片展示的调用方式就比从asset读取显示方便的多,只需要一行代码就可以搞定
把Scaffold body的参数写为:

new Image.network("http://pic1.win4000.com/wallpaper/2017-10-25/59f083092ed4f.jpg")

当然,上面既然提到了Flutter支持Gif,那么我们找一张我们在网上找一张Gif图片试一下。

和上面的加载网络图片的做法一样,我们把地址替换掉上面的地址再次运行。

可以看到Flutter的Image控件可以很好的支持Gif图片的展示。

小结

Text 组件是开发中使用到最多的组件,主要控制文本的展示
Text 组件的构造参数可以传入多个属性对象,从而达到控制文字大小、颜色、对齐方式等等特性。
Image 组件有5个不同的构造,使得开发者可以从不同的位置去加载图片
Image 组件原生支持webPng和gif图片,不需要使用第三方库。

试一试

根据上面讲到的知识实现如下效果(根据TextStyle属性,字体大小,字体颜色为默认)

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

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

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

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