Flutter 中有很多 UI 控件,而文本、圖片和按鈕是 Flutter 中最基本的控件,構建視圖基本上都要使用到這三個基本控件
文本控件
文本是視圖系統中的常見控件,用於顯示一段特定樣式的字符串,在 Flutter 中,文本展示是通過 Text 控件實現的
Text 支持的文本展示類型
- 單一樣式的文本 Text
- 混合樣式的富文本 Text.rich
單一樣式的文本 Text
- 控制整體文本佈局的參數:textAlign(文本對齊方式)、textDirection(文本排版方向)、maxLines(文本顯示最大行數)、overflow(文本截斷規則),等等。這些都是構造函數中的參數
- 控制文本展示樣式的參數:fontFamily(字體名稱)、fontSize(字體大小)、color(文本顏色)、shadows(文本陰影)、等等。這些都是構造函數中的參數 style 中的參數
混合樣式的富文本 Text.rich
- 把一段字符串分爲幾個片段來管理,給每個片段單獨設置樣式,使用 TextSpan 來實現
圖片
使用 Image 來加載不同形式、不同格式的圖片
- 加載本地資源圖片:Image.asset('images/logo.png');
- 加載本地(File 文件)圖片:Image.file(File('/storage/test.png'));
- 加載網絡圖片:Image.network('http://xxx/logo.png');
支持高級功能的圖片控件
- FadeInImage:提供了圖片佔位的功能,支持在圖片加載完成時淡入淡出的視覺效果;ImageCache 使用 LRU(Least Recently User:最近最少使用)算法進行緩存更新策略,並且默認最多存儲 1000 張圖片,最大緩存限制爲 100MB,當限定的空間已存滿數據時,把最久沒有被訪問到的圖片清除,圖片只緩存在內存中
- CachedNetworkImage:不僅支持緩存圖片到內存中,還支持緩存到文件系統中;加載過程佔位與加載錯誤佔位;自定義控件佔位
按鈕
通過按鈕,可以響應用戶的交互事件。Flutter 中提供了三個最基本的按鈕控件:FloatingActionButton、FlatButton、RaisedButton
- FloatingActionButton:圓形按鈕,一般出現在屏幕內容的前面
- FlatButton:扁平化的按鈕,默認透明背景
- RaisedButton:凸起的按鈕,默認帶有灰色背景
按鈕控件中的參數
- onPressed:設置點擊回調,如果 onPressed 參數爲空,則按鈕處於禁用狀態,不響應用戶點擊事件
- child:設置按鈕的內容,可以接收任意的 Widget
以下爲具體代碼實現
void main() => runApp(MyBasiControl());
/**
* 經典控件
*/
class MyBasiControl extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyText(),
);
}
}
String content = '歡迎關注\nAndroid小白營\n在這裏我們可以一起成長\n';
class MyText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Android小白營'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'以下爲不同樣式的文本控件\n\n單一樣式文本 Text\n一:默認樣式\n' + content,
),
Text(
'二:自定義樣式:居中顯示,黑色背景,白色14號粗體字體\n' + content,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
backgroundColor: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
Text.rich(TextSpan(children: [
TextSpan(
text: '\n富文本 Text.rich\n',
style: TextStyle(color: Colors.red, fontSize: 20)),
TextSpan(text: '歡迎關注\n'),
TextSpan(
text: 'Android小白營\n',
style: TextStyle(
color: Colors.blueAccent,
fontWeight: FontWeight.bold,
fontSize: 18)),
TextSpan(
text: '在這裏我們可以一起成長',
style: TextStyle(
backgroundColor: Colors.deepOrangeAccent,
color: Colors.cyanAccent,
fontSize: 16))
])),
FlatButton(
color: Colors.cyanAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0)),
onPressed: () {
Fluttertoast.showToast(msg: '測試點擊事件');
},
colorBrightness: Brightness.light,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.add_circle_outline),
Text('添加')
],
))
],
));
}
}
運行後如下所示
本文由博客一文多發平臺 OpenWrite 發佈!