续加仪
搜索
首页
发现
相册
安排
心情
留言
更多
登录

六 搜索音乐

25 搜索音乐页面布局

  • DetailSearchPageView.qml
//DetailSearchPageView.qml
import QtQuick 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5

ColumnLayout{

    Layout.fillWidth: true
    Layout.fillHeight: true
    spacing: 10

    property int offset: 0

    Rectangle{
        width: parent.width
        height: 70
        color: "#00000000"
        
        Text {
            x:10
            verticalAlignment: Text.AlignBottom//垂直居中
            height: parent.height-10
            text: qsTr("搜索音乐")
            font.family: window.mFONT_FAMILY
            font.pointSize: 25
            color: "#ffffff"
        }
    }

    //搜索框
    RowLayout{
        Layout.fillWidth: true
        TextField{
            id:search_input
            font.pixelSize: 16
            font.family: window.mFONT_FAMILY
            selectByMouse: true //是否可以选择文本
            selectionColor: "#999999"//选中背景颜色
            placeholderText: qsTr("请输入搜索关键词")
            color: "#ffffff"
            background: Rectangle {
                border.width: 2;
                border.color: "#B2B2B2"
                radius: 4;
                color: "#FFFFFF"
                opacity: 0.05
                implicitHeight: 40
                implicitWidth: 400
            }
            focus: true
            Keys.onPressed: if(event.key===Qt.Key_Enter||event.key===Qt.Key_Return)doSearch()

        }
        MusicIconButton{
            iconSource: "qrc:/images/images/search"
            toolTip: "搜索"
            onClicked: doSearch()
        }
    }

    MusicListView{
        id:searchListView
    }
}
qml
  • MusicListView.qml
//MusicListView.qml
import QtQuick 2.12
import QtQuick.Shapes 1.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
import QtQml 2.3

Frame{
    background: Rectangle{
        border.width: 0
        color: "#20f0f0f0"
    }
    Layout.fillWidth: true
    Layout.fillHeight: true
    padding: 0
}
qml

26 音乐列表MusicListView

import QtQuick 2.12
import QtQuick.Shapes 1.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
import QtQml 2.3

