flutter自定义底部导航

已于 2023-11-08 11:39:30 修改
阅读量78 收藏
点赞数 1
分类专栏： flutter 文章标签： flutter
于 2023-11-08 11:00:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62359005/article/details/134284286
版权 
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 = homeG.isJobFair == false ||

          homeG.isJobFair == null

      ? [HomePage(), ClockInPage(), MessagePage(), UserPage()]

      : [HomePage(), JobFairPage(), ClockInPage(), MessagePage(), UserPage()];

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        body: _pages[_currentIndex],

        bottomNavigationBar: BottomNavigationBar(

          iconSize: 20,

          selectedFontSize: 10,

          unselectedFontSize: 10,

          selectedLabelStyle: TextStyle(height: 2.0), // 调整行高

          unselectedLabelStyle: TextStyle(height: 2.0), // 调整行高

          fixedColor: AppColors.firstdaryColor,

          currentIndex: _currentIndex,

          type: BottomNavigationBarType.fixed,

          onTap: (index) {

            setState(() {

              _currentIndex = index;

            });

          },

          items: [

            BottomNavigationBarItem(

              icon: ImageIcon(

                AssetImage(

                  _currentIndex == 0

                      ? 'images/tabBar/home-select.png'

                      : 'images/tabBar/home.png',

                ),

                size: 20,

                color: _currentIndex == 0

                    ? AppColors.firstdaryColor

                    : Color(0xFFC1C8D0),

              ),

              label: "首页",

            ),

            if (homeG.isJobFair == true)

              BottomNavigationBarItem(

                icon: ImageIcon(

                  AssetImage(

                    _currentIndex == 1

                        ? 'images/tabBar/jobfair-select.png'

                        : 'images/tabBar/jobfair.png',

                  ),

                  size: 20,

                  color: _currentIndex == 1

                      ? AppColors.firstdaryColor

                      : Color(0xFFC1C8D0),

                ),

                label: "招聘会",

              ),

            BottomNavigationBarItem(

              icon: ImageIcon(

                AssetImage(

                  homeG.isJobFair == false

                      ? _currentIndex == 1

                          ? 'images/tabBar/clock-select.png'

                          : 'images/tabBar/clock.png'

                      : _currentIndex == 2

                          ? 'images/tabBar/clock-select.png'

                          : 'images/tabBar/clock.png',

                ),

                size: 20,

                color: homeG.isJobFair == false

                    ? _currentIndex == 1

                        ? AppColors.firstdaryColor

                        : Color(0xFFC1C8D0)

                    : _currentIndex == 2

                        ? AppColors.firstdaryColor

                        : Color(0xFFC1C8D0),

              ),

              label: "打卡",

            ),

            BottomNavigationBarItem(

              icon: ImageIcon(

                AssetImage(

                  homeG.isJobFair == false

                      ? _currentIndex == 2

                          ? 'images/tabBar/message-select.png'

                          : 'images/tabBar/message.png'

                      : _currentIndex == 3

                          ? 'images/tabBar/message-select.png'

                          : 'images/tabBar/message.png',

                ),

                size: 20,

                color: homeG.isJobFair == false

                    ? _currentIndex == 2

                        ? AppColors.firstdaryColor

                        : Color(0xFFC1C8D0)

                    : _currentIndex == 3

                        ? AppColors.firstdaryColor

                        : Color(0xFFC1C8D0),

              ),

              label: "消息",

            ),

            BottomNavigationBarItem(

              icon: ImageIcon(

                AssetImage(

                  homeG.isJobFair == false

                      ? _currentIndex == 3

                          ? 'images/tabBar/mine-selset.png'

                          : 'images/tabBar/mine.png'

                      : _currentIndex == 4

                          ? 'images/tabBar/mine-selset.png'

                          : 'images/tabBar/mine.png',

                ),

                size: 20,

                color: homeG.isJobFair == false

                    ? _currentIndex == 3

                        ? AppColors.firstdaryColor

                        : Color(0xFFC1C8D0)

                    : _currentIndex == 4

                        ? AppColors.firstdaryColor

                        : Color(0xFFC1C8D0),

              ),

              label: "我的",

            ),

          ],

        )

        );

  }

}

以上代码存在的问题，设置的颜色会覆盖图片原有的颜色

