Text概述

即一個單一樣式的文本 Text Widget就是顯示單一樣式的文本字符串。字符串可能會跨越多行，也可能全部顯示在同一行上，具體取決于布局約束。

style參數可選。如果省略了，文本將使用最近的DefaultTextStyle的樣式。如果給定樣式的TextStyle.inherit屬性為true（默認值），則給定樣式將與最近的DefaultTextStyle合并。例如，比如可以在使用默認字體系列和大小時使文本變為粗體。

第一個構造函數：

const Text(this.data, {Key key,this.style,this.strutStyle,this.textAlign,this.textDirection,this.locale,this.softWrap,this.overflow,this.textScaleFactor,this.maxLines,this.semanticsLabel,}) : assert(data != null),textSpan = null,super(key: key); 復制代碼

1. style及構造函數

style對文本的樣式，顏色，字體大小等有更加詳盡的定制，如果省略該參數則使用DefaultTextStyle

const TextStyle({this.inherit = true,this.color,this.fontSize,this.fontWeight,this.fontStyle,this.letterSpacing,this.wordSpacing,this.textBaseline,this.height,this.locale,this.foreground,this.background,this.shadows,this.decoration,this.decorationColor,this.decorationStyle,this.debugLabel,String fontFamily,List<String> fontFamilyFallback,String package,}) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',_fontFamilyFallback = fontFamilyFallback,_package = package,assert(inherit != null),assert(color == null || foreground == null, _kColorForegroundWarning); 復制代碼

• inherit 是否將null值替換為祖先文本樣式中的值（例如，在TextSpan樹中）。如果為false，則沒有顯式值的屬性將恢復為默認值：白色，字體大小為10像素，采用無襯線字體。
• color 字體的顏色
• fontSize 文字大小,單位為像素，如果沒有指定大小則默認為14像素，可以乘以textScaleFactor來增加字體大小以便用戶更加方便的閱讀
• fontWeight 字體厚度，可以使文本變粗或變細
• fontStyle 字體變形，有兩種 FontStyle.normal（字體直立）， FontStyle.italic（字體傾斜）
• letterSpacing 字母間距，整數拉開字母距離，若是負數則拉近字母距離
• wordSpacing，單詞間距，同上
• textBaseline 用于對齊文本的水平線
• height 文本行高，為字體大小的倍數
• locale 用于選擇區域特定符號的區域設置
• foreground 這個未知
• background 文本的背景顏色
• shadows 文本的陰影可以利用列表疊加處理，例如shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)], color即陰影的顏色， offset即陰影相對文本的偏移坐標，blurRadius即陰影的模糊程度，越小越清晰
• decoration 文字的線性裝飾，比如 underline 下劃線， lineThrough刪除線
• decorationColor 文本裝飾線的顏色
• decorationStyle 文本裝飾線的樣式，比如 dashed 虛線
• debugLabel 這種文本樣式的可讀描述，此屬性僅在調試構建中維護。

簡單使用案例：

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // Text詳解 class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(title: 'Flutter_Wieghts',home: Scaffold(appBar: AppBar(title: Text('Text Learn'),),body: Center(child: Text('Hello World'*4,style: TextStyle(inherit: true,color: Colors.white,fontSize: 30.0,fontWeight: FontWeight.w400,fontStyle: FontStyle.italic,letterSpacing: 5,wordSpacing: 20,textBaseline: TextBaseline.alphabetic,height: 1.2,locale: Locale('fr', 'CH'),background: Paint() ..color = Colors.blue,shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)],decoration: TextDecoration.underline,decorationColor: Colors.black54,decorationStyle: TextDecorationStyle.dashed,debugLabel: 'test',),),),));} }復制代碼

示例效果：

轉載于:https://juejin.im/post/5cbf34275188250a8e789c95

總結

以上是生活随笔為你收集整理的Flutter 基础Widgets Text()之TextStyle详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。