QT实现QML侧边导航栏的最简方法

目录
  • TabBar
  • 属性列表
  • 示例代码
  • 侧边导航栏
  • 修改代码
  • 总结

TabBar

在实际开发中导航栏是必不可少的控件,QtQuick Controls控件中可以使用TabBar来做导航栏,原始的导航栏是横向的,查找了其属性后发现无法直接设置为纵向的。本节将给小伙伴们介绍一种非常简单的实现实现QML侧边导航栏的最简方法。原始导航栏如下图:

属性列表

允许用户在不同的视图或子任务之间切换。标签栏提供了一个基于标签的导航模型。TabBar由TabButton控件填充,可以与任何提供currentIndex -属性的布局或容器控件一起使用,如StackLayout或SwipeView。

属性 类型 描述
contentHeight real 此属性保存内容高度。它用于计算选项卡栏的隐式总高度。
contentWidth real 此属性保存内容宽度。它用于计算选项卡栏的隐式总宽度。
position enumeration 此属性保存选项卡栏的位置。
TabBar.HeaderTabBar.Footer
附加属性 类型 描述
index int 这个附加属性保存TabBar中每个选项卡按钮的索引。它被附加到TabBar的每个选项卡按钮上。
position enumeration 这个附加属性保存选项卡栏的位置。它被附加到TabBar的每个选项卡按钮上。
TabBar.HeaderTabBar.Footer
tabBar TabBar 此附加属性保存管理此选项卡按钮的选项卡栏。它被附加到TabBar的每个选项卡按钮上。

示例代码

    TabBar {
        id: bar
        width: parent.width
        TabButton {
            text: qsTr("Home")
        }
        TabButton {
            text: qsTr("Discover")
        }
        TabButton {
            text: qsTr("Activity")
        }
    }

    StackLayout {
        width: parent.width
        currentIndex: bar.currentIndex
        Item {
            id: homeTab
        }
        Item {
            id: discoverTab
        }
        Item {
            id: activityTab
        }
    }

在TabBar中添加三个TabButton,点击TabButton可以实现对StackLayout中相应的Item的切换。

侧边导航栏

从position属性中可以看出,TabBar只能直接设置为顶部和底部,无法直接应用成侧边导航栏。此时,需要将 TabBar和TabButton的大小和位置进行调整,即可实现侧边导航栏。

修改代码

TabBar宽度影响自身和内部包含的TabButton的宽度。横向排列时,TabBar的宽度等于三个TabButton的宽度;纵向排列时,TabBar的宽度等于一个TabButton的宽度。

其次需要改变TabButton的宽度,高度以及排列的位置。横向排列时,TabButton的宽度大于高度;纵向排列时,为了美观,使TabButton的宽度小于高度。将所有TabButton都设置为首位相连,即第一个TabButton的bottom底部就是第二个TabButton的顶部。

    TabBar {
        id: bar
        width: firstBtn.width
        TabButton {
            id: firstBtn
            text: qsTr("Home")
            width: root.width/8
            height: root.height/3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
        }
        TabButton {
            id: secondBtn
            text: qsTr("Discover")
            width: root.width/8
            height: root.height/3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: firstBtn.bottom
        }
        TabButton {
            id: thirdBtn
            text: qsTr("Activity")
            width: root.width/8
            height: root.height/3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: secondBtn.bottom
        }
    }

总结

以上就是实现实现QML侧边导航栏的最简方法,除此之外还可以自定义绘制导航栏控件,不过比起本节介绍的方法较为复杂,不如这种方法来得快捷。更多相关QT QML侧边导航栏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • C/C++ Qt 选择夹TabWidget组件实现导航栏切换

    目录 在Qt中通过使用选择夹组件可以实现在一个页面中集成多种功能,我们以TabWidget选择夹组件为例,实现在单个页面中集成多个功能,并给每一个子夹增加对应的Ico图标. 如果我们使用选择夹组件,必须提前拖入UI界面中(无法代码生成),如下我们找到TabWidget并将其拖入UI界面中. 其次需要增加与美化代码对应的子夹数量,这里我们分别增加三个子夹,此处只需要增加不需要重命名. 接着我们需要增加三个子夹对应的图标组,插入图标组需要执行以下步骤. 选择Forms → 右键(AddNew) →

  • QT实现QML侧边导航栏的最简方法

    目录 TabBar 属性列表 示例代码 侧边导航栏 修改代码 总结 TabBar 在实际开发中导航栏是必不可少的控件,QtQuick Controls控件中可以使用TabBar来做导航栏,原始的导航栏是横向的,查找了其属性后发现无法直接设置为纵向的.本节将给小伙伴们介绍一种非常简单的实现实现QML侧边导航栏的最简方法.原始导航栏如下图: 属性列表 允许用户在不同的视图或子任务之间切换.标签栏提供了一个基于标签的导航模型.TabBar由TabButton控件填充,可以与任何提供currentInd

  • jquery+css实现侧边导航栏效果

    最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1.效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2.css代码 这里是css代码,详情请看注释 <style> /*重置一些样式*/ *, *::a

  • layui禁用侧边导航栏点击事件的解决方法

    直接上代码吧 //JavaScript代码区域 layui.use(['element', 'laypage'],function(){ var element = layui.element; element.on('nav(test)', function(elem){ $(".layui-nav-tree").find(".layui-nav-child").css("display","contents"); });

  • bootstrap自定义样式之bootstrap实现侧边导航栏功能

    bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了.这个bootstrap侧滑菜单更专业的名字叫做手机导航栏.我也比较这个名字,更符合bootstrap的特性.所以我这篇文章介绍的更容易的一种做法,

  • Vue实现侧边导航栏于Tab页关联的示例代码

    目录 技术栈 效果 分析 技术栈 侧边栏用 Antdtab使用element 效果 <template> <div class="main-card"> <el-row> <el-col :span="3"> <div class="menu-all"> <div class="menu-head"> <span class="menu-h

  • jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)

    效果图 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi

  • 微信小程序实现侧边导航栏

    本文实例为大家分享了微信小程序实现侧边导航栏的具体代码,供大家参考,具体内容如下 效果图 wxml <view class='productNav'>   <!-- 左侧 -->   <view class='left'>     <view class="{{active==0?'selected':'normal'}}" id="0" bindtap='switchNav'>为您推荐</view>  

  • VUE 实现滚动监听 导航栏置顶的方法

    HTML 非重点的代码,比如样式啥的,我就不放上来了,一笔带过 简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解 <div :style="{ paddingBottom: paddingBottom}"> <header>资源信息</header> <div> <!-- 公司信息 浏览量 --> </div> <div id="fixedBar" :class=&quo

  • 修改layui的后台模板的左侧导航栏可以伸缩的方法

    原生的左侧导航栏代码: <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="

  • iOS定制UISearchBar导航栏同步iOS11的方法

    系统原生的UISearchBar在iOS 11经历了一次变革,高度由原来的44变成了56 (使用默认高度的估计都被坑了),样式也发生了些微的变化,比如在未输入状态下圆角变化,放大镜图标和文本的文字不再居中而是靠左了.具体看图 一些主流App也常见在导航栏嵌入searchBar,以网易云音乐和知乎为例,左边是主页,右边是搜索页面 (注意光标). 实现思路与案例 核心思想是设置导航栏的titleView和左右的barButtonItem.主要有3种方式 首页导航栏的titleView使用button

随机推荐