QML 实现App通用tabBar

QML tabBar 默认是Material 风格,默认只能顶部Tab 使用,象常用软件底部tabBar 风格.需要自己扩展

参考 https://blog.csdn.net/zhengtianzuo06/article/details/78287088

最终实现效果如下:

image.png

包括常数字小红点通知也实现.可以W4BTabBar.qml 直接拷入项目即可使用

/*!
 *@file W4BTabBar.qml
 *@brief 自定义TabBar
*/
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0


TabBar
    {
    property alias myModel: myModel
    property int lastIndex: 0
    property string highColor: "#148014"
    property string normalColor: "#000000"

    background: Rectangle{
        Rectangle{ //顶部分割线实现
          id: separtline

          width: parent.width
          height: 1;
          color: "#e3e3e3"
      }
        color: "white"
    }


    id: bar
    currentIndex: 0
    height: 50
    spacing: 0
    bottomInset: 2

    ListModel {
        id: myModel
    }

    Repeater {
        id: repeater
        model: myModel

        TabButton {
            property alias imageSource: tabImage.source
            property alias textColor: text.color

                background: Rectangle{
                    color: "#FFFFFF"

                    Rectangle{//小红点实现
                            id:iconnew
                            width: 16
                            height: 16
                            color: "red"
                            radius:(newMsg>10?6:height/2)
                            visible:(newMsg>0)
                     anchors.horizontalCenter: parent.horizontalCenter
                      anchors.horizontalCenterOffset:  width+2
                            anchors.top: parent.top
                            Item{
                                anchors.fill: parent
                                Text {
                                    id: tasknumber2
                                    anchors.centerIn: parent
                                    font.pointSize:10
                                    color:"#ffffff"
                                    text: newMsg>99?"...":newMsg.toString()
                                }
                            }
                        }
                }

            height: bar.height
            contentItem:Column{

               // property  alias textColor: text.textColor
                Image{
                    id: tabImage
                    width: 24
                    height: 24
                    anchors.horizontalCenter: parent.horizontalCenter
                    source: (model.index === bar.currentIndex) ? modelSrcG : modelSrc
                }
                Text {
                id: text
                text: modelText

               // horizontalAlignment: Text.AlignHCenter
               // verticalAlignment: Text.AlignBottom
                anchors.horizontalCenter: parent.horizontalCenter
                color: (model.index === bar.currentIndex) ? highColor : normalColor

              }

            }
            onHoveredChanged: {
                if (model.index !== bar.currentIndex){
                    hovered ? text.color = highColor : text.color = normalColor
                    hovered ? tabImage.source = modelSrcG : tabImage.source = modelSrc
                }
            }

        }
    }

   onCurrentIndexChanged: {
       console.debug("currentIndex",currentIndex)

       repeater.itemAt(bar.lastIndex).imageSource = myModel.get(bar.lastIndex).modelSrc;
       repeater.itemAt(bar.lastIndex).textColor = normalColor;

      bar.lastIndex = currentIndex
       repeater.itemAt(bar.lastIndex).imageSource = myModel.get(bar.lastIndex).modelSrcG;
       repeater.itemAt(bar.lastIndex).textColor = highColor;

   }
}

但是还有一些细节,还可以改进,
比如

• 小红点在图标下面.较长数字显示起来很怪,
• 未选中图片是需要单独一个图片,实际上可以用算法对选中图片直接进行灰化处理即可
• 测试发现,tabBar图片的作背景显示是可以超过tabBar本身的,因此在Android/iOS 很难实现异形TabBar很容易实现.只要tabBar 图片本身高度超过

完整源码参见
https://github.com/work4blue/qml-tabbar
好用请start 一下