如需轉載，請註明出處：Flutter學習筆記（11）--文字元件、圖示及按鈕元件
-
文字元件
文字元件（text）負責顯示文字和定義顯示樣式，下表為text常見屬性
| 屬性名 | 型別 | 預設值 | 說明 |
| data | String | 要顯示的文字 | |
| maxLines | int | 0 | 文字要顯示的最大行數 |
| style | TextStyle | null | 文字樣式，可定義文字的字型大小、顏色、粗細等 |
| textAlign | TextAlign | TextAlign.center | 文字水平方向的對齊方式，取值有center、end、justify、left、right、start、values |
| textDirection | TextDirection | TextDirection.ltr | 文字的書寫方向，如從左到右、從右到左 |
| textScaleFactor | double | 1.0 | 字型的縮放係數，比如，如果此屬性設定的值為1.5，那麼字型會被放大到150%，也就是說比原來大了50% |
| textSpan | TextSpan | null | 文字塊，TextSpan裡可以包含文字內容及樣式 |
老樣子，按照慣例附上Demo，建立多個文字元件來展示不同的文字樣式，比如不同的顏色，不同的自號，不同的線形等。
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: '文字元件Demo', home: new Scaffold( appBar: new AppBar( title: Text('文字元件Demo'), ), body: new Column( children: <Widget>[ new Text( '第一個文字Demo', style: new TextStyle( color: Colors.amberAccent, fontSize: 20, ), ), new Text( '第二個文字Demo', style: new TextStyle( color: Colors.deepOrange, fontSize: 20, ), textScaleFactor: 1.5,//放大50% ), new Text( '第三個文字Demo（瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的）', style: new TextStyle( color: Colors.blue, fontSize: 20, ), textAlign: TextAlign.end,//右對齊 ), new Text( '''第四個文字Demo 換到第二行，看看能不能顯示的出來呢''', style: new TextStyle( fontSize: 20, color: Colors.green, ), maxLines: 2,//最大顯示2行 ), new Text( '第五個Demo，設定水平方向文案超出螢幕後，顯示...（瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字）', style: new TextStyle( fontSize: 20, color: Colors.black, ), overflow: TextOverflow.ellipsis,//水平方向超出螢幕顯示... ) ], ),//垂直方向排列 ), ); } }
除了這些，還有很多其他的屬性等著我們去嘗試，我就不一一都寫出來了，我也是剛開始接觸Flutter，有些地方還不是很理解，希望以後接觸的多了，可以豁然開朗吧！！！給大家看一下效果圖：
-
圖示及按鈕元件
-
圖示元件
圖示元件（Icon）為展示圖示的元件，該元件不可互動，要實現可互動，可以考慮使用IconButton元件，圖示元件相關的元件有一下幾個：
1.IconButton：可互動的Icon
2.Icons：框架自帶Icon集合
3.IconTheme：Icon主題
4.ImageIcon：通過AssetImages或者其他圖片顯示Icon
| 屬性名 | 型別 | 預設值 | 說明 |
| color | Color | null | 圖示的顏色 |
| icon | IconData | null | 展示的具體圖示，可以使用Icons圖示列表中的任意一個圖示即可，如Icons.phone表示一個電話的圖示 |
| style | TextStyle | null | 文字樣式 |
| size | Double | 24.0 | 圖示的大小，注意要帶上小數位 |
| textDirection | TextDirection | TextDirection.ltr | 文字排列方向 |
附上Demo程式碼：
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: '圖示元件Demo', home: new IconDemo(), ); } } class IconDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('圖示元件Demo'), ), body: new Center( child: new Icon( Icons.android,//圖示Icon color: Colors.green,//圖示顏色，設定為綠色，原本的顏色是黑色的 size: 150.0,//Icon的大小 ), ), ); } }
附上效果截圖：
-
圖示按鈕元件
圖示按鈕元件（IconButton）是基於Material Design風格的元件，他可以響應按下事件，並且按下時會帶一個水波紋的效果，如果它的onPressed回撥函式為null，那麼這個按鈕處於禁用的狀態，並且不可以按下。
| 屬性名 | 型別 | 預設值 | 說明 |
| alignment | AlignmentGeometry | Alignment.center | 定義IconButton的Icon對齊方式，預設為居中，Alignment是可以設定x，y偏移量的 |
| icon | Widget | null | 展示的具體圖示，可以使用Icons圖示列表中的任意一個圖示 |
| color | Color | null | 圖示顏色 |
| disabledColor | Color | ThemeData.disableColor | 圖示元件禁用的顏色 |
| iconSize | double | 24.0 | 圖示大小 |
| onPressed | VoidCallBack | null | 當按鈕按下時會觸發此回撥事件 |
| tooltip | String | “” | 當按鈕按下時的元件提示語 |
寫一個Demo，實現點選IconButton，出發onPressed回撥並toast一句話，附上Demo程式碼：
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'IconButtonDemo',
home: new IconButtonDemo(),
);
}
}
class IconButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('IconButton Demo'),
leading: Icon(Icons.menu),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
)
],
),
body: new Center(
child: new IconButton(
icon: Icon(Icons.add_circle_outline),
iconSize: 50.0,
tooltip: '使用者按下了按鈕',
disabledColor: Colors.green,
onPressed: (){
Fluttertoast.showToast(
msg: '點選了IconButton並且Toas了一句話',
toastLength: Toast.LENGTH_LONG,
textColor: Colors.deepOrange,
gravity: ToastGravity.BOTTOM
);
}),
),
);
}
}
附上效果截圖：
上面的程式碼除了演示了IconButton的簡單使用，還對AppBar做了一些出了，在title的左右增加了兩個圖片，當然你也可以對其設定點選事件
注：這裡和大家說一下在Flutter中怎麼Toast出提示語，首先在pubspec.yaml引入fluttertoast包，點選Packages get，然後在你需要toast的地方import該庫
//pubspec.yaml fluttertoast: ^2.2.11 //import對應庫 import 'package:fluttertoast/fluttertoast.dart';
-
凸起按鈕元件
突起按鈕元件（RaisedButton），往往我們在開發過程中，不會一直用系統的圖示，那麼如果一個按鈕上需要我們新增自定義的文字，這樣的按鈕要怎麼實現呢？
import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( debugShowCheckedModeBanner: false, title: 'IconButtonDemo', home: new IconButtonDemo(), ); } } class IconButtonDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('IconButton Demo'), leading: Icon(Icons.menu), actions: <Widget>[ IconButton( icon: Icon(Icons.search), ) ], ), body: new Center( child: new RaisedButton( padding: const EdgeInsets.all(10.0),//內間距 splashColor: Colors.blue,//點選時按鈕的顏色 elevation: 10, shape: BeveledRectangleBorder(//帶斜角的長方形邊框 borderRadius: BorderRadius.all(Radius.circular(5))//圓角 ), onPressed: (){ Fluttertoast.showToast( msg: '點選了IconButton並且Toas了一句話', toastLength: Toast.LENGTH_LONG, textColor: Colors.deepOrange, gravity: ToastGravity.BOTTOM ); }, //按鈕內的文字 child: new Text( '我是RaisedButton按鈕', style: TextStyle( color: Colors.green, fontSize: 20.0, ), ), ), ), ); } }
附上效果截圖：
程式碼內有很詳細的註釋，如果有疑問的話，歡迎留言！！！
今天到這裡就結束了，希望每一天的部落格都可以給一些像我一樣剛開始接觸Flutter人一些小小的幫助！！！