Frame{
    property var list : []
    property int all: 60
    property int pageSize: 60
    property int currentPage: 0

    property bool favoritable: false
    property bool deletable: false
    property bool showPageIndicator:true

    signal loadMore(int page)
    signal favoriteItem(int index)
    signal deleteItem(int index)

    onListChanged: {
        pageButton.visible = showPageIndicator&&list.length>0
        //        pageButton.size=all/pageSize
        listViewModel.clear()
        listViewModel.append(list)
    }

    background: Rectangle{
        border.width: 0
        color: "#20f0f0f0"
    }
    Layout.fillWidth: true
    Layout.fillHeight: true
    padding: 0

    ListView{
        id:listView
        anchors.fill: parent
        anchors.bottomMargin: 50
        clip: true
        model: ListModel{
            id:listViewModel
        }
        delegate: listViewdelegate
        ScrollBar.vertical: ScrollBar {
            anchors.right: parent.right
        }
        highlight: Rectangle{
            color:"#20f0f0f0"
        }
        highlightMoveDuration: 0
        highlightResizeDuration: 0
        header: listViewHeader
    }

    Component{
        id:listViewdelegate
        Rectangle{
            id:listViewdelegateItem
            color: "#00000000"
            // 绘制一条边框
            Shape {
                anchors.fill: parent
                ShapePath {
                    strokeWidth: 0
                    strokeColor: "#20ffffff"
                    strokeStyle: ShapePath.SolidLine
                    startX: 0
                    startY: 0
                    PathLine {
                        x: 0
                        y: 0
                    }
                    PathLine {
                        x: parent.width
                        y: 0
                    }
                }
            }

            height:45
            width: listView.width
            MouseArea{
                RowLayout{
                    width: parent.width
                    height:parent.height
                    spacing: 15
                    x:5

                    Text{
                        text: index+1+pageSize*currentPage
                        horizontalAlignment: Qt.AlignHCenter
                        Layout.preferredWidth: parent.width*0.05
                        font.family: window.mFONT_FAMILY
                        font.pointSize: 13
                        color: "#ffffff"
                        elide: Qt.ElideRight
                    }
                    Text{
                        text: name
                        Layout.preferredWidth: parent.width*0.4
                        font.family: window.mFONT_FAMILY
                        font.pointSize: 13
                        color: "#ffffff"
                        elide: Qt.ElideRight
                    }
                    Text{
                        text: artist
                        Layout.preferredWidth: parent.width*0.15
                        font.family: window.mFONT_FAMILY
                        font.pointSize: 13
                        color: "#ffffff"
                        elide: Qt.ElideRight
                    }
                    Text{
                        text: albumName
                        Layout.preferredWidth: parent.width*0.15
                        font.family: window.mFONT_FAMILY
                        font.pointSize: 13
                        elide: Qt.ElideRight
                        color: "#ffffff"
                    }
                    Item {
                        z:10
                        MouseArea {
                            anchors.fill: parent
                            onClicked:{
                                delegateitem.ListView.view.currentIndex = index
                            }
                        }
                        Layout.preferredWidth: parent.width*0.15
                        RowLayout{
                            anchors.centerIn: parent
                            MusicIconButton{
                                iconHeight: 16
                                iconWidth: 16
                                iconSource: "qrc:/images/images/pause"
                                toolTip: "播放"
                                onClicked: {
                                    layoutBottomView.playList=list
                                    layoutBottomView.isPlayingStateCallbackDisabled =true
                                    layoutBottomView.playMusic(index)
                                }
                            }
                            MusicIconButton{
                                id:favoriteButton
                                iconHeight: 16
                                iconWidth: 16
                                iconSource: "qrc:/images/images/favorite"
                                toolTip: "喜欢"
                                isVisible: favoritable
                                onClicked:{
                                    favoriteItem(index)
                                }
                            }
                            MusicIconButton{
                                iconHeight: 16
                                iconWidth: 16
                                iconSource: "qrc:/images/images/clear"
                                toolTip: "删除"
                                isVisible: deletable
                                onClicked: {
                                    deleteItem(index)
                                }
                            }
                        }


                    }
                }

                anchors.fill: parent
                hoverEnabled: true

                cursorShape: Qt.PointingHandCursor


                onEntered: {
                    color="#20f0f0f0"
                }
                onExited: {
                    color="#00000000"
                }
                propagateComposedEvents: true

                onClicked:{
                    listViewdelegateItem.ListView.view.currentIndex = index
                }
            }
        }
    }
    Component{
        id:listViewHeader
        Rectangle{
            color: "#40ffffff"
            height:45
            width: listView.width
            RowLayout{
                width: parent.width
                height:parent.height
                spacing: 15
                x:5
                Text{
                    text: "序号"
                    horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.05
                    font.family: window.mFONT_FAMILY
                    font.pointSize: 13
                    color: "#466cab"
                    elide: Qt.ElideRight
                }
                Text{
                    text: "歌名"
                    Layout.preferredWidth: parent.width*0.4
                    font.family: window.mFONT_FAMILY
                    font.pointSize: 13
                    color: "#466cab"
                    elide: Qt.ElideRight
                }
                Text{
                    text: "歌手"
                    Layout.preferredWidth: parent.width*0.15
                    font.family: window.mFONT_FAMILY
                    font.pointSize: 13
                    color: "#466cab"
                    elide: Qt.ElideRight
                }
                Text{
                    text: "专辑"
                    Layout.preferredWidth: parent.width*0.15
                    font.family: window.mFONT_FAMILY
                    font.pointSize: 13
                    color: "#466cab"
                    elide: Qt.ElideRight
                }
                Text{
                    text: "操作"
                    horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.15
                    font.family: window.mFONT_FAMILY
                    font.pointSize: 13
                    color: "#466cab"
                    elide: Qt.ElideRight
                }
            }
        }
    }


    Item {
        id:pageButton
        visible: false
        width: parent.width
        anchors.top: listView.bottom
        anchors.topMargin: 10
        height: 40

        ButtonGroup {
            buttons: buttons.children
        }

        RowLayout{
            id:buttons
            anchors.centerIn: parent
            Repeater{
                id:repeater
                model: all/pageSize>9?9:all/pageSize
                Button{
                    Text{
                        anchors.centerIn: parent
                        text:modelData+1
                        font.family: window.mFONT_FAMILY
                        font.pointSize: 14
                        color:checked?"#497563":"#ffffff"
                    }

                    background: Rectangle{
                        implicitWidth: 30
                        implicitHeight: 30
                        color: checked ? "#e2f0f8":"#20e9f4ff"
                        radius: 3
                    }

                    checkable: true
                    checked: modelData === currentPage
                    onClicked: {
                        if(currentPage==index) return
                        currentPage = index
                        loadMore(currentPage)
                    }
                }
            }
        }
    }
}
qml
文章作者： 续加仪
文章链接：
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明文章出处。
教程 Qt qml
打赏
  • 微信
  • 支付宝
相关推荐
2024-07-11
安卓实现仿网易云音乐播放界面（Loading...)
2023-06-29
Qt QML Windows项目实战——Cloud Music Player—— 十三 项目完善
2023-06-29
Qt QML Windows项目实战——Cloud Music Player—— 十二 我喜欢的
2023-06-29
Qt QML Windows项目实战——Cloud Music Player—— 十一 播放历史
2023-06-18
Qt QML Windows项目实战——Cloud Music Player—— 十 本地音乐
2023-06-13
Qt QML Windows项目实战——Cloud Music Player——九 音乐详情
评论
来发评论吧~
···

歌手: