Flutter控件--Text 和 TextStyle

時間 2019-11-06

標籤 flutter 控件 text textstyle 欄目 HTML 简体版

原文原文鏈接

一。 Text

flutter控件練習demo地址：githubandroid

1.1 Text簡介

Text： 單一格式的文本使用比較多的，至關於 android 中的TextViewgit

1.2 基本屬性

data 要顯示的文本，必填參數 String
style 用於指定文本顯示的樣式如字體大小，顏色等，字體默認的大小是 14 ，默認樣式會繼承層級最爲接近的 DefaultTextStyle 若是再加樣式。有兩種狀況：
- TextStyle.inherit = true 至關於***繼承*** 最爲接近的DefaultTextStyle ，好比要讓DefaultTextStyle的字體大小，顏色同樣，直接再設置個粗體便可
- TextStyle.inherit = false 徹底重寫了樣式
strutStyle
textAlign 對齊方式,
- TextAlign.left : 對齊容器左邊緣的 Text
- TextAlign.right : 對齊容器右邊緣的 Text
- TextAlign.center : 對齊容器中心的 Text
- TextAlign.justify （感受不多用）: 拉伸以結束的文本行以填充容器的寬度(暫時不知道怎麼用)
- TextAlign.start （感受不多用）：對齊容器前緣的 Text。對於從左到右的文本([TextDirection.ltr])，這是左邊緣，對於從右到左的文本([TextDirection.rtl])，這是右邊緣
- TextAlign.end （感受不多用）：對齊容器尾部邊緣的 Text。/對於從左到右的文本([TextDirection.ltr])，這是右邊緣。對於從右到左的文本([TextDirection.rtl])，這是左邊緣
textDirection（感受不多用） text 的流向
softWrap 是否容許換行 false 表示只顯示一行，若是設置了 maxLines 此屬性失效
overflow 文本顯示的截斷方式
textScaleFactor 文本的縮放比例
maxLines text顯示的最大行數
semanticsLabel 暫時不知道什麼用

1.3 demo

import 'package:flutter/material.dart';

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        color: Colors.red,
        width: 200,
        height: 200,
        child: Text(
          "1234561222222222222222222222222222333222ssssssssssssssssss",
          textAlign: TextAlign.left,
          // 對齊方式
//            textDirection: TextDirection.ltr, // 文本流向
          softWrap: false, // 是否容許換行 ， 若是設置了 maxLines 此屬性失效
          overflow: TextOverflow.ellipsis,
          // 文本的截斷方式
          // TextOverflow.ellipsis 以三個點結尾 ，
          // TextOverflow.clip（默認的截斷方式）強制截斷，沒有任何商量
          //  TextOverflow.fade 褪色的截斷
          textScaleFactor: 2,// 放大比例（估計通常用不到，通常直接設置 style 來設置 大小
            maxLines:3, // 最大的行數
//            semanticsLabel: "adfadsfasdf", (暫時不知道什麼用)
        ));
  }
}
複製代碼

二 RichText 和 Text.rich

1.1 Text簡介

RichText Text.rich： 能夠作出多種樣式的文本絢麗多彩，至關於 android 中的SpannableStringgithub

2.1 說明

Text.rich 和 Text 源碼都是經過  RichText 實現的
複製代碼

2.2 demo圖片

demo代碼

class TextRichDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text("TextRich"),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text.rich(
                TextSpan(
                    // 必須設置一個父TextStyle 不然 字體是白色
                    style: TextStyle(
                        color: Colors.black, fontWeight: FontWeight.bold),
                    text: "Text.rich 實現： ",
                    children: <TextSpan>[
                      TextSpan(
                          text: '絢麗',
                          style: TextStyle(
                              color: Colors.red,
                              fontWeight: FontWeight.normal)),
                      TextSpan(
                          text: '文本',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.blue,
                          )),
                      TextSpan(
                          text: '樣式',
                          style: TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.black,
                              fontSize: 18,
                              decoration: TextDecoration.lineThrough,
                              fontWeight: FontWeight.normal)),
                    ]),
                style: TextStyle(height: 2),
              ),
              RichText(
                  text: TextSpan(
                // 必須設置一個父TextStyle 不然 字體是白色
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
                text: "RichText 實現： ",
                children: <TextSpan>[
                  TextSpan(
                      text: '絢麗',
                      style: TextStyle(
                          color: Colors.red, fontWeight: FontWeight.normal)),
                  TextSpan(
                      text: '文本',
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.blue)),
                  TextSpan(
                      text: '樣式',
                      style: TextStyle(
                          fontStyle: FontStyle.italic,
                          color: Colors.black,
                          fontSize: 18,
                          decoration: TextDecoration.lineThrough,
                          fontWeight: FontWeight.normal)),
                ],
              ))
            ],
          ),
        ));
  }
}
複製代碼

三。 TextStyle

Text 的樣式bash

3.1 主要屬性

inherit = true 默認樣式會繼承層級最爲接近的 DefaultTextStyle，爲true 表示繼承，false 表示徹底重寫
color 字體顏色，注意：若是有特殊的foreground，此值必須是null
fontSize 字體大小默認的是 14
fontWeight 字體的粗細程度 FontWeight.w100 -- FontWeight.w900 . 默認是FontWeight.w400，FontWeight.w700 屬於正常加粗
fontStyle FontStyle.normal正常 FontStyle.italic斜體
letterSpacing 單個字母或者漢字的距離，默認是1.0，負數能夠拉近距離
wordSpacing 單詞之間添加的空間間隔，負數能夠拉近距離
textBaseline 對齊text的水平線:
- TextBaseline.ideographic用來對齊表意文字的水平線
- TextBaseline.alphabetic 以標準的字母順序爲基線
height 文本的高度主要用於[TextSpan] 來設置不一樣的高度
foreground text的前景色，與 color 不能同時設置
background text的背景色
shadows 將在文本下方繪製的[陰影]列表
decoration 劃線，
- TextDecoration.none 沒有
- TextDecoration.underline 下劃線
- TextDecoration.overline 上劃線
- TextDecoration.lineThrough 中間的線（刪除線）
decorationColor decoration劃線的顏色
decorationStyle decoration劃線的樣式
- TextDecorationStyle.solid 實線
- TextDecorationStyle.double 畫兩條線
- TextDecorationStyle.dotted 點線（一個點一個點的）
- TextDecorationStyle.dashed 虛線（一個長方形一個長方形的線）
- TextDecorationStyle.wavy 正玄曲線
debugLabel 只在調試的使用

3.2 圖片

3.3 代碼demo

class TextStyleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Paint paintBlue = Paint();
    paintBlue.color = Colors.blue;
    Paint paintRed = Paint();
    paintRed.color = Colors.red;
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("TextStyle"),centerTitle: true,),
      body: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                "inherit=false時 默認的文字顏色是白色，至關於徹底從新樣式",
                style: TextStyle(inherit: false, color: Colors.red),
              ),
              Divider(),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    "fontWeight: ",
                    style: TextStyle(fontWeight: FontWeight.w700),
                  ),
                  Text(
                    "FontWeight.w400(默認)",
                    style: TextStyle(fontWeight: FontWeight.w400),
                  ),
                  Text(
                    "FontWeight.w700(正常加粗)",
                    style: TextStyle(fontWeight: FontWeight.w700),
                  ),
                ],
              ),
              Divider(),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    "fontStyle: ",
                    style: TextStyle(fontWeight: FontWeight.w700),
                  ),
                  Text(
                    "FontStyle.normal(正常)",
                    style: TextStyle(fontStyle: FontStyle.normal),
                  ),
                  Text(
                    "FontStyle.italic(斜體)",
                    style: TextStyle(fontStyle: FontStyle.italic),
                  ),
                ],
              ),
              Divider(),
              Text(
                "letterSpacing，每一個字符的間距",
                style: TextStyle(letterSpacing: 4),
              ),
              Divider(),
              Text(
                "wordSpacing 單詞 每一個單詞之間的距離(至關於給空格設置的距離)",
                style: TextStyle(wordSpacing: 10),
              ),
              Divider(),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    "textBaseline: ",
                    style: TextStyle(fontWeight: FontWeight.w700),
                  ),
                  Text(
                    "TextBaseline.ideographic",
                    style: TextStyle(textBaseline: TextBaseline.ideographic),
                  ),
                  Text(
                    " TextBaseline.alphabetic",
                    style: TextStyle(textBaseline: TextBaseline.alphabetic),
                  ),
                ],
              ),
              Divider(),
              Text(
                "foreground 至關於設置paint，來繪製文字",
                style: TextStyle(foreground: paintBlue),
              ),
              Divider(),
              Text(
                "background 文本的背景",
                style: TextStyle(background: paintRed),
              ),
              Divider(),
              Text(
                "shadows 文本的陰影",
                style: TextStyle(shadows: [
                  BoxShadow(
                      color: Colors.grey, offset: Offset(-1, -1), blurRadius: 5)
                ]),
              ),
              Divider(),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    "decoration: ",
                    style: TextStyle(fontWeight: FontWeight.w700),
                  ),
                  Text(
                    "TextDecoration.overline(上劃線)",
                    style: TextStyle(decoration: TextDecoration.overline),
                  ),
                  Text(
                    "TextDecoration.none(沒有劃線)",
                    style: TextStyle(decoration: TextDecoration.none),
                  ),
                  Text(
                    "TextDecoration.underline(下劃線)",
                    style: TextStyle(decoration: TextDecoration.underline),
                  ),
                  Text(
                    "TextDecoration.lineThrough（中劃線，刪除線）",
                    style: TextStyle(
                        decoration: TextDecoration.lineThrough,
                        textBaseline: TextBaseline.alphabetic),
                  ),
                ],
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    "decorationStyle: ",
                    style: TextStyle(fontWeight: FontWeight.w700),
                  ),
                  Text(
                    "TextDecorationStyle.solid(實線)",
                    style: TextStyle(
                        decoration: TextDecoration.lineThrough,
                        decorationStyle: TextDecorationStyle.solid),
                  ),
                  Text(
                    "TextDecorationStyle.double(兩條線)",
                    style: TextStyle(
                        decoration: TextDecoration.lineThrough,
                        decorationStyle: TextDecorationStyle.double),
                  ),
                ],
              ),
            ],
          )),
    );
  }
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。