Flutter学习笔记15-FloatingActionButton实现App底部导航凸起按钮

最新推荐文章于 2024-05-13 22:46:08 发布

刘景艺

最新推荐文章于 2024-05-13 22:46:08 发布

阅读量621

点赞数

分类专栏： Flutter学习笔记文章标签： flutter 学习

本文链接：https://blog.csdn.net/convex1009848621/article/details/127808039

版权

Flutter学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习视频地址：https://www.bilibili.com/video/BV1S4411E7LY?p=34&spm_id_from=pageDriver&vd_source=cee744cae4ead27f8193fc7904647073

学习笔记
本篇文章是基于上篇文章的：https://blog.csdn.net/convex1009848621/article/details/127803176?spm=1001.2014.3001.5501
上篇文章我们创建了一个底部有3个tab的并且可以切换的页面。
在本篇文章，我们再进行扩展，将底部的tab增加到5个，并将中间的tab按钮，设置成特殊样式。

1.创建5个tab的底部栏

import 'package:first_flutter_app/pages/tabs/add.dart';
import 'package:first_flutter_app/pages/tabs/category.dart';
import 'package:first_flutter_app/pages/tabs/home.dart';
import 'package:first_flutter_app/pages/tabs/mine.dart';
import 'package:first_flutter_app/pages/tabs/search.dart';
import 'package:flutter/material.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<Widget> _pages = [
    HomePage(),
    CategoryPage(),
    AddPage(),
    SearchPage(),
    MinePage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("flutter demo"),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: (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.search), label: "发现"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
        ],
      ),
    );
  }
}

显示效果
在这里插入图片描述

2.引入FloatingActionButton
在Scaffold添加

floatingActionButton: FloatingActionButton(
        onPressed: () {},
      ),

得到毫无修饰的浮动按钮
在这里插入图片描述
来做一些修饰

floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

直接看效果
在这里插入图片描述
基本上就实现了我们想要的样式

3.设置点击事件
现在的浮动按钮还没有点击事件，我们想点击浮动按钮的时候要切换到发布页面上
也就是floatingActionButton的onPressed要将_currentIndex设置成2，而且要在setState()中进行赋值

floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            _currentIndex = 2;
          });
        },
      ),