Flutter学习：基础组件（一）_flutter foreground

1.Text

用于显示单个样式的文本控件，字符串可以显示一行或者多行，具体取决于布局约束。
text的属性值：

 const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,//图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
  }) : assert(data != null),
       textSpan = null,
       super(key: key);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

代码如下：

class TestText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text(
      'hello world hello world hello world hello world hello world hello world',
      textAlign: TextAlign.left,
      textDirection: TextDirection.ltr,
      locale: Locale.fromSubtags(languageCode: 'und'),
      softWrap: true,
      overflow: TextOverflow.clip,
      textScaleFactor: 1.5,
      maxLines: 2,
      semanticsLabel: ,
      style: TextStyle(
          inherit: false,
          color: Colors.blue,
          fontSize: 20,
          height: 1
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

对于文字样式属性的基本了解：

style: TextStyle(
          inherit: false,
          color: Colors.blue,
          fontSize: 20,
          fontWeight: FontWeight.w100,
          fontStyle: FontStyle.italic,
          letterSpacing: 1.0,
          wordSpacing: 20,
          textBaseline: TextBaseline.ideographic,
          height: 1,
          decoration: TextDecoration.lineThrough,
          decorationStyle: TextDecorationStyle.dashed,
          background:mPaint,
      ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.Text.rich

可以显示具有不同样式TextSpan的段落。
在他的构造器中多了TextSpan参数。

const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }): assert(textSpan != null),
      data = null,
      super(key: key);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

TextSpan的构造器为：

const TextSpan({
    this.style,
    this.text,
    this.children,
    this.recognizer,
  });
1
2
3
4
5
6

对于这几个参数的介绍：

class TestTextRich extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        text: "hello world",
        children: <TextSpan>[
          TextSpan(
              text: "Hello world",
              style: TextStyle(
                  inherit: true,
                  fontStyle: FontStyle.italic
              )
          ),
          TextSpan(
              text: "hello world",
              style: TextStyle(
                  inherit: false,
                  fontWeight: FontWeight.bold,
                  fontSize: 50,
                  decoration: TextDecoration.underline
              )
          ),
        ],
        style: TextStyle(
          inherit: false,
          fontSize: 100,
          fontStyle: FontStyle.italic,
        ),
        recognizer: new TapGestureRecognizer()
          ..onTap = () {
            print("点击了父TextSpan");
          },
      ),
      softWrap: true,
      textDirection: TextDirection.rtl,
      textAlign: TextAlign.center,
    );
  }
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