import 'package:flutter/material.dart';
import 'package:untitled1/Pages/tabs/Home.dart';
import 'package:untitled1/Pages/tabs/Setting.dart';
import 'package:untitled1/Pages/tabs/Category.dart';
class TabsButton extends StatefulWidget {
@override
_TabsButtonState createState() => _TabsButtonState();
}
class _TabsButtonState extends State<TabsButton> {
int _currentIndex=0;
List _list=[
HomePage(),
Category(),
Setting()
];
@override
Widget build(BuildContext context) {
return Scaffold(
/* appBar: AppBar(
title: Text(
'Title',
style: TextStyle(color: Colors.amber),
)),*/
//主要代码
floatingActionButton: Container(
height: 60,
width: 60,
padding: EdgeInsets.all(6),
margin: EdgeInsets.only(top: 33),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),//圆框
color:Colors.white
),
child: FloatingActionButton(
child: Icon(Icons.add,color: Colors.white,),
onPressed: (){
setState(() {
this._currentIndex=1;
});
},
backgroundColor: this._currentIndex==1?Colors.teal:Colors.cyan,//调整选中颜色
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,//设置floatingActionButton位置
body: this._list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index){
setState(() {
_currentIndex=index;
});
},
iconSize: 40,//icon大小
fixedColor: Colors.cyan,//选中颜色
type: BottomNavigationBarType.fixed,//配置底部tabs可以有多个,不会被挤下去
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('主页')
),
BottomNavigationBarItem(
icon: Icon(Icons.category,size: 40,),
title: Text('分类')
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('设置')
),
],
),
);
}
}
Flutter FloatingActionButton实现类似闲鱼app底部导航栏凸起按钮
猜你喜欢
转载自blog.csdn.net/qq_42572245/article/details/106741229
今日推荐
周排行