flutter常見組件API(第一期)
內容若是對你有幫助,幫忙點下贊,你的點贊是我更新最大的動力,謝謝啦!若是在開發的過程遇到問題能夠一塊兒討論,能夠加個人QQ羣!167646174!也能夠加我微信,在羣裏!
具體代碼見github ,歡迎各位Star,以及提issues!git
1.ListTile
效果如上:github
new ListTile(
// 前綴
leading:Icon(Icons.navigation),
// 標題
title: Text("導航欄組件",style:TextStyle(fontWeight:FontWeight.w500)),
// 副標題
subtitle: Text("常見的底部導航欄組件"),
// 後綴
trailing: Icon(Icons.chevron_right),
// 點擊事件
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder:(context)=>new BottomNavigation()
)
);
},
// 長按事件
onLongPress: (){
print("object");
}
)
| API | 做用 |
|---|---|
| leading | 前綴 |
| title | 標題 |
| subtitle | 副標題 |
| trailing | 後綴 |
| onTap | 點擊事件 |
| onLongPress | 長按事件 |
2.規則的靈活導航欄
效果如上segmentfault
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
int _currentIndex=0;
var appBarTitle=["組件","關於"];
var appBarIcon=[Icons.all_inclusive,Icons.blur_on];
List<Widget> list=List();
// 導航欄文字選中顏色
Text getTabTitle(int curIndex){
if(curIndex==_currentIndex){
return new Text(appBarTitle[curIndex],
style: new TextStyle(fontSize: 14.0,color:const Color(0xff845F3F)));
}else{
return new Text(appBarTitle[curIndex],
style: new TextStyle(fontSize: 14.0, color: const Color(0xff696969)));
}
}
// 小圖標改變選中顏色
Icon getIcon(int curIndex){
if(curIndex==_currentIndex){
return Icon(appBarIcon[curIndex],color:const Color(0xff845F3F));
}else{
return Icon(appBarIcon[curIndex],color:const Color(0xff696969));
}
}
// 初始化方法
@override
void initState() {
list
..add(ComponentPage())
..add(AboutPage());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
new BottomNavigationBarItem(icon: getIcon(0),title: getTabTitle(0)),
new BottomNavigationBarItem(icon: getIcon(1),title: getTabTitle(1)),
],
fixedColor: Colors.orange,
// 高亮選項
currentIndex: _currentIndex,
onTap: (int index){
setState(() {
_currentIndex=index;
});
},
),
);
}
}
3.floatingActionButton(不規則底部導航欄)
效果如上微信
return Scaffold(
// 首選項
body: _eachView[_index],
// 浮動按鈕
floatingActionButton: FloatingActionButton(
// 長按複選按鈕顯示的文字
tooltip: "長按懸浮按鈕顯示",
// 按鈕裏面內容
child: Icon(
Icons.ac_unit,
color:Colors.white
),
// 點擊事件
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
return EachView('懸浮按鈕新頁面');
}));
},
),
// 懸浮按鈕浮動的位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.blue,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
IconButton(
icon: Icon(Icons.access_time),
color: Colors.white,
onPressed: (){
setState(() {
_index=0;
});
},
),
IconButton(
icon: Icon(Icons.accessibility),
color: Colors.white,
onPressed: (){
setState(() {
_index=1;
});
},
)
],
),
),
);
floatingActionButton APIapp
| API | 做用 |
|---|---|
| child | 子視圖 |
| tooltip | 長按文字提示 |
| foregroundColor | 前景色 |
| backgroundColor | 背景色 |
| heroTag | hero效果使用的tag,系統默認會給全部FAB使用同一個tag,方便作動畫效果 |
| hignlightElevation | 點擊時陰影值，默認12.0 |
| onPressed | 點擊回調事件 |
| mini | 是否爲mini,默認flase |
| shape | 定義形狀，設置shape時，默認的elevation將會失效,默認爲CircleBorder |
| isExtended | 是否爲extended |
4.AppBar
| API | 做用 |
|---|---|
| leading | 前綴,通常是一個icon |
| title | 標題 |
| actions | 一系列最右邊組件 |
| flexibleSpace | bottom和appBar Title之間 |
| bottom | 如圖 |
| elevation | Appbar和Body總體之間那個橫線陰影,默認爲4,分隔開AppBar和總體內容 |
| backgroundColor | 背景色 |
| brightness | 亮度 |
| iconTheme | Icon樣式 |
| textTheme | 字體樣式 |
| centerTitle | 標題位置,IOS默認顯示居中,Android靠左,設置會顯示統一 |
5.AppBar Tabs
效果如上:ide
return MaterialApp(
home: new DefaultTabController(
length:choices.length,
child: new Scaffold(
appBar: new AppBar(
title: Text("AppBar Tabs"),
bottom: new TabBar(
// tabs顏色選中顏色
labelColor:Colors.orange,
// tabs選中樣式
labelStyle: TextStyle(fontSize: 18),
// tabs未選中的顏色
unselectedLabelColor: Colors.white,
// tabs未選中的樣式
unselectedLabelStyle: TextStyle(fontSize: 10),
// 底部指示器的padding
indicatorPadding: const EdgeInsets.all(0),
// 底部指示器高度
indicatorWeight: 2,
//底部指示器顏色
indicatorColor: Colors.red,
// 指示器大小計算方式
// indicatorSize: ,
// 是否可滾動
// isScrollable: true,
tabs: <Widget>[
Tab(text: "推薦",icon:Icon(Icons.ac_unit)),
Tab(text: "關注",icon:Icon(Icons.access_alarm)),
Tab(text: "熱榜",icon:Icon(Icons.access_time)),
],
),
),
// tabs主體內容
body: new TabBarView(
children: <Widget>[
new TestPage(),
new TestPage(),
new TestPage(),
],
),
),
),
);
| API | 做用 |
|---|---|
| labelColor | tabs顏色選中顏色 |
| labelStyle | tabs選中樣式 |
| unselectedLabelColor | tabs未選中的顏色 |
| unselectedLabelStyle | tabs未選中的樣式 |
| indicatorPadding | 底部指示器padding |
| indicatorWeight | 底部指示器高度 |
| indicatorColor | 底部指示器顏色 |
| indicatorSize | 底部指示器大小計算方式 |
| isScrollable | 是否能夠滾動 |
6.Row/Column 水平/垂直佈局
Container(
height: 300,
color: Colors.yellow,
child: Row(
// 主軸(x)對齊方式
mainAxisAlignment: MainAxisAlignment.center,
// 副軸對齊方式
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
Container(
width: 800,
height: 300,
color: Colors.red,
child: Column(
// 主軸(x)對齊方式
mainAxisAlignment: MainAxisAlignment.center,
// 副軸對齊方式
crossAxisAlignment: CrossAxisAlignment.center,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
| API | 做用 | 可選參數 |
|---|---|---|
| mainAxisAlignment | 主軸(x)對齊方式 | MainAxisAlignment.start（默認值）,center,end,spaceAround,spaceBetween,spaceEvenly |
| crossAxisAlignment | 副軸對齊方式 | CrossAxisAlignment.center (默認值),start,end,stretch,baseline |
| textDirection | 文字對齊方式 | TextDirection.ltr(默認),rtl |
| verticalDirection | 和textDirection相似 | VerticalDirection.down(默認),up |
| mainAxisSize | 子組件佔主軸空間大小 | MainAxisSize.max(默認),min |
一點特殊說明:
CrossAxisAlignment.baseline:子部件基線對齊佈局
值爲 CrossAxisAlignment.baseline時 必須同時使用 textBaseline， 不然會報錯
沒有用 baseline
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Flutter',
style: TextStyle(
color: Colors.red,
fontSize: 30.0
),
),
Text(
'Flutter',
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
],
)
用 baseline
textBaseline: TextBaseline.alphabetic(中軸對齊)
textBaseline: TextBaseline.ideographic(底部對齊)字體
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Text(
'Flutter',
style: TextStyle(
color: Colors.red,
fontSize: 30.0
),
),
Text(
'Flutter',
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
],
)
textDirection
Row 部件的 textDirectionflex
TextDirection.rtl
文字從右到左排列，主軸（水平）方向 start->end 是 從右到左動畫
TextDirection.ltr （默認）
從左往右排列，主軸（水平）方向 start->end 是 從左到右
verticalDirection
和 textDirection 相似
- 肯定 Column 部件的垂直襬放方向
- 解釋垂直方向的 start 和 end 方向
mainAxisSize
全部子部件佔據主軸的空間大小
7.TextField
輸入框
TextField(
enableInteractiveSelection: false,
// 禁止輸入
enabled: true,
// 聚焦點顏色
cursorColor: Colors.red,
//聚焦點圓邊角
cursorRadius: Radius.circular(10),
// 聚焦點寬度
cursorWidth: 1,
// 自動獲取焦點
autofocus: false,
// 長度限制
// maxLength: 5,
// 是否爲密碼
obscureText: false,
// 輸入框類型
keyboardType:TextInputType.number,
// 文本對齊方式
textAlign: TextAlign.center,
// 最大行數
maxLines: 1,
// 是否自動更正
autocorrect:true,
// 值改變事件
onChanged:_textFieldChanged,
//用戶完成內容
onSubmitted:(text){},
// 內容提交(按回車鍵)
onEditingComplete:(){},
decoration: InputDecoration(
// 初始化的輸入框比較高,這個解決高度
contentPadding: EdgeInsets.all(10.0),
//默認提示
hintText:"呵呵呵提示",
labelText: "輸入",
helperText: "請輸入你的輸入",
border: OutlineInputBorder(
// 圓邊角
borderRadius: BorderRadius.circular(15.0)
)
),
),
| API | 做用 | 可選參數 |
|---|---|---|
| enableInteractiveSelection | 爲true的時候長按會顯示系統粘貼板的內容 | Boolean |
| enabled | 禁止輸入 | Boolean |
| cursorColor | 聚焦點的顏色 | - |
| cursorRadius | 聚焦點的園邊角 | - |
| cursorWidth | 聚焦點寬度 | - |
| autofocus | 自動獲取焦點 | - |
| maxLength | 長度限制 | Number |
| obscureText | 類型是否爲密碼 | Boolean |
| keyboardType | 輸入框類型 | - |
| textAlign | 文本對齊方式 | - |
| maxLines | 最大行數 | Number |
| autocorrect | 是否自動更正 | Boolean |
| onChanged | 值改變事件 | Func |
| onSubmitted | 用戶完內容事件 | Func |
| onEditingComplete | 內容提交Enter | Func |
| decoration | 樣式裝飾器 | - |
具體代碼見github ,歡迎各位Star,以及提issues
不按期更新,根據工做繁忙程度決定.
如下是相關文章flutter常見組件之Button(第二期)
相關文章
- 1. flutter常見組件之Button(第二期)
- 2. flutter經常使用組件API(第三期)
- 3. Flutter第一期 - 初識Flutter
- 4. flutter組件（一）
- 5. Flutter常用佈局組件
- 6. Flutter常用組件（二）：Container
- 7. react 常見api 使用（長期更新）
- 8. 常見配置文件大全(第一期)
- 9. Flutter常見錯誤
- 10. Flutter 常見錯誤
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • 常用的分佈式事務解決方案
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章