Flutter 之基本控件

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 發佈！