flutter底部导航TabBar

最新推荐文章于 2024-05-24 19:18:47 发布

flutter大佬

最新推荐文章于 2024-05-24 19:18:47 发布

阅读量213

点赞数 1

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/m0_62359005/article/details/134285211

版权

flutter 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

import 'package:flutter/material.dart';
import '../../../../static/colors.dart';
import './tabs/home.dart';
import 'tabs/homeG.dart';
import 'tabs/jobFair.dart';
import 'tabs/clockIn.dart';
import 'tabs/message.dart';
import './tabs/user.dart';

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = homeG.tabsCurrentIndex ?? 0;
  final List<Widget> _pages = const [
    HomePage(),
    JobFairPage(),
    ClockInPage(),
    MessagePage(),
    UserPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          // fixedColor: Colors.red, //选中的颜色
          fixedColor: AppColors.firstdaryColor,
          // iconSize: 24, //底部菜单大小
          currentIndex: _currentIndex, //第几个菜单选中
          type: BottomNavigationBarType.fixed, //如果底部有4个或者4个以上的菜单的时候就需要        配置这个参数
          onTap: (index) {
            //点击菜单触发的方法
            //注意
            setState(() {
              _currentIndex = index;
            });
          },
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "一页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "二页"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "三页"),
            BottomNavigationBarItem(icon: Icon(Icons.message), label: "四页"),
            BottomNavigationBarItem(icon: Icon(Icons.people), label: "五页")
          ]),
//底部中间大图标可用解开底下的代码查看样式
      // floatingActionButton: Container(
      //   height: 60, //调整FloatingActionButton的大小
      //   width: 60,
      //   padding: const EdgeInsets.all(5),
      //   margin: const EdgeInsets.only(top: 5), //调整FloatingActionButton的位置
      //   decoration: BoxDecoration(
      //     color: Colors.white,
      //     borderRadius: BorderRadius.circular(30),
      //   ),
      //   child: FloatingActionButton(
      //       backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
      //       child: const Icon(Icons.add),
      //       onPressed: () {
      //         setState(() {
      //           _currentIndex = 2;
      //         });
      //       }),
      // ),
      // floatingActionButtonLocation:
      //     FloatingActionButtonLocation.centerDocked, //配置浮动按钮的位置
    );
  }
}