您好,欢迎来到华佗小知识。
搜索
您的当前位置:首页flutter底部导航TabBar

flutter底部导航TabBar

来源:华佗小知识
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, //配置浮动按钮的位置
    );
  }
}

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo0.cn 版权所有 湘ICP备2023017654号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务