BottomNavigationBar 组件
放在 Scaffold 组件中
| 属性 | 作用 | 类型 |
|---|---|---|
| items | 底部导航栏集合 | List |
| iconSize | 图标 | Icon |
| currentIndex | 默认选中第几个 | Index |
| onTap | 触发的回调函数 | (index){} |
| fixedColor | 选中的颜色 | Color |
| type | 当超过三个导航栏时需要配置该类型 | BottomNavigationBarType.fixed |
Scaffold(
bottomNavigationBar:BottomNavigationBar(
type:BottomNavigationBarType.fixed,
currentIndex:0,
onTap:(index){
// 打印当前点击图标的下标
}
items:const [
BottomNavigationBarItem(
icon:Icon(Icons.home),
label:"首页"
),
BottomNavigationBarItem(
icon:Icon(Icons.class),
label:"分类"
),
BottomNavigationBarItem(
icon:Icon(Icons.char),
label:"购物车"
),
BottomNavigationBarItem(
icon:Icon(Icons.user),
label:"我的"
),
]
)
)切换页面,可定义多个body的组件,通过taber的index对应好每个body的数组中下标的位置
全屏浮动组件实现闲鱼按钮效果
Scaffold(
floatingActionButton:Container(
height:30,
width:30,
padding:EdgeInsets.all(4),
margin:EdgInsets.only(top:4),
decoration:BoxDecoration(
color:Colors.white,
borderRadius:BorderRadius.circular(15)
),
child:FloatingActionButton(
onPress(){},
child:Icon(Icons.add)
)
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)