1.ListTile
clipboard.png
效果如上:
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”);
}
)
3.floatingActionButton(不规则底部导航栏)
clipboard.png
效果如上
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;
});
},
)
],
),
),
);
转载请注明：XAMPP中文组官网 » flutter常见组件API(持续更新)