当前位置: 首页 > article >正文

flutter底部导航栏中间按钮凸起,导航栏中间部分凹陷效果

在这里插入图片描述

关键代码:
Scaffold中设置floatingActionButtonLocation: FloatingActionButtonLocation.centerDockedextendBody: true
BottomAppBar中设置shape: const CircularNotchedRectangle()

Scaffold(
              extendBody: true,//body是否延伸脚手架底部,在底部导航栏的边缘添加了凹口时,确保能看到body内容
              body: _body(),
              floatingActionButton: FloatingActionButton(
                backgroundColor: Colors.transparent,
                onPressed: () {
                  isLogin().then((value) {
                    if (value == true) {
                      Utils().postDialog(context);
                    } else {
                      NavigatorUtil.push(LoginPage());
                    }
                  });
                },
                child: Image.asset(PathConfig.iconPublishGreen,width: 112.w,height: 112.w),
              ),
              floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
              bottomNavigationBar: _bottomNavigationAppBar(),
            );


//中间凸出的底部导航栏(和floatingActionButton配合使用)
  _bottomNavigationAppBar(){
    return SizedBox(
      height: 110.w,
      child: BottomAppBar(
        color: Colors.white,
        shape: const CircularNotchedRectangle(),//添加一个凹口的形状
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            // 首页底部图标
            Expanded(child: GestureDetector(
                child: _currentIndex == 0
                    ? Image.asset(PathConfig.iconLogoRound,width: 64.w,height: 64.w)
                    : Container(
                  color: Colors.transparent,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        width: 40.w,
                        height: 40.w,
                        margin: EdgeInsets.only(bottom: 4.w),
                        child: Image(
                          image: AssetImage(PathConfig.iconUnselectAtui),
                        ),
                      ),
                      Text(S.of(context).atui,
                          style: TextStyle(
                              fontSize: 20.sp,
                              color: _currentIndex == 0 ? Color(0xffe63850) : Color(0xffD2D5D4)))
                    ],
                  ),
                ),
                onTap: (){
                  _changePage(0);
                }
            )),
            // 商城底部图标
            Expanded(child: GestureDetector(
                child: Container(
                  color: Colors.transparent,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        width: 40.w,
                        height: 40.w,
                        margin: EdgeInsets.only(bottom: 4.w),
                        child: Image(
                          image: AssetImage(
                              _currentIndex == 1 ? PathConfig.iconSelectedMarket : PathConfig.iconUnselectMarket),
                        ),
                      ),
                      Text(S.of(context).market,
                          style: TextStyle(
                              fontSize: 20.sp, color: _currentIndex == 1 ? JadeColors.green_2 : Color(0xffD2D5D4)))
                    ],
                  ),
                ),
                onTap: (){
                  _changePage(1);
                }
            )),
            // 发布图标
            Expanded(child: GestureDetector(
                child: Column(
                  children: <Widget>[
                    Container(
                      width: 40.w,
                      height: 40.w,
                    ),
                    /*Text(
                      S.of(context).publish,
                      style: TextStyle(
                          fontSize: 13,
                          color: JadeColors.green_2),
                    )*/
                  ],
                ),
                onTap: (){
                  //_changePage(2);
                }
            )),
            // 消息底部图标
            Expanded(child: GestureDetector(
              child: Container(
                color: Colors.transparent,
                // alignment: Alignment.center,
                child: Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          width: 40.w,
                          height: 40.w,
                          margin: EdgeInsets.only(bottom: 4.w),
                          child: Image(
                            image: AssetImage(_currentIndex == 3 ? PathConfig.iconSelectedMessage : PathConfig.iconUnselectMessage),
                          ),
                        ),
                        Text(
                          S.of(context).xiaoxi,
                          style: TextStyle(
                              fontSize: 20.sp,
                              color: _currentIndex == 3 ? JadeColors.green_2 : Color(0xffD2D5D4)),
                        )
                      ],
                    ),
                    Positioned(
                        right: 40.w,
                        top: 6.w,
                        child: _messageCountView())
                  ],
                ),
              ),
              onTap: (){
                _changePage(3);
              },
            )),
            // 我的底部图标
            Expanded(child: GestureDetector(
              child: Container(
                  color: Colors.transparent,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        width: 40.w,
                        height: 40.w,
                        margin: EdgeInsets.only(bottom: 4.w),
                        child: Image(
                          image: AssetImage(_currentIndex == 4 ? PathConfig.iconSelectedMine : PathConfig.iconUnselectMine),
                        ),
                      ),
                      Text(
                        S.of(context).wode,
                        style: TextStyle(
                            fontSize: 20.sp,
                            color: _currentIndex == 4 ? JadeColors.green_2 : Color(0xffD2D5D4)),
                      )
                    ],
                  )
              ),
              onTap: (){
                _changePage(4);
              },
            ))
          ],
        ),
      ),
    );

  }


http://www.kler.cn/a/417920.html

相关文章:

  • 算法刷题Day1
  • [MacOS] [kubernetes] MacOS玩转虚拟化最佳实践
  • 深入浅出机器学习中的梯度下降算法
  • 【Maven】依赖冲突如何解决?
  • 网关整合sentinel无法读取nacos配置问题分析
  • Docker Buildx 与 CNB 多平台构建实践
  • Cursor AI快捷键的使用场景及作用
  • 【机器学习】机器学习算法与模型:逻辑回归算法
  • 电销卡风险管理系统
  • springboot358智慧社区居家养老健康管理系统(论文+源码)_kaic
  • 【大数据学习 | Spark调优篇】数据序列化(kryo序列化)
  • 鸿蒙学习使用模拟器运行应用(开发篇)
  • 深度学习基础03_BP算法(下)过拟合和欠拟合
  • 工程设计与总承包行业数字化转型:现状洞察、挑战突围与前景展望
  • 基于Java Springboot学生信息管理系统
  • asyncio.ensure_future 与 asyncio.create_task:Python异步编程中的选择
  • 汉字笔画分割959张图片带注释的YOLO,COCO,VOC格式的数据集
  • Vue-指令-案例
  • java——Spring MVC的工作流程
  • Python 中的 Lxml 库与 XPath 用法
  • ARP表、MAC表、路由表的区别和各自作用
  • 为什么在PyTorch中需要添加批次维度
  • ElasticSearch通过es-head插件安装可视化及相关问题
  • 告别 Kafka,拥抱 Databend:构建高效低成本的用户行为分析体系
  • 基于VMware 的 deepin 系统 学习 安装 1Panel mysql redis
  • Elasticsearch数据冷热分离