flutter大佬
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Flutter 自定义底部导航栏
01-07
import 'package:flutter/material.dart'; import 'pages/tabs.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ...
Flutter自定义底部导航栏
黑男人的博客
05-13 3485
一、原因 之前一直使用（Flutter SDK 1.2.1稳定版），遇到一个很不爽的问题——BottomNavigationBarItem 选中时 title中的文字会放大。有什么设置可以去掉这个放大呢? 国内的APP中很少有navigation item 有动画的！！！ 即搜索比首页的字号大，而且切换的时候是有动画的。 二、解决 在BottomNavigationBar的api中根本没有找到对...
flutter 自定义底部 BottomNavigationBar
半身风雪
11-23 4363
在日常开发中，很多时候flutter 自带的BottomNavigationBar 无法满足我们的需求，那么就需要自定义BottomNavigationBar 了，本篇文章将记录自定义 BottomNavigationBar 的封装，可以扩展成我们在日常开发中所有的需求。当然，本篇文章使用provider 来封装的，如果不使用provider，只需要看中间的widget 文件就可以了。
Flutter 自定义底部导航条及切换
qq_42572245的博客
06-09 441
未抽离代码 import 'package:flutter/material.dart'; import 'package:untitled1/res/data.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return ..
Flutter BottomNavigationBar 自定义底部导航条、以及实现页面切换.zip
06-04
此资源是关于移动端框架Flutter（基于Android）的一些常见组件的介绍，包括PPT讲义...此资源介绍的相关内容有：BottomNavigationBar 自定义底部导航条、以及实现页面切换。 适合新手学习移动端开发，也适合老司机参考。
flutter BottomAppBar实现不规则底部导航栏
01-20
本文实例为大家分享了flutter实现不规则底部导航栏的具体代码，供大家参考，具体内容如下 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNavigationBarItem ...
Flutter学习笔记仿闲鱼底部导航栏带有中间凸起图标
08-10
Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
Android 自定义底部导航栏+消息数量显示
08-10
本资源为博客源码：http://blog.csdn.net/tyzlmjj/article/details/47186249
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 672
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
Flutter 中的 ChoiceChip 小部件：全面指南
smileKH的博客
05-14 389
你可以通过修改ChoiceChip的各种属性来自定义它的外观。ChoiceChip是一个非常有用的组件，可以帮助你快速实现选项选择的功能。通过上述示例，你应该能够理解如何在Flutter应用中使用ChoiceChip，并且可以根据你的需求进行自定义。记得在设计UI时，保持一致性和直观性，以提供良好的用户体验。
Flutter 中的 Material 小部件：全面指南
smileKH的博客
05-16 595
Material 组件是 Flutter 框架的一部分，它们实现了 Material Design 设计语言。这些组件包括按钮、卡片、对话框、滑块、开关等，它们都包含了 Material Design 中的交互模式和动画效果。Card(elevation: 8.0, // 卡片的阴影高度borderRadius: BorderRadius.circular(10.0), // 卡片的圆角),),
Flutter 中的 checkboxListTile 小部件：全面指南
smileKH的博客
05-14 339
你可以通过设置不同的属性来定制value) {// 处理点击事件},activeColor: Colors.green, // 复选框激活时的颜色contentPadding: EdgeInsets.all(12.0), // 自定义内边距是一个在需要实现复选框列表时非常有用的组件。它不仅提供了必要的交互功能，还允许你根据应用的风格进行定制。使用可以创建出既美观又实用的列表界面，同时保持了Material Design的一致性。记住，设计时应考虑用户的交互体验，确保列表项的可读性和易用性。
Flutter 中的 WillPopScope 小部件：全面指南
smileKH的博客
05-16 323
是一个可以包裹任何 widget 的小部件，它监听用户尝试关闭当前页面的行为（通常是通过点击 Android 的返回按钮或 iOS 的导航栏上的返回按钮）。通过，你可以控制是否允许这个操作发生，或者在允许之前执行一些自定义逻辑。// 执行退出前的验证逻辑},child: ... // 其他页面内容。
Flutter 中的 AlertDialog 小部件：全面指南
smileKH的博客
05-14 379
你可以通过设置不同的属性来定制// 处理不同意操作},),// 处理同意操作},),],),是一个在需要向用户显示重要信息或请求用户做出选择时非常有用的组件。它不仅提供了必要的交互功能，还允许你根据应用的风格进行定制。使用可以创建出既美观又实用的模态对话框，同时保持了Material Design的一致性。记住，设计时应考虑用户的交互体验，确保对话框内容的可读性和易用性。通过上述示例，你应该能够理解如何在Flutter应用中使用，并且可以根据你的需求进行自定义。
Flutter 中的 GridTile 小部件：全面指南
smileKH的博客
05-14 302
你可以通过设置不同的属性来定制GridTileGridTile(),),),GridTile是一个在需要以网格形式展示内容时非常有用的组件。它不仅提供了必要的布局功能，还允许你根据应用的风格进行定制。使用GridTile可以创建出既美观又实用的网格界面，同时保持了Material Design的一致性。记住，设计时应考虑用户的交互体验，确保网格项的可读性和易用性。通过上述示例，你应该能够理解如何在Flutter应用中使用GridTile，并且可以根据你的需求进行自定义。
Flutter 中的 Listener 小部件：全面指南
smileKH的博客
05-14 351
虽然ListenerListener(// 仅对鼠标按下事件进行响应},// ...),Listener是一个简单但功能强大的组件，它允许开发者监听和响应各种用户交互事件。使用Listener可以创建出交互性强的界面，同时保持布局的灵活性。记住，合理使用Listener可以提升应用的交互性和用户体验。通过上述示例，你应该能够理解如何在Flutter应用中使用Listener，并且可以根据你的需求进行自定义。
【Flutter 面试题】 Const和Final的区别?
最新发布
Code Metaverse
05-18 368
Const 更适合用于那些在编译时就能确定的值，而 Final 则适用于那些需要在运行时才能确定的值。
flutter 自定义tab导航-顶部导航-底部导航
06-01
好的，我可以为您讲解一下Flutter自定义Tab导航的实现方法。 对于顶部导航，可以使用TabBar和TabBarView来实现。TabBar是一个水平的导航栏，TabBarView是一个可以滚动的控件，可以用来展示不同的页面内容。下面是一个简单的示例代码： ``` TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 2, vsync: this); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('顶部导航'), bottom: TabBar( controller: _tabController, tabs: [ Tab(text: 'Tab1'), Tab(text: 'Tab2'), ], ), ), body: TabBarView( controller: _tabController, children: [ // Tab1页面内容 Container( child: Text('Tab1'), ), // Tab2页面内容 Container( child: Text('Tab2'), ), ], ), ); } ``` 对于底部导航，可以使用BottomNavigationBar来实现。BottomNavigationBar是一个底部导航栏，可以用来切换不同的页面。下面是一个简单的示例代码： ``` int _currentIndex = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('底部导航'), ), body: Center( child: Text('当前页面: $_currentIndex'), ), bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (index) { setState(() { _currentIndex = index; }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text('首页'), ), BottomNavigationBarItem( icon: Icon(Icons.search), title: Text('搜索'), ), BottomNavigationBarItem( icon: Icon(Icons.person), title: Text('个人中心'), ), ], ), ); } ``` 对于自定义Tab导航，可以使用自定义控件来实现。比如，可以使用Row和GestureDetector来构建一个自定义的Tab导航栏。下面是一个简单的示例代码： ``` int _currentIndex = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('自定义Tab导航'), ), body: Center( child: Text('当前页面: $_currentIndex'), ), bottomNavigationBar: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ GestureDetector( onTap: () { setState(() { _currentIndex = 0; }); }, child: Column( children: [ Icon(Icons.home, color: _currentIndex == 0 ? Colors.blue : Colors.grey), Text('首页', style: TextStyle(color: _currentIndex == 0 ? Colors.blue : Colors.grey)), ], ), ), GestureDetector( onTap: () { setState(() { _currentIndex = 1; }); }, child: Column( children: [ Icon(Icons.search, color: _currentIndex == 1 ? Colors.blue : Colors.grey), Text('搜索', style: TextStyle(color: _currentIndex == 1 ? Colors.blue : Colors.grey)), ], ), ), GestureDetector( onTap: () { setState(() { _currentIndex = 2; }); }, child: Column( children: [ Icon(Icons.person, color: _currentIndex == 2 ? Colors.blue : Colors.grey), Text('个人中心', style: TextStyle(color: _currentIndex == 2 ? Colors.blue : Colors.grey)), ], ), ), ], ), ); } ``` 以上是三种常见的Tab导航实现方法，您可以根据自己的需求选择合适的方式来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值