04*：Flutter之基礎Text：style: TextStyle(decorationStyle: TextDecorationStyle.wavy,fontSize: 18,decoration: TextDecoration.underline,), TextSpan

問題

 

目錄

 

預備

TextOverflow overflow

文本溢出時的表現形式。

1. TextOverflow.ellipsis：文本溢出顯示省略號
2. TextOverflow.clip：文本溢出時直接裁剪掉超出部分，不作任何處理
3. TextOverflow.fade：溢出文本淡入透明
4. TextOverflow.visible: 不作處理

正文

Flutter 的核心設計思想便是:Everythind is a Widget。在flutter的世界里，包括views,view controllers,layouts等在內的概念都建立在Widget之上。widget是flutter功能的抽象描述。所以掌握Flutter的基礎就是學會使用widget開始。

1：Text:創建一個Text文本

Text Widget用於顯示簡單樣式文本，它包含一些控制文本顯示樣式的一些屬性，類似於Android中的TextView

屬性	作用
data	Text顯示的文本，必填參數
textAlign	文本的對齊方式,可以選擇左對齊、右對齊還是居中對齊
maxLines	文本顯示的最大行數
overflow	文本顯示的截斷方式
textScaleFactor	文本的縮放比例
style	文本樣式：用於指定文本顯示的樣式如顏色、字體、粗細、背景等

 

 

 

 

 

 

 

 

 

文本樣式，樣式屬性如表：

屬性	說明
color	文本顏色。文本的前景色，不能與foreground共同設置
decoration	繪制文本裝飾: 下划線（TextDecoration.underline） 上划線（TextDecoration.overline） 刪除線（TextDecoration.lineThrough） 無（TextDecoration.none）
decorationColor	繪制文本裝飾的顏色。
decorationStyle	繪制文本裝飾的樣式: 畫一條虛線 TextDecorationStyle.dashed 畫一條虛線 TextDecorationStyle.dotted 畫兩條線 TextDecorationStyle.double 畫一條實線 TextDecorationStyle.solid 畫一條正弦線(波浪線) TextDecorationStyle.wavy
fontWeight	繪制文本時使用的字體粗細: FontWeight.bold 常用的字體重量比正常重。即w700 FontWeight.normal 默認字體粗細。即w400 FontWeight.w100 薄，最薄 FontWeight.w200 特輕 FontWeight.w300 輕 FontWeight.w400 正常/普通/平原 FontWeight.w500 較粗 FontWeight.w600 半粗體 FontWeight.w700 加粗 FontWeight.w800 特粗 FontWeight.w900 最粗
fontStyle	字體變體： FontStyle.italic 使用斜體 FontStyle.normal 使用直立
textBaseline	對齊文本的水平線: TextBaseline.alphabetic：文本基線是標准的字母基線 TextBaseline.ideographic：文字基線是表意字基線；如果字符本身超出了alphabetic 基線，那么ideograhpic基線位置在字符本身的底部。
fontFamily	使用的字體名稱（例如，Roboto）。如果字體是在包中定義的，那么它將以'packages / package_name /'為前綴（例如'packages / cool_fonts / Roboto'）
fontSize	字體大小(pt、sp)，默認為14個邏輯像素(14pt、14sp)
letterSpacing	水平字母之間的空間間隔（邏輯像素為單位）。可以使用負值來讓字母更接近。
wordSpacing	單詞之間添加的空間間隔（邏輯像素為單位）。可以使用負值來使單詞更接近。
height	文本行與行的高度，作為字體大小的倍數
background	文本背景色
foreground	文本的前景色，不能與color共同設置

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

富文本編輯器 

Flutter Text還提供了富文本編輯器，可以讓一個Text中內容有着不同顏色、大小等樣式。請使用命名構造函數 Text.rich

代碼示例

body: Align(
          child: Column(
            children: <Widget>[
              Text('默認文本顯示',),
              Text('文本大小設置',
                style: TextStyle(fontSize: 20,),
              ),
              Text(
                '這一行文本是：當字數太多，屏幕寬度着不下的時候在文本最后顯示省略號',
                overflow: TextOverflow.ellipsis,
              ),
              Text(
                '文本添加背景顏色',
                style: TextStyle(backgroundColor: Color.fromARGB(88, 255, 0, 0)),
              ),
              Text(
                '文本添加前景顏色',
                style: TextStyle(foreground: pf),
              ),
              Text(
                '文本添加顏色',
                style: TextStyle(fontWeight: FontWeight.bold,color: Color.fromARGB(100, 0, 0, 128)),
              ),
              Text(
                '文本添加下划線',
                style: TextStyle(decoration: TextDecoration.underline),
              ),
              Text(
                '文本添加上划線',
                style: TextStyle(decoration: TextDecoration.overline),
              ),
              Text(
                '文本添加刪除/中划線',
                style: TextStyle(decoration: TextDecoration.lineThrough),
              ),
              Text(
                '文本划線顏色',
                style: TextStyle(decoration: TextDecoration.underline,decorationColor: Color(0xffff0000)),
              ),
              Text(
                '文本兩條下划線',
                style: TextStyle(decorationStyle: TextDecorationStyle.double,fontSize: 18, decoration: TextDecoration.underline,),
              ),
              Text(
                '文本虛線下划線',
                style: TextStyle(decorationStyle: TextDecorationStyle.dashed,fontSize: 18,decoration: TextDecoration.underline,),
              ),
              Text(
                '文本點線下划線',
                style: TextStyle(decorationStyle: TextDecorationStyle.dotted,fontSize: 18,decoration: TextDecoration.underline,),
              ),
              Text(
                '文本實線下划線',
                style: TextStyle(decorationStyle: TextDecorationStyle.solid,fontSize: 18,decoration: TextDecoration.underline,),
              ),
              Text(
                '文本波浪線下划線',
                style: TextStyle(decorationStyle: TextDecorationStyle.wavy,fontSize: 18,decoration: TextDecoration.underline,),
              ),
              Text(
                '文本默認加粗',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(
                '文本粗細比重 w100 -- w900',
                style: TextStyle(fontWeight: FontWeight.w900),
              ),
              Text(
                '文本斜體字',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
              Text(
                '單詞之間間隔，中文無效。How are you',
                style: TextStyle(wordSpacing: 20),
              ),
              Text(
                '文本字與字之間間隔',
                style: TextStyle(letterSpacing: 20),
              ),
              Text(
                '文本行高（字體倍數）',
                style: TextStyle(height: 1.5),
              ),
 
            ],
          ),
        ),

效果圖

 

二、TextSpan

1：構造器

const TextSpan({
    this.text,
    this.children,
    TextStyle style,
    this.recognizer,
    this.semanticsLabel,
  }) : super(style: style,);

2：代碼示例

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class TextSpanDemo extends StatelessWidget {
  TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
          Text.rich(TextSpan(children: [
            TextSpan(text: 'Hello ', style: TextStyle(color: Colors.blue)),
            TextSpan(
                text: 'world!',
                style: TextStyle(color: Colors.green, fontSize: 20.0))
          ])),
        ]),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text.rich(TextSpan(children: [
              TextSpan(
                text: 'http://',
              ),
              TextSpan(
                  text: 'www.baidu.com',
                  style: TextStyle(color: Colors.green, fontSize: 20.0),
                  recognizer: tapGestureRecognizer..onTap = (){
                    print('www.baidu.com');
                  }
              )
            ])),
          ],
        )
      ],
    );
  }
}

2：TextSpan屬性說明

String text　　要顯示的文本信息

List<InlineSpan> children　添加子節點

GestureRecognizerrecognizer　　手勢識別器

 

注意

 

引用