Flutter Widgets 之 RichText

注意：無特殊說明，Flutter版本及Dart版本如下：

Flutter版本： 1.12.13+hotfix.5

Dart版本： 2.7.0

基礎用法

應用程序離不開文字的展示，因此文字的排版非常重要，通常情況下Text組件可以完成絕大多數需求，它可以顯示不同大小的文字、字體、顏色等，如果想在一句話或者一段文字里面顯示不同樣式的文字，Text組件無法滿足我們的需求，這個時候需要使用RichText。

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            TextSpan(text: '老孟',style: TextStyle(color: Colors.red)),
            TextSpan(text: '，'),
            TextSpan(text: '一個有態度的程序員'),
          ]),
    )

RichText 組件的text屬性是TextSpan，TextSpan中的style樣式需要設置屬性，不設置無法顯示文字，一般設置應用程序的默認字體樣式DefaultTextStyle.of(context).style，在子組件其中一個TextSpan設置不同的樣式，比如上面的代碼中設置“老孟”文字為紅色，效果如下：

當文字有較多行時，可以設置其對齊方式：

RichText(
	textAlign: TextAlign.end,
	...
)

TextAlign.start的效果：

TextAlign.center的效果：

TextAlign.end的效果：

手勢交互

當然我們也可以設置其他樣式，比如大小、斜體等，甚至我們還可以添加點擊效果，

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            TextSpan(text: '登陸即視為同意'),
            TextSpan(
              text: '《xxx服務協議》',
              style: TextStyle(color: Colors.red),
              recognizer: TapGestureRecognizer()..onTap = () {
                
              },
            ),
          ]),
    )

recognizer屬性指定手勢交互，類型是GestureRecognizer,GestureRecognizer是抽象類，一般使用其子類TapGestureRecognizer實現點擊交互。

智能推薦

Flutter Widgets 之 Opacity和AnimatedOpacity

注意：無特殊說明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Flutter中移除一個控件非常容易，只需要在重新創建中移除即可，如果想要移除控件同時它的位置依然保留，類似于Android中View的invisible，比如Row中有3個顏色塊，分別為1、2、3，代碼如下：效果如下：這時想要移除2，同時還保留2的位置...

Flutter Widgets 之 Expanded和Flexible

注意：無特殊說明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Expanded和Flexible是控制Row、Column、Flex的子控件如何布局的控件，Expanded和Flexible可以擴張填滿主軸剩余空間，如何確認主軸和交叉軸可以查看Flutter Widgets 之 Row和Column，這篇文章詳細介紹了...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...