Flutter-BottomNavigationBar 底部菜单 和 仿闲鱼底部按钮

main.dart入口文件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.amber),
        home: Tabs());
  }
}

taps.dart 管理菜单

import 'package:flutter/material.dart';
import 'package:flutter_01/pages/taps/Home.dart';
import 'package:flutter_01/pages/taps/Category.dart';
import 'package:flutter_01/pages/taps/Setting.dart';

class Tabs extends StatefulWidget {
  const Tabs({Key? key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TITLE')),
      body: _pageList[this._currentIndex],
 floatingActionButton: Container(
        height: 80,
        width: 80,
        padding: EdgeInsets.all(8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
          color: Colors.white
        ),
        child: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: (){

          },

        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      bottomNavigationBar: BottomNavigationBar(
        iconSize: 25,//图标的大小
        fixedColor: Colors.red,//选中颜色
        type: BottomNavigationBarType.fixed,//配置多余4个按钮时候配置
        currentIndex: this._currentIndex,
        onTap: (int index) {
          print(this._currentIndex);
          print(index);

          setState(() {
            this._currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置")
        ],
      ),
    );
  }
}

Home.dart 展示页面 其它就不写了

import 'package:flutter/material.dart';



class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('我是首页'),
    );
  }
}

image.png

这段代码加入Scaffold内
通过 margin: EdgeInsets.only(top: 40), 来调整靠下距离

 floatingActionButton: Container(
        height: 80,
        width: 80,
        padding: EdgeInsets.all(8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
          color: Colors.white
        ),
        child: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: (){

          },

        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

image.png