U2647's blog 一个热爱学习的 Java 程序员,喜欢 Vue,喜欢深度学习 Dubbo Flutter SpringBoot Debug Notes Java LeetCode Python Redis Android DesignPattern mdi-home-outline 首页 mdi-cloud-outline 标签云 mdi-timeline-text-outline 时间轴 mdi-draw-pen 文章总数 62
Flutter 学习笔记(一) Text 组件 Flutter 学习笔记(一) Text 组件 Flutter Text 组件 TextStyle Shadow mdi-cursor-default-click-outline 点击量 62

1. Text 组件简介

Text 组件显示单个样式的文本字符串。字符串可能会跨越多行,也可能全部显示在同一行上,具体取决于布局约束。

2. Text 属性

2.1 data 属性

该 Text 要显示的文本。值为一串字符串。

2.2 textAlign 属性

文本的对齐方式。可选值有:
  • TextAlign.start

  • TextAlign.end、

    这两个值与文本对齐的方向有关,如果方向是从左向右的,那么start就是左对齐,end就是右对齐。反之亦然

  • TextAlign.left

  • TextAlign.right

    这两个值跟文本方向无关,left 是左对齐,right是右对齐

  • TextAlign.center

    文本居中

  • TextAlign.justify

    文本两端对齐

PS: 对齐方式可以参考 word 里的对齐方式

2.3 textDirection

该文本的对齐方向。
  • TextDirection.ltr

    如果 textAlign 的属性是 start 则左对齐,end 是右对齐

  • TextDirection.rtl

    如果 textAlign 的属性是 start 则右对齐,end 是左对齐

2.4 maxLines

最大行。最多显示的行数

2.5 overflow

处理溢出的文本方式
  • TextOverflow.ellipsis

    以 … 显示。 例如: xxx…

  • TextOverflow.clip

    直接剪切溢出的文本

  • TextOverflow.fade

    将溢出的文本淡化为透明

2.6 textScaleFactor

每个逻辑像素的字体像素数

3 Text Style

Text 组件的样式

3.1 background

设置 Text 的背景。值是一个 Paint 对象。可以设置 Paint 对象的 color属性来设置 Text 的背景色

3.2 color

设置字体颜色

3.3 decoration

设置文本装饰,上划线、下划线、中划线等。

3.4 decorationColor

上划线、下划线、中划线等线条的颜色

3.5 decorationStyle

文本装饰的样式。虚线、短横线、波浪线等
  • TextDecorationStyle.dashed

    画一条虚线。例如 ————–

  • TextDecorationStyle.dotted

    画一条带点的虚线 例如 …………

  • TextDecorationStyle.solid

    画一条实线。例如 _______________

  • TextDecorationStyle.double

    画两条实线。

  • TextDecorationStyle.wavy

    画两条波浪线

3.6 fontSize

字体大小

3.7 fontStyle

字体样式。斜体和标准样式
  • FontStyle.italic

    斜体

  • FontStyle.normal

    标准字体

3.8 fontWeight

字体粗细
  • FontWeight.w100 - w900

    FontWeight.w100 最细 FontWeight.w900 最粗

3.9 foreground

Text 前景色,即字体颜色。值为一个 Paint 对象,类似于 background 属性

PS:这个属性与 color冲突,二者不能共存,必须有一个值为 null。

3.10 height

类似于 word 里的行间距。这个值是 行高的倍数。
如果 值是 1.5 则行间距是 1.5 倍的行高

3.11 letterSpacing

字母与字母之间的间距。单位是逻辑像素。 
例如 h  e   l   l   o

3.12 wordSpacing

单词与单词之间的间距。单位是逻辑像素
例如 hello      world

4 shadows

文字阴影。
PS:这个值的属性是 List<Shadow>。也就是说可以退添加多个阴影

4.1 color

阴影颜色

4.2 offset

阴影在 x轴和y轴的偏移量

4.3 blurRadius

阴影模糊度

5 TextDemo 源码

import 'package:flutter/material.dart';

void main() => runApp(TextDemo());
class TextDemo extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    var background = Paint();
    background.color = Color.fromARGB(111, 255, 1, 1);
    var foreground = Paint();
    foreground.color =  Color.fromARGB(255, 1, 122, 11);

    var shadowsList = List<Shadow>();
    shadowsList.add(Shadow(
      color: Color.fromARGB(111, 255, 1, 1),
      offset: Offset(1, 20),
      blurRadius:1));
    shadowsList.add(Shadow(
      color: Color.fromARGB(255, 1, 122, 11),
      offset: Offset(20, 1),
      blurRadius:10));

    return MaterialApp(
      title: 'Text Demo',
      home: Scaffold(
        body: Center(
          child: Text(
            'hello ,text,好好学习,天天向上!好好学习,天天向上!好好学习,天天向上!好好学习,天天向上!好好学习,天天向上',
            textAlign: TextAlign.start,
            textDirection: TextDirection.rtl,
            maxLines: 2,
            overflow: TextOverflow.fade ,
            //textScaleFactor: 1,
            style: TextStyle(
              //background: background,
              //color: Color.fromARGB(255, 1, 122, 11),
              decoration: TextDecoration.underline,
              decorationColor: Color.fromRGBO(255, 1, 1, 11),
              decorationStyle: TextDecorationStyle.wavy ,
              fontSize: 44,
              fontStyle: FontStyle.normal,
              fontWeight: FontWeight.w900,
              //与color 值冲突
              foreground: foreground,
              height: 1.5,
              letterSpacing: 11,
              //shadows: shadowsList,
              wordSpacing: 122
              ),
              ),
              
        ),
      ),
    );
  }

} 
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
我的GitHub 我的LeetCode 我的掘金
Powered by Hexo Powered by three-cards
Copyright © 2017 - {{ new Date().getFullYear() }} 某ICP备xxxxxxxx号