学习
实践
活动
专区
工具
TVP
写文章

【Flutter】底部导航实现 ( BottomNavigationBar 底部导航 | BottomNavigationBarItem 导航条目 | PageView )

文章目录 一、Scaffold 组件 二、底部导航整体架构 三、BottomNavigationBar 底部导航 四、BottomNavigationBarItem 导航条目 五、PageView 一、Scaffold 组件 ---- Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ; Scaffold 提供了显示左侧侧拉导航 底部导航组件 , 该底部导航的 item 设置图标与文字组件数组 , onTap 字段设置 ValueChanged<int> 点击回调方法 , 通过该方法设置当前选择的页面索引值 ; Scaffold onTap 字段设置点击事件 , 传入的参数是点击的底部导航索引值 ; BottomNavigationBar 构造函数 : BottomNavigationBar({ Key? , /// 导航按钮点击事件 onTap: (pageIndex) { /// 跳转到对应的导航页面 _pageController.jumpToPage(pageIndex)

43750
  • 广告
    关闭

    618夏日盛惠

    2核2G云服务器首年95元,GPU云服务器低至9.93元/天,还有更多云产品低至0.1折…

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Qt编写自定义控件46-树状导航

    一、前言 树状导航控件是所有控件中最牛逼最经典最厉害的一个,在很多购买者中,使用频率也是最高,因为该导航控件集合了非常多的展示效果,比如左侧图标+右侧箭头+元素前面的图标设置+各种颜色设置等,全部涵盖了 ,代码量也比较多,该控件前后完善了三年,还提供了角标展示文字信息,纵观市面上web也好,cs架构的程序也好,这种导航条使用非常多,目前只提供了二级菜单,如果需要三级菜单需要自行更改源码才行。 :可设置节点展开模式 单击+双击+禁用 三、效果图 [在这里插入图片描述] 四、头文件代码 #ifndef NAVLISTVIEW_H #define NAVLISTVIEW_H /** * 树状导航控件 超过150个精美控件,涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航,flatui、高亮按钮、滑动选择器、农历等。 每个控件默认配色和demo对应的配色都非常精美。 超过130个可见控件,6个不可见控件。 部分控件提供多种样式风格选择,多种指示器样式选择。 所有控件自适应窗体拉伸变化。

    1.4K40

    TabLayout用法,android顶部导航,android底部导航

    TabLayout是android.support.design里的一个控件,使用它可以很方便的做出顶部导航和底部导航。类似于这样的,能设置选中时字体的颜色和选中时的图片。 ? ? TitleFragmentPagerAdapter adapter = new TitleFragmentPagerAdapter(getFragmentManager(), fragments, new String[]{"第一" , "第二", "第三"}); viewpager.setAdapter(adapter); tabLayout.setupWithViewPager(viewpager 下面说第二种带图片的底部导航, 其实也很简单,就是把TabLayout放到底部,上面是viewpager,然后给text设置个图片就行了。 :drawable = "@drawable/nav_home" android:state_selected = "false" /> </selector> OK,以上做完就可以了,带图片的底部导航就做好了

    2K10

    WordPress导航图标

    前言 好多小伙伴看到网站的导航旁边有小图标觉得很好看,那么今天我特地出一个教程和大家说一下如何操作的~、 准备工作: 1、进入到 iconfont 官网进行注册账号 2、登录成功之后会有一个搜索框,这个就要看你自己想要什么样的图标了 教程 1、鼠标放入每个图标都会有三个按钮(自上到下):添加入库、收藏、下载 2、我们选择收藏入库 3、每收藏入库一个图标,导航上的收藏入库的数量就会+1 4、选择好自己喜欢的图标之后,点击顶部导航的购物车图标 5、将选择好的图标添加至项目(没有的话可以新建一个项目) 6、点击导航中的资源管理-》我的项目 就会看到自己选择的图标 第一步:引入js和css 在图标项目页中选择 Symbol 你会看到一串js 和 --> 第二步:复制相应的图标代码 这个就比较简单了,在项目中选择图标,会显示出复制代码 点击复制即可 您复制的代码举例如下:icon-SmartHome 第三步:配置 在网站后台—>外观—>菜单—>导航名称

    19820

    【CSS】课程网站头部制作 ② ( 导航测量 | 导航编写 | 代码示例 )

    文章目录 一、 导航测量 1、 左侧边界 2、 文本测量 3、 底部边框测量 二、 导航代码编写 1、 HTML 标签结构 2、 CSS 样式 3、最终显示效果 三、 完整代码 1、 HTML 标签结构 2、 CSS 样式 一、 导航测量 ---- 1、 左侧边界 导航 最左侧位置 , 距离 logo 盒子 有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子 与 导航之间的距离设置成 ---- 1、 HTML 标签结构 导航使用 无序列表 实现 , div 块级盒子 中 , 存放一个 ul 无序列表 , 无序列表的 li 中 , 存储一个 a 链接标签 ; <! 盒子放在一行中 ; /* 导航设置 左浮动 */ .nav { float: left; } 导航中的无序列表 , 需要设置左浮动 , 才能将 块级元素 从左右到进行排列 ; /* 导航栏内部 的外边距 */ margin-right: 60px; } /* 导航设置 左浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置左浮动 */ .nav

    41320

    # iOS导航控制Tips

    许久不写UI,对UI的很多东西都生疏了,最近使用导航的各种场景做一些总结。 1.导航的显示与隐藏 导航的显示与隐藏,分两种情况: 1.从不显示导航的页面push到显示导航的页面。 2.从显示导航的页面Push到不显示导航的页面。 注意: 1.如果导航不显示时,系统的侧滑返回功能无效。 针对以上两种情况分别处理,整个Push过程都假设是从A页面跳转到B页面 1.1 从不显示导航的页面Push到显示导航的页面。 关于导航的显示,是否顺滑,是通过如下两个方法来控制。 // 不显示动画,导航显示就比较突兀 [self.navigationController setNavigationBarHidden:YES]; // 显示动画,在侧滑时,导航显示就比较顺滑 viewWillAppear:animated]; [self.navigationController setNavigationBarHidden:NO animated:YES]; } 1.2 从显示导航的页面跳转到不显示导航的页面

    64331

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 轻量应用服务器

      轻量应用服务器

      轻量应用服务器(Lighthouse)是一种易于使用和管理、适合承载轻量级业务负载的云服务器,能帮助中小企业及开发者在云端快速构建网站、博客、电商、论坛等各类应用以及开发测试环境,并提供应用部署、配置和管理的全流程一站式服务,极大提升构建应用的体验,是您使用腾讯云的最佳入门途径。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注腾讯云开发者

      领取腾讯云代金券