Flutter FloatingActionButton实现类似闲鱼app底部导航栏凸起按钮

在这里插入图片描述在这里插入图片描述

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('设置')

          ),

        ],
      ),
    );
  }
}



猜你喜欢

转载自blog.csdn.net/qq_42572245/article/details/106741229