來看看這是什么，F(xiàn)lutter學(xué)習(xí)（下）
五、 選項(xiàng)卡Tab布局
1. Tab選項(xiàng)卡布局
DefaultTabController 標(biāo)簽控制器組件
TabBar 標(biāo)簽欄組件
TabBarView 標(biāo)簽內(nèi)容組件
2. 添加標(biāo)簽控制器
DefaultTabController
length 定義標(biāo)簽個(gè)數(shù)
定義一個(gè) Scaffold標(biāo)準(zhǔn)布局
定義一個(gè) appBar 頭部欄
定義一個(gè) bottom
DefaultTabController(length: 2,child: Scaffold(appBar: AppBar(title: Text('Tabs'),elevation: 0.0,bottom: TabBar(tabs: <Widget>[],),),body: TabBarView(children: <Widget>[],)),),
3. 添加標(biāo)簽欄
添加一組標(biāo)簽欄組件
每個(gè)組件都是Tab類型
TabBar(tabs: <Widget>[Tab(text: '我的收藏',),Tab(text: '我的歷史',),],),
4. 添加標(biāo)簽欄內(nèi)容
添加一組標(biāo)簽欄內(nèi)容組件
TabBarView(children: <Widget>[Text('收藏'),Text('歷史'),],)
5. 自定義標(biāo)簽欄的樣式
標(biāo)簽邊距
下劃線長(zhǎng)度
下劃線粗細(xì)
下劃線顏色
標(biāo)簽顏色
未選擇狀態(tài)的顏色
TabBar(labelPadding: EdgeInsets.only(left: 20.0, right: 20.0),indicatorSize: TabBarIndicatorSize.label,indicatorWeight: 3.0,indicatorColor: Colors.blueAccent,unselectedLabelColor: Colors.black54,labelColor: Colors.blue,labelStyle: TextStyle(fontSize: 14.0,),tabs: ...,),
六、 布局小案例
布局：垂直布局
圖片
Row 水平布局
標(biāo)題Text
副標(biāo)題Text
Column 垂直布局
圖標(biāo) 星星
數(shù)字
圖標(biāo)欄 Row 水平布局
圖標(biāo)
文字
圖標(biāo)
文字
圖標(biāo)
文字
Column 垂直布局
Column 垂直布局
Column 垂直布局
段落文本 Text
1. ListView 可以滾動(dòng)的垂直布局
ListView(children: [Image.asset('images/pic.jpg',),標(biāo)題組件,按鈕組件,文本組件,],),
2.載入資源圖片
在工程根目錄創(chuàng)建一個(gè) images 文件夾.
添加 pic.jpg.
更新 pubspec.yaml 文件以包含 assets 標(biāo)簽.
Image.asset('images/pic.jpg',height: 240.0,fit: BoxFit.cover,),
3. 標(biāo)題行
定義一個(gè)充滿剩余空間的部件 Expanded
定義垂直布局的標(biāo)題文字和副標(biāo)題文字
定義圖標(biāo)組件
數(shù)字
Row(children: [Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Container(padding: const EdgeInsets.only(bottom: 8.0),child: Text(Lake Campground',style: TextStyle(fontWeight: FontWeight.bold,),),),Text(Switzerland',style: TextStyle(color: Colors.grey[500],),),],),),Icon(Icons.star,color: Colors.red[500],),Text('41'),],),
4. 按鈕行
按鈕三個(gè)橫排排列 Row的對(duì)齊方式
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [按鈕,按鈕,按鈕,],),Column(mainAxisAlignment: MainAxisAlignment.center,children: [Icon(圖標(biāo)),Container(margin: const EdgeInsets.only(top: 8.0),child: Text(文字,style: TextStyle(fontSize: 12.0,fontWeight: FontWeight.w400,color: 顏色,),),),],);
5.優(yōu)化小圖標(biāo)
創(chuàng)建一個(gè)可傳參的自定義圖標(biāo)小組件
class IconWiget extends StatelessWidget {final IconData icon;final String text;IconWiget(this.icon,this.text);@overrideWidget build(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [icon,Container(margin: const EdgeInsets.only(top: 8.0),child: Text(text,style: TextStyle(fontSize: 12.0,fontWeight: FontWeight.w400,color: 顏色,),),),],}}
使用小圖標(biāo)
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [IconWiget(圖標(biāo)1,'CALL'),IconWiget(圖標(biāo)2,'ROUTE'),IconWiget(圖標(biāo)3,'SHARE'),],),
6. 文本
Container(padding: const EdgeInsets.all(32.0),child: Text(文本,),);
八、 更多組件
1. 固定寬高比組件
AspectRatio 組件
AspectRatio(aspectRatio: 16.0 / 9.0,child: Container(color: Color.fromRGBO(3, 54, 255, 1.0),),);
aspectRatio 定義盒子比例
根據(jù)父級(jí)盒子
2. 層疊堆放組件
Stack 組件
定義第一個(gè)最底層的組件
通過Positioned組件來定義對(duì)位組件
定義方位屬性
alignment對(duì)齊屬性
定義多個(gè)子組件
```Stack(alignment: Alignment.topLeft,children: <Widget>[// 第一個(gè)子組件在最下面decoration: BoxDecoration(color: Color.fromRGBO(3, 54, 255, 1.0),borderRadius: BorderRadius.circular(8.0),),),//做層疊定位的組件right: 20.0,top: 20.0,child: Icon(Icons.ac_unit, color: Colors.white, size: 16.0),),Positioned(right: 40.0,top: 60.0,child: Icon(Icons.ac_unit, color: Colors.white, size: 18.0),),],);```
3. 固定尺寸組件
SizedBox 組件
SizedBox(height: 32.0,width: 100.0),
固定寬度
固定高度
4. 水平分割線組件
Divider 組件
Divider(height: 1.0,)
顏色設(shè)置
固定高度
5. 列表行組件
ListTile 組件
ListTile(title: Text('我的賬戶'),subtitle: Text('data'),leading: Icon(Icons.account_box),trailing: Icon(Icons.account_box),onTap: (){print('按下了我的賬戶');},),
-
行前圖標(biāo) -
行尾圖標(biāo) -
標(biāo)題 -
副標(biāo)題 -
點(diǎn)按動(dòng)作
6.Tag標(biāo)簽組件
Chip 組件
Chip(label: Text('Tag'),backgroundColor: Colors.orange,: CircleAvatar(backgroundColor: Colors.grey,child: Text('e'),),onDeleted: () {},deleteIcon: Icon(Icons.delete),),
文字 label
背景顏色 backgroundColor
行前圖標(biāo) avatar
刪除按鈕 onDeleted
九、 表單輸入
1. 文本輸入
使用文本框組件
TextField()
2. 文本輸入樣式
decoration 裝飾屬性
TextField(decoration: InputDecoration(icon: Icon(Icons.subject),labelText: '姓名',hintText: '請(qǐng)輸入',border: InputBorder.none,border: OutlineInputBorder(),filled: true,),);
Icon 圖標(biāo)
labelText 提示
hintText 預(yù)置提示
border 邊框
filled 背景顏色
3. 輸入監(jiān)聽
onChanged 改變
onSubmitted 確認(rèn)按鈕
onChanged: (value) {debugPrint('input: $value');},onSubmitted: (value) {debugPrint('submit: $value');},
密碼框
obscureText
4.狀態(tài)組件
StatefulWidget 添加一個(gè)有狀態(tài)的組件
class Form extends StatefulWidget {_FormState createState() => _FormState(); //為組件建立狀態(tài)管理}class _FormState extends State<Form> { //創(chuàng)建有狀態(tài)的組件Widget build(BuildContext context) {return Container();}}
可以有數(shù)據(jù)改變的組件
十、 按鈕
1. 浮動(dòng)按鈕
FloatingActionButton
FloatingActionButton(child: Icon(Icons.arrow_back),onPressed: () {},elevation: 0.0,backgroundColor: Colors.black26,),
點(diǎn)按動(dòng)作
陰影
背景顏色
在Scaffold底部工具欄中使用浮動(dòng)按鈕
floatingActionButton: floatingActionButton(),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
在Scaffold布局中定義個(gè)一個(gè)浮動(dòng)按鈕
在Scaffold布局中創(chuàng)建底部工具欄
使底部工具欄貼合浮動(dòng)按鈕
2. 文字按鈕
文字按鈕
文字
點(diǎn)按動(dòng)作
文字顏色
FlatButton(child: Text('按鈕'),onPressed: () {},textColor: Colors.blue,),
帶小圖標(biāo)的文字按鈕
FlatButton.icon(icon: Icon(Icons.add),label: Text('按鈕'),onPressed: () {},textColor: Colors.blue,),
4. 帶效果的按鈕
RaisedButton 帶水墨效果的按鈕
RaisedButton(child: Text('按鈕'),onPressed: () {},splashColor: Colors.grey,elevation: 0.0,),
帶小圖標(biāo)的 RaisedButton
splashColor 修改水墨效果的顏色
RaisedButton.icon(icon: Icon(Icons.add),label: Text('按鈕'),onPressed: () {},splashColor: Colors.grey,elevation: 12.0,),
5. 邊框按鈕
OutlineButton(child: Text('按鈕'),onPressed: () {},splashColor: Colors.grey[100],borderSide: BorderSide(color: Colors.black,),textColor: Colors.black,),
八、 路由
1. 跳轉(zhuǎn)與返回
Navigator.push 方法是向路由堆中添加一個(gè)新的路由
Navigator.push(context, MaterialPageRoute(builder: (context) => Show()));
MaterialPageRoute的build方法返回一個(gè)新的組件并跳轉(zhuǎn)
Navigator.pop 方法是從路由堆里面拿出最前面的路由
Navigator.pop(context);路由使用context參數(shù)傳入
2. 初始路由
可以在MaterialApp中初始化一些路由
routes: {'/': (context) => Home(),'/about': (context) => Page(),'/user': (context) => UserPage(),},
4. 帶名字的路由
使用 Navigator.pushNamed 跳轉(zhuǎn)到一個(gè)帶名字的路由
Navigator.pushNamed(context, '/about');