技術標籤：flutter

本文整理一些專案中常用但是寫法比較複雜的Text效果

文章目錄

• • 一、字型間隔和行間隔設定
  • 二、文字居中顯示
  • 三、多行文字進行省略

本文整理些日常開發中常用但是寫起來比較複雜的效果示例

一、字型間隔和行間隔設定

效果如下：

程式碼如下：

Text("我們將在2小時內，將提現\n金額轉入您的微信賬戶",
  textAlign: TextAlign.center,//文字居中
  style: TextStyle(
    fontSize: 14,
    color: ColorStore.c_999,
    letterSpacing: 1,//字型間隔
  ),
  strutStyle: StrutStyle(
    forceStrutHeight: true,
    height: 2,//行高設定
  ),
),
 

參考連結:

https://cloud.tencent.com/developer/article/1513260

二、文字居中顯示

效果如下：

程式碼如下：

Text("我們將在2小時內，將提現\n金額轉入您的微信賬戶",
  textAlign: TextAlign.center,//文字居中
),

三、多行文字進行省略

效果如下：

程式碼如下：

		Text(
            'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
            style: TextStyle(
              fontSize: 14,
            ),
          )
 

參考連結:

flutter overflow 屬性省略號解決數字、長字母串整體顯示省略號問題:

https://www.it610.com/article/1289871246980358144.htm