注意:無特殊說明,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系列文章總覽
- Flutter Widgets 之 Expanded和Flexible
- Flutter Widgets 之 AnimatedList
- Flutter Widgets 之 SliverAppBar