【笔记】Flutter的Text文本组件

发表于 更新于 分类于 阅读次数：

前言

Flutter的Text文本组件学习笔记

Text文本组件

指定文本内容

lib/main.dart
1
2
3
4
5
6
7
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text("文本内容"),
  ));
}

指定文本方向（顺序）

从左到右

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textDirection: TextDirection.ltr,
    ),
  ));
}

从右到左

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textDirection: TextDirection.rtl,
    ),
  ));
}

指定文本对齐方式

TextAlign.left：居左
TextAlign.center：居中
TextAlign.right：居右
TextAlign.justfy：两边对其

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textAlign: TextAlign.left,
    ),
  ));
}

指定超出内容的显式方式

TextOverflow.clip：裁剪
TextOverflow.fade：渐隐
TextOverflow.ellipsis：省略号

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      overflow: TextOverflow.clip,
    ),
  ));
}

指定自体显示倍率

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textScaleFactor: 4,
    ),
  ));
}

指定最大行数

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      maxLines: 1,
    ),
  ));
}

指定文本样式

指定修饰线

TextDecoration.none：无修饰线
TextDecoration.lineThrough：中划线
TextDecoration.overline：上划线
TextDecoration.underline：下划线

1
2
3
4
5
6
7
8
9
10
11
12
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      style: TextStyle(
          decoration: TextDecoration.none
      ),
    ),
  ));
}

指定修饰线风格

TextDecorationStyle.solid：缺省值，单线
TextDecorationStyle.dotted：虚线
TextDecorationStyle.double：双线
TextDecorationStyle.wavy：波浪线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textDirection: TextDirection.ltr,
      style: TextStyle(
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.dotted
      ),
    ),
  ));
}

指定单词间距

  • 值越大越远，值越小越近，可以为负数
1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textDirection: TextDirection.ltr,
      style: TextStyle(
          wordSpacing: 1
      ),
    ),
  ));
}

指定字母间距

  • 值越大越远，值越小越近，可以为负数
1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textDirection: TextDirection.ltr,
      style: TextStyle(
          letterSpacing: 1
      ),
    ),
  ));
}

指定文字斜体

FontStyle.normal：缺省值，非斜体
FontStyle.italic：斜体

1
2
3
4
5
6
7
8
9
10
11
12
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      style: TextStyle(
          fontStyle: FontStyle.normal
      ),
    ),
  ));
}

指定文本字号

1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 20
      ),
    ),
  ));
}

指定文本颜色

通过颜色值常量
1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textDirection: TextDirection.ltr,
      style: TextStyle(
        color: Colors.red
      ),
    ),
  ));
}
通过rgba值
1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textDirection: TextDirection.ltr,
      style: TextStyle(
        color: Color.fromRGBO(255, 255, 255, 1)
      ),
    ),
  ));
}

指定文字加粗

FontWeight.normal：缺省值，非粗体
FontWeight.bold：粗体
FontWeight.w900：指定粗度值

1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontWeight: FontWeight.normal
      ),
    ),
  ));
}

指定标题等级

Theme.of(context).textTheme.headline1：1级标题
Theme.of(context).textTheme.headline2：2级标题
Theme.of(context).textTheme.headline3：3级标题
Theme.of(context).textTheme.headline4：4级标题
Theme.of(context).textTheme.headline5：5级标题
Theme.of(context).textTheme.headline6：6级标题

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      style: Theme.of(context).textTheme.headline1,
    ),
  ));
}

指定标题尺寸

Theme.of(context).textTheme.headlineSmall：小尺寸
Theme.of(context).textTheme.headlineMedium：中尺寸
Theme.of(context).textTheme.headlineLarge：大尺寸

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "文本内容",
      style: Theme.of(context).textTheme.headlineSmall,
    ),
  ));
}

完成

参考文献

哔哩哔哩——筱筱知晓