因為學完flutter之後，感覺對一些元件的使用不是很熟悉，記錄一些鞏固一下知識，元件過多，我不會寫的非常詳細，而且如果你不是很熟悉這些軟體有那些功能的話，你可以點進去看這個元件的原始碼，都是用dart語言編寫，看起來也比較輕鬆，但是我會把關於那個元件詳細部落格的地址連結放出來，以便日後的學習和查詢，使用元件的時候，直接套娃就行。
1.MaterialApp
MaterialApp(
title: 'Flutter Demo', // 指定應用程式在工作列上顯示的標題
theme: ThemeData(
primarySwatch: Colors.blue,
), // 配置應用程式的主題
home: Center(
child: Text("MaterialApp"),
) // 指定應用程式的主介面
);
複製程式碼2.Scaffold
Scaffold 實現了基本的 Material 佈局。只要是在 Material 中定義了的單個介面顯示的佈局控制元件元素，都可以使用 Scaffold 來繪製。
Scaffold(
appBar: AppBar(
title: Text('頁面標題'),
),//頭部導航條區域
body: Center(
child: Text('主體內容'),
),//頁面主題內容區域
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),//右下角浮動按鈕區域
drawer: Drawer(), //側邊欄抽屜區域
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon:Icon(
Icons.home,
color: Colors.grey,
),
activeIcon: Icon(
Icons.home,
color: Colors.blue,
),
title: Text('首頁'),
),
BottomNavigationBarItem(
icon: Icon(
Icons.list,
color: Colors.grey,
),
activeIcon: Icon(
Icons.list,
color: Colors.blue,
),
title: Text('列表'),
)
],
),
),//底部tabBar區域
複製程式碼效果：
參考部落格地址：blog.csdn.net/qq_18948359…
如果想去了解這個元件的，可以去看一下這篇部落格，說的很詳細。
3.Container
Container(
width: 200, //寬度
height: 200, //長度
child: Text("不錯"), //子元件
decoration: BoxDecoration(
color: Colors.blue,
), //裝飾器
padding: EdgeInsets.all(10), //內容距離盒子邊界的距離
margin: EdgeInsets.all(10) //盒子邊界之外的距離
),
複製程式碼4.BoxDecoration（裝飾器）
Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.blue, //顏色背景
image: DecorationImage(
image: NetworkImage("http://wx4.sinaimg.cn/mw690/6a04b428gy1fyrldlsv4yg204r05i3yt.gif"),
//背景圖片
fit: BoxFit.cover, //圖片充滿元件
)，
border: Border.all(
color: Colors.red,
width: 5.0,
)), //設定邊框
),
)
)
複製程式碼關於BoxDecoration的使用，可以看一下blog.csdn.net/u014112893/…非常詳細。
5.Row（橫向排布）
使內部的 children 子元素橫向佈局。
Row(
children: <Widget>[
Expanded(child: Text('主體內容1'), flex: 2,),
Expanded(child: Text('主體內容2'), flex: 1,)
]
)
複製程式碼6.Column（縱向排布）
使內部的 children 子元素縱向佈局
Column(
children: <Widget>[
Expanded(child: Text('主體內容1'), flex: 2,),
Expanded(child: Text('主體內容2'), flex: 1,)
]
),
複製程式碼7.Expanded和Flexible
兩個功能相似，區別是Flexible不會空白區域自動填充
程式碼：
Row(
children: <Widget>[
RaisedButton(
onPressed: () {
},
color: const Color(0xffcc0000),
child: new Text('紅色按鈕'),
),
Flexible(
flex: 1,
child: RaisedButton(
onPressed: () {
},
color: const Color(0xfff1c232),
child: Text('黃色按鈕'),
),
),
]
),
複製程式碼Row(
children: <Widget>[
RaisedButton(
onPressed: () {
},
color: const Color(0xffcc0000),
child: new Text('紅色按鈕'),
),
Expanded(
flex: 1,
child: RaisedButton(
onPressed: () {
},
color: const Color(0xfff1c232),
child: Text('黃色按鈕'),
),
),
]
),
複製程式碼Flexible:
Expened:
8.Stack和Positioned（層疊佈局）
其childWidget 可以層疊到一起，層疊順序：Widget越後建立，層級越靠上。 Positioned一般用來和Stack元件一起來使用，用來進行元件位置的定位。
Stack(
children: [
Positioned(
left: 50,
top: 100,
child: Text("測試")
)
],
),
複製程式碼9.頁面切換BottomNavigationBar
int _currentIndex=0; //初始化為0
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index){
setState(() {
_currentIndex=index;
});
},
items: [
BottomNavigationBarItem(
icon:Icon(
Icons.home,
color: Colors.grey,
),
activeIcon: Icon(
Icons.home,
color: Colors.blue,
),
title: Text('首頁'),
),
BottomNavigationBarItem(
icon: Icon(
Icons.list,
color: Colors.grey,
),
activeIcon: Icon(
Icons.list,
color: Colors.blue,
),
title: Text('列表'),
)
],
),
body: _currentIndex == 0
? Center(
child: ListView(
children: <Widget>[
Text('首頁'),
],
),
)
: Text('列表'),
複製程式碼10.RefreshIndicator和ListView（下拉重新整理）
RefreshIndicator 是 Material 風格的滑動重新整理Widget ，效果是下拉重新整理顯示的載入圓圈，一般和ListView一起使用，ListView和使用效果和RecycleView型別。
RefreshIndicator(
child: ListView(
children:<Widget> [
Container(
decoration: BoxDecoration(color: Colors.white),
alignment: Alignment.center,
child: Text("測試")
)
],
),
onRefresh: _handleRefresh, //設定延遲時間
),
Future<dynamic> _handleRefresh() async {
await Future.delayed(Duration(milliseconds: 200));
return null;
}
複製程式碼11.FloatingActionButton(懸浮按鈕)
FloatingActionButton(
onPressed: null,
child: Icon(
Icons.add,
size: 20,
),
),
複製程式碼12.Text（文字）
TextStyle textStyle = TextStyle(fontSize: 30, //字型大小
color:Colors.deepOrange, //字型顏色
decoration: TextDecoration.lineThrough, //設定刪除線
decorationColor: Colors.green, //刪除線顏色為綠色
decorationStyle: TextDecorationStyle.wavy, //刪除線為波浪線
fontWeight: FontWeight.bold, //加粗
fontStyle: FontStyle.italic, //斜體
//letterSpacing: 2.0,
// backgroundColor: Colors.blue, //背景顏色
);
Text(
'Hello world', //輸出內容
style: textStyle, //字型格式
//textDirection: TextDirection.ltr,
softWrap: false, //自動換行
overflow: TextOverflow.fade, //文字超出螢幕之後的處理方式（clip裁剪，fade 漸隱，ellipsis 省略號）
textScaleFactor: 1.0,
)
複製程式碼13.TextField（功能較多）
TextField是一個material design風格的輸入框、還有裝飾器InputDecoration要有多種屬性，可以使用TextEditingController方法獲取輸入的內容。
TextField(
obscureText: true, //隱藏文字
decoration: InputDecoration(
labelText: "請輸入手機號碼", //標籤文字
hintText: "請輸入手機號碼", //提示文字
prefixIcon: Icon(Icons.people_alt_rounded) //左側內圖示),
),
複製程式碼如果想了解更多關於TextField屬性的功能，可以去看一下這篇部落格 blog.csdn.net/yechaoa/art…
14.PageView（滑動檢視）
PageView 是一個滑動檢視列表。
Container(
height: 100,
margin: EdgeInsets.only(top: 10),
decoration:
BoxDecoration(color: Colors.lightBlueAccent),
child: PageView(
children:<Widget> [
_item('Page1',Colors.deepPurple), //_item為自定義私有方法
_item('Page2',Colors.green),
_item('Page3',Colors.red)
],
),
)
_item(String title, Color color) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(color: color),
child: Text(
title,
style: TextStyle(fontSize: 22, color: Colors.white),
),
);
複製程式碼上述程式碼實現了三個不同顏色的PageView用於滑動
15.Icon（圖示）
實現簡單的圖片和圖示功能。
Icon(
Icons.access_alarm, //系統自帶圖片
size: 50, //圖片大小
color: Colors.red, //圖片顏色
),
複製程式碼詳細Icon部落格地址blog.csdn.net/yuzhiqiang_…
16.CloseButton、BackButton、IconButton（簡單按鈕）
簡單按鈕的實現
CloseButton(),
BackButton(),
IconButton(icon:Icon(Icons.people), onPressed: null),
RaisedButton(child:Text('結束'),onPressed: null,),
複製程式碼17.Image（載入圖片）
可以用於載入網路圖片和本地圖片
Image(
image: NetworkImage(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
width: 100.0,
)，
複製程式碼想了解更多具體的功能，可以看一下這篇部落格www.jianshu.com/p/81b110614…
18.chip（有趣的小元件）
Flutter一個有趣的小元件
Chip(
avatar: Icon(Icons.people), //左邊的圖片
label: Text('有趣的小元件'),
deleteIcon: Icon(Icons.remove_red_eye_outlined), //右邊圖片
onDeleted: ()=>print('刪除'), //響應事件
),
複製程式碼19.Divider（分隔符）
Flutter中的分隔符，起到分隔的作用
Divider(
height: 10,
indent: 10,
color: Colors.orange,
),
複製程式碼20.Card（卡片式佈局）
經典的Material UI卡片式佈局,設計出來的UI很有質感。
Card(
color: Colors.blue, //卡片背景色
shadowColor: Colors.red, //陰影顏色
elevation: 5, //陰影高度
margin:EdgeInsets.all(10), //外邊距
child: Container( //用Container容器包裹起來
width: 150,
height: 80,
padding: EdgeInsets.all(10), //內邊距
child:Column(
children: [
Text(
'I am Card',
style: textStyle,
),
Icon(
Icons.add_a_photo,
size: 30,
color: Colors.orange,
)
],
)
),
),
複製程式碼21AlertDialog（彈出框）
可以在當前的介面上顯示一個對話方塊
AlertDialog(
title: Text('耗子喂汁'),
content: Text('大意了，沒有閃'),
),
複製程式碼22.LinearGradient（顏色漸變）
實現顏色的漸變，一般在Container元件中使用。
LinearGradient(
//AppBar漸變遮罩背景
colors: [Color(0x66000000), Colors.transparent],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
複製程式碼23.RichText（富文字）
用於將幾個Text元件組合起來，可以單獨設定每個Text的大小和顏色。
RichText(
text: TextSpan(
text: "登陸即視為同意",
style: TextStyle(color: Color(0xAA333333),fontSize: 18),
children: [
TextSpan(
text: "《巴樂兔服務協議》", style: TextStyle(color: Color(0xAACE1928))),
]),
textDirection: TextDirection.ltr, //TextSpan的排列方向
)
複製程式碼RichText元件詳細部落格地址：blog.csdn.net/jungle_pig/…
24. GestureDetector(手勢監控）
手勢監控元件，一般用於單擊雙擊，長按等手勢的監控。
GestureDetector(
onTap: () => _printMsg("點選"),
onDoubleTap: () => _printMsg("雙擊"),
onLongPress: () => _printMsg("長按"),
onTapCancel: () => _printMsg("取消"),
onTapUp: (e) => _printMsg("鬆開"),
onTapDown: (e) => _printMsg("按下"),
child: Container(
decoration: BoxDecoration(color: Colors.redAccent),
width: 100,
height: 100,
),
)
複製程式碼手勢監控詳細部落格地址： www.jianshu.com/p/96ab1c189…
25.Center（元件居中)
用於把元件顯示到頁面正中間，使用起來比較簡單，就不仔細說明了。
26.Opacity（透明度）
用於設定透明度
Stack(
children: <Widget>[
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582204321233&di=ac7e8572222e1781cef5ad3add4daead&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn15%2F275%2Fw640h435%2F20181010%2Fcaba-hkrzvkw4936632.jpg',
),
Positioned.fill(
child: Opacity(
opacity: 0.5,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.blue],
begin: Alignment.bottomCenter,
end: Alignment.topCenter),
),
),
),
),
],
)
複製程式碼Opacity詳細部落格地址： blog.csdn.net/mengks1987/…
27.MediaQuery.removePadding(去除元件之間空格）
MediaQuery.removePadding(
removeTop: true,
context: context,
child: ,
)
複製程式碼28.Slider（滑動進度條）
double _sliderValue = 0;
Slider(
value: _sliderValue, //當前值
onChanged: (v){
setState(() {
_sliderValue = v;
}); //滑動改變值
},
)
複製程式碼Slider詳細部落格地址： blog.csdn.net/mengks1987/…
29.ReorderableListView（拖拽排序元件）
ReorderableListView是通過長按拖動某一項到另一個位置來重新排序的列表元件。 關於這個元件的使用可以看一下這篇部落格blog.csdn.net/mengks1987/…
因為沒寫多久，可能還有很多元件沒有考慮到，歡迎補充。
參考部落格地址： blog.csdn.net/xueshao110/… blog.csdn.net/u014112893/… blog.csdn.net/chunchun123… blog.csdn.net/qq_18948359… www.jianshu.com/p/f1b8fbe5c… blog.csdn.net/yechaoa/art… blog.csdn.net/yuzhiqiang_… www.jianshu.com/p/81b110614… blog.csdn.net/jungle_pig/… www.jianshu.com/p/96ab1c189… blog.csdn.net/mengks1987/… blog.csdn.net/mengks1987/…