利用FloatingActionButton实现底部凸起的导航栏

利用FloatingActionButton实现底部凸起的导航栏

FloatingActionButton就是如图样式的组件,简称FAB

属性名称	属性值
child	子视图，一般为 Icon，不推荐使用文字
tooltip	FAB 被长按时显示，也是无障碍功能
backgroundColor	背景颜色
elevation	未点击的时候的阴影
hignlightElevation	点击时阴影值，默认 12.0
onPressed	点击事件回调
shape	可以定义 FAB 的形状等
mini	是否是 mini 类型默认 false

接下来我们要利用FloatingActionButton来实现一个如图样式的底部凸起的导航栏


如图可以看出，实际上就是将FloatingActionButton放在了我们导航栏中间的位置
准备的五个页面

CategoryPage.dart

// ignore_for_file: prefer_const_constructors_in_immutables, avoid_unnecessary_containers, prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

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

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

class _CategoryPageState extends State<CategoryPage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            children: [
              Expanded(child: TabBar(
                isScrollable: true,
              tabs: [         
              Tab(text: "热门"),
              Tab(text: "切换")
              ],
              )
            )
            ],
            ),
          // bottom: TabBar(
          //   tabs: [
          //     Tab(text: "热门"),
          //     Tab(text: "切换")
          //   ],
          // ),
        ),
        body: TabBarView(
          children: [
            ListView(
              children: [
                ListTile(
                  title: Text("第一个Tab"),
                ),
                ListTile(
                  title: Text("第一个Tab"),
                )
              ],
            ),
            ListView(
              children: [
                ListTile(
                  title: Text("第二个Tab"),
                ),
                ListTile(
                  title: Text("第二个Tab"),
                )
              ],
            )
          ],
          
          ),
      ),
    );
  }
}

EmailPage.dart

// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors, prefer_const_constructors_in_immutables

import 'package:flutter/material.dart';

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

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

class _EmailPageState extends State<EmailPage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      child: Text("这是邮件页面"),
    );
  }
}

HomePage.dart

// ignore_for_file: prefer_const_constructors_in_immutables, prefer_const_constructors

import 'package:flutter/material.dart';

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

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

class _HomePageState extends State<HomePage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Column(
      children: [
        ElevatedButton(
      onPressed: (){
    
    
        Navigator.pushNamed(context, '/appbar');
      }, 
      child: Text("点击转跳"),
      ),
      ElevatedButton(
      onPressed: (){
    
    
        Navigator.pushNamed(context, '/tabBarController');
      }, 
      child: Text("点击转跳TabBarController"),
      ),
      ElevatedButton(
      onPressed: (){
    
    
        Navigator.pushNamed(context, '/tabBarController');
      }, 
      child: Text("点击转跳TabBarController"),
      )
      ],
    );
  }
}

SettingPage.dart

// ignore_for_file: prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

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

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

class _SettingPageState extends State<SettingPage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return ListView(
      children: [
        ListTile(
          title: Text("我是设置页面"),
        )
      ],
    );
  }
}

AddPage.dart（这个页面对应的导航按钮会被FloatingActionButton遮住），给FloatingActionButton设置点击事件改变页面也可以达到页面切换的效果

// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors

import 'package:flutter/material.dart';

class AddPage extends StatelessWidget {
    
    
  const AddPage({
    
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      child: Text("这是添加页面"),
    );
  }
}

Tabs.dart

// ignore_for_file: prefer_final_fields, deprecated_member_use, prefer_const_literals_to_create_immutables, prefer_const_constructors

import 'package:flutter/material.dart';
import 'package:flutterapp/pages/User.dart';
import 'package:flutterapp/pages/tabs/add.dart';
import 'tabs/Category.dart';
import 'tabs/Email.dart';
import 'tabs/Home.dart';
import 'tabs/Setting.dart';
import '../pages/User.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(),
    AddPage(),
    SettingPage(),
    EmailPage()
  ];
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
      ),
      floatingActionButton: Container(
        height: 70,
        width: 70,
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(top: 30),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(35),
            color: Color.fromARGB(255, 250, 250, 250)),
        child: FloatingActionButton(
          onPressed: () {
    
    
            setState(() {
    
    
              currentIndex = 2;
            });
          },
          child: Icon(Icons.add),
          backgroundColor: currentIndex==2?Colors.yellow:Colors.blue,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      drawer: Drawer(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                    child: UserAccountsDrawerHeader(
                  accountEmail: Text("[email protected]"),
                  accountName: Text("sky"),
                  currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://cdn.stocksnap.io/img-thumbs/960w/goose-flock_7EARMYLNXB.jpg")),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage(
                            "https://cdn.stocksnap.io/img-thumbs/960w/ice-nature_PHKM6CXBLQ.jpg"),
                        fit: BoxFit.cover),
                  ),
                  otherAccountsPictures: [
                    Image.network(
                        "https://cdn.stocksnap.io/img-thumbs/960w/flower-bloom_NZWKWLNPYX.jpg"),
                    Image.network(
                        "https://cdn.stocksnap.io/img-thumbs/960w/flower-bloom_KAKMFZ02RH.jpg"),
                  ],
                ))
              ],
            ),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.home)),
              title: Text("我的空间"),
            ),
            //设置分割线
            Divider(),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.people)),
              title: Text("用户中心"),
              onTap: () {
    
    
                Navigator.of(context).pop();
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext context) {
    
    
                  return UserPage();
                }));
              },
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.settings)),
              title: Text("设置中心"),
            )
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Text("右侧边栏"),
      ),
      body: _pageList[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (int index) {
    
    
          setState(() {
    
    
            currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首页",
          ),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: "添加"),
          BottomNavigationBarItem(icon: Icon(Icons.mail), label: "邮件"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
        ],
      ),
    );
  }
}

把相关代码再摆出来方便查看

/*按钮摆放的位置和APPBar同级,因为不能设置floatingActionButton大小，
因此在外面嵌套一个Container来设置大小，我们也可以通过margin: EdgeInsets.only(top: 30),
改变来只遮住图案不遮住文字（我们这里把文字图案都遮住了）*/
 floatingActionButton: Container(
        height: 70,
        width: 70,
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(top: 30),
        //把Container设置为圆形
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(35),
            color: Color.fromARGB(255, 250, 250, 250)),
        child: FloatingActionButton(
          onPressed: () {
    
    
            setState(() {
    
    
              currentIndex = 2;
            });
          },
          child: Icon(Icons.add),
          //点击时改变按钮颜色
          backgroundColor: currentIndex==2?Colors.yellow:Colors.blue,
        ),
      ),
      //设置floatingActionButton位置在底部中间
      floatingActionButtonLocation:  FloatingActionButtonLocation.centerDocked,