flutter--hello world和文本组件Text、TextSpan

Hello World

代码的世界从hello world开始，flutter也一样。
创建一个项目，将lib文件夹下的main.dart改为如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
      body: new Center(
        child: new Text(
          'hello world'
          )
        )
      )
    );
  }
}

跑起来
image.png
hello world完成了。

先简单介绍两个组件

1、Scaffold

打开任意一款app，顶部标题栏、侧边抽屉、底部导航等…，基本上都有这里边的一个或者几个，基于这个现状，material很贴心的提供了scaffold这个组件，相当于一个页面的骨架，可以把上边说的那些东西拼到里边。

2、Center

很简单的一句话，这个组件的子组件水平垂直居中。
这两个只是简单的介绍一下，以后再详细说，接下来是这篇笔记的主角。

文本Widget

一、Text

hello world这个demo里用过了，相当于html里边的<p></p>，但是又有所不同，都知道p标签独占一行，宽度如果没有限制则为父级宽度，Text也是独占一行，但是宽度为内容宽度，并且没有width属性。
看上边的demo，是不是感觉字体有点小，还想换个颜色，加个下划线…还有其他各种骚操作。
先看一下官网给出的Text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const Text(
  String data,                                   //文本上边demo的hello world
  {
    Key key,                                   //唯一标识，相当于react中map渲染节点的key
    TextStyle style,                            //样式
    StrutStyle strutStyle,                    //？？？不知道干啥的
    TextAlign textAlign,                      //对齐方式
    TextDirection textDirection,          //文本的书写顺序
    Locale locale,                                //设置语言环境  就是国际化，多语言支持
    bool softWrap,                              //文本过长是否自动换行
    TextOverflow overflow,                  //对溢出文本的显示方式
    double textScaleFactor,                //每个逻辑像素的字体像素数
    int maxLines,                                //文本的最大行数
    String semanticsLabel,                  //图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
  }
)

接下来挨个看

1、TextStyle

设置字体的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const TextStyle({
  bool inherit: true,                                  //是否继承父级
  Color color,                                           //字体颜色
  Color backgroundColor,                        //背景色
  double fontSize,                                      //字体大小
  FontWeight fontWeight,                          //字体粗细
  FontStyle fontStyle,                                //正常/斜体
  double letterSpacing,                              //字符间距可为负
  double wordSpacing,                              //字间距（英文单词间距）
  TextBaseline textBaseline,                        //文本对齐基线
  Height height,                                          //Text的高度，相当于行高
  Local locale,                                            //设置语言环境  就是国际化，多语言支持
  Paint foreground,                                      //不知道是啥
  Paint background,                                      //文本背景色作用和backgroundColor相同
  List<Shadow> shadows,                            //文字阴影
  TextDecoration decoration,                        //划线
  Color decorationColor,                                //划线颜色
  TextDecoration decorationStyle,                 //划线种类
  double decorationThickness,                    //划线的粗细
  String debugLabel,                                   //文本样式的文本描述，仅在debug模式下有效           
  String fontFamily,
  List<String> fontFamilyFallback,
  String package,
})

接下来详解

color

flutter的color支持5种写法

1
2
3
4
5
6
7
style: TextStyle(
  color: Color(0xFF42A5F5),                                            //十六进制色号两个F的位置为透明度，取值范围00～FF
  color: Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5),         //十六进制色号第一位为透明度，从00～FF
  color: Color.fromARGB(255, 66, 165, 245),                   //十进制色号第一位为透明度，0~255
  color: Color.fromRGBO(66, 165, 245, 1.0),                    //最后一位为透明度, 0.0~1.0
  color: Colors.red                                                   //material内置
)

backgroundColor

背景色和color的写法一样

fontSize

字体大小，double类型

1
2
3
style: TextStyle(
  fontSize: 30.0
)

不用写单位，flutter的单位是dp。

letterSpacing

字符间距

1
2
3
style: TextStyle(
  letterSpacing: 6.0
)

wordSpacing

1
2
3
style: TextStyle(
  wordSpacing: 10.0
)

textBaseline

对齐基线，类似css的基线，alphabetic/ideographic两个值

1
2
3
style: TextStyle(
  textBaseline: TextBaseline.alphabetic
)

alphabetic：简单理解为英文的对齐基线
ideographic：简单理解为中文对齐基线

height

1
2
3
style: TextStyle(
  height: 1.5
)

和css一样1.5就是字体大小的1.5倍。

background

这个注意了，不是Color，是Paint。

1
2
3
style: TextStyle(
  background: Paint() ..color = Colors.blue
)

这个和backgroundColor一样，两者不能共存。
..是dart语法糖，前一个函数的返回值的属性，说的有点绕，看代码。

1
2
3
4
Paint() ..color = Colors.blue;
//下边代码的简写
Paint pg = Paint();
pg.color = Colors.blue;

shadows

List类型

1
2
3
style = TextStyle(
  shadows: [Shadow(color: Colors.black,offset: Offset(5, 6),blurRadius: 3 )]
)

这里说明一下参数
color：阴影颜色，
offset：两个参数xy方向的偏移量，
blurRadius: 模糊程度

decoration

和css的text-decoration类似

1
2
3
style = TextStyle(
  decoration: TextDecoration.underline
)

有5个值
underline：下划线
none：无划线
overline：上划线
lineThrough：中划线
combine：这个就厉害了，可以传入一个List，三线齐划

decorationColor

划线的颜色，默认和字体颜色相同。

1
2
3
style: TextStyle(
  decorationColor:  Colors.black
)

decorationStyle

默认为实线

1
2
3
style = TextStyle(
  decorationStyle: TextDecorationStyle.dashed
)

dashed：点划线
dotted：虚线
double：双划线
solid：实线
wavy：波浪线

decorationThickness

划线的粗细，默认为1

1
2
3
style = TextStyle(
  decorationThickness: 3.0
)

debugLabel

1
2
3
style = TextStyle(
  debugLabel: 'test
)

加上之后没找到怎么看这个提示。。。

2、strutStyle

看文档这个应该是style的简写，类似css里边的background/font这种，可以把样式写到一起，样式是有顺序的，这里不研究了，不推荐这种写法，可读性不高不好维护。

3、textAlign

对齐方式，和css的text-align基本上相同

1
textAlign: TextAlign.start

start：起始位置
end：结束位置
center：居中
left：左对齐
right：右对齐
justify：两端对齐

4、textDirection

1
textDirection: TextDirection.ltr

ltr：从左到右
rtl：从右到左
left to right，right to left

5、locale

1
locale: Locale('fr', 'CH')

这个不是添加了就会自动翻译，还要配置其他东西，以及第三方包，以后再详细说。

6、softWrap

1
softWrap: true

文本超出容器时是否自动换行，默认为true，为false时文本超出容器部分默认被剪切。

7、overflow

1
overflow: TextOverflow.clip

对文本溢出部分的处理，类似css中的overflow。
clip：切断，超出部分不显示，默认值
ellipsis：超出部分不显示，显示…
visible：超出部分强制显示
fade：超出部分淡出

8、textScaleFactor

1
textScaleFactor: 1.5

缩放的倍数

9、maxLines

1
maxLines: 2

文本的最大行数

####10、semanticsLabel

1
semanticsLabel: 'test'

这个应该是相当于html中img的alt。
下面上完整代码，把上边demo中的Center换成Container（相当于html中的div，下篇笔记详细说），再加个width便于观察样式和属性对文本的改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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(
          width: 400.0,
          child: new Text(
            'hello world hello world hello world hello world hello world hello world',
            style: TextStyle(
              color: Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5),
              backgroundColor: Colors.red,
              fontSize: 30.0,
              letterSpacing: 6.0,
              wordSpacing: 15.0,
              height: 2.0,
//              background: Paint() ..color = Colors.blue,
              shadows: [Shadow(color: Colors.black,offset: Offset(5, 6),blurRadius: 3 )],
              decoration: TextDecoration.combine([
                TextDecoration.underline,
                TextDecoration.overline
              ]),
              decorationColor: Colors.black,
              decorationStyle: TextDecorationStyle.wavy,
              decorationThickness: 3.0,
              debugLabel: 'text'
            ),
            textAlign: TextAlign.justify,
            textDirection: TextDirection.rtl,
            locale: Locale('fr', 'CH'),
            softWrap: true,
            overflow: TextOverflow.visible,
            textScaleFactor: 1.5,
            maxLines: 2,
            semanticsLabel: 'test'
          )
        )
      )
    );
  }
}

学习的时候建议不要像这里一样加太多的样式和属性，不相关的属性或者样式先单独练习再组合，有的需要配合使用，比如溢出softWrap、overflow、maxLines这些。

二、TextSpan

html里有个span这里有个TextSpan，作用基本相同，文字放一行，下面看代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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 Center(
          child: new Text.rich(
            TextSpan(
              children: [
                new TextSpan(text: 'hello: '),
                new TextSpan(
                  text: 'world',
                  style: TextStyle(
                    color: Colors.red
                  )
                )
              ]
            )
          )
        )
      )
    );
  }
}

效果
image.png
TextSpan需要套一层Text.rich，可以有children，children同为TextSpan，可以分别加不同的样式，这里只能加样式，不可以加其他的属性。
文本组件到这里就结束了，如有遗漏欢迎补充，如有错误请指正。

  • © 2020-02 MonkeyInWind
  • GitHub

请我喝杯咖啡吧~