QML Tumbler开发实践--字体选择循环列表

梦里梦外; 2024-04-19 14:44 60阅读 0赞

先上效果图：  
![在这里插入图片描述][20190919095607771.gif]

完整项目路径：

https://github.com/lesliefish/QMLInAction/tree/master/demos%26projects/Components/FontSelector

--------------------

单独组件代码：

import QtQuick 2.0
    import QtQuick.Controls 2.2
    
    Item {
        id : fontSelector;
        height: 300;
        width: 120;
        property string curSelectedFont: "";//当前选中的字体
    
        // 自定义字体选择更改事件的信号
        signal fontSelectChanged(string newFont);
        //设置某字体，然后根据调整列表中当前选中项为当前字体
        function setFont(newFont){
            tumbler.changeIndexByFont(newFont);
        }
    
        Tumbler {
            id:tumbler
            height: fontSelector.height;
            width: fontSelector.width;
            model: fontListModel
    
            // 列表背景
            background: Item {
                Rectangle {
                    opacity: tumbler.enabled ? 0.9 : 1
                    border.color: "#000000"
                    width: tumbler.width
                    height: tumbler.height
                    anchors.top: parent.top
                    color: "black";
                    radius: 5;
                }
            }
    
            //具体Item的代理
            delegate: Rectangle{
                opacity: 1.0 - Math.abs(Tumbler.displacement) / (tumbler.visibleItemCount / 2) // 这行代码控制列表上下的item透明度逐渐降低，渐隐效果
                color : tumbler.currentIndex === index ? "darkred" : "transparent";// 根据是否当前选中item调整背景色
                Text {
                    anchors.fill: parent
                    text: displayData;      // item显示的文字使用fontListModel的displayData
                    horizontalAlignment: Text.AlignHCenter;
                    verticalAlignment: Text.AlignVCenter;
                    font.family: realData;  // item显示的字体使用fontListModel的realData
                    font.bold: tumbler.currentIndex === index; // 根据是否当前选中item调整字体是否加粗
                    font.pointSize: tumbler.currentIndex === index ? 20 : 14;// 根据是否当前选中item调整字体大小
                    color: tumbler.currentIndex === index ? "lightblue" : "white";// 根据是否当前选中item调整字体颜色
                }
            }
    
    
            // 当前选中项更改事件
            onCurrentIndexChanged: {
                fontSelector.curSelectedFont = tumbler.model.get(tumbler.currentIndex).realData;
                fontSelector.fontSelectChanged(fontSelector.curSelectedFont);//向外发信号
                //console.log(fontSelector.curSelectedFont);
                //console.log(tumbler.model.get(tumbler.currentIndex).realData)
                //console.log(tumbler.model.get(tumbler.currentIndex).displayData)
                //console.log(tumbler.model.get(tumbler.currentIndex).index)
            }
    
            // 根据字体名称设置当前选中的item,遍历Model,数据对比
            function changeIndexByFont(fontName){
                for(var i = 0; i < tumbler.model.count; ++i){
                    if(tumbler.model.get(i).realData === fontName){
                        tumbler.currentIndex = i;
                        break;
                    }
                }
            }
        }
    
        ListModel{
            id:fontListModel;
            ListElement{
                index:0
                realData:"SimHei"
                displayData:qsTr("黑体")
            }
            ListElement{
                index:1
                realData:"STFangsong"
                displayData:qsTr("华文仿宋")
            }
            ListElement{
                index:2
                realData:"STXihei"
                displayData:qsTr("华文细黑")
            }
            ListElement{
                index:3
                realData:"STXingkai"
                displayData:qsTr("华文行楷")
            }
            ListElement{
                index:4
                realData:"STXinwei"
                displayData:qsTr("华文新魏")
            }
            ListElement{
                index:5
                realData:"STLiti"
                displayData:qsTr("华文隶书")
            }
            ListElement{
                index:6
                realData:"STKaiti"
                displayData:qsTr("华文楷体")
            }
            ListElement{
                index:7
                realData:"STHupo"
                displayData:qsTr("华文琥珀")
            }
            ListElement{
                index:8
                realData:"STCaiyun"
                displayData:qsTr("华文彩云")
            }
            ListElement{
                index:9
                realData:"microsoft yahei"
                displayData:qsTr("微软雅黑")
            }
        }
    
    }

使用组件：

import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.2
    
    Window {
        id:mainWindow
        visible: true
        width: 640
        height: 480
        title: qsTr("Components")
    
        Rectangle {
            anchors.fill: parent;
            Button {
                id:button
                anchors.centerIn: parent
                width: 200;
                height: 36;
                text:qsTr("Choose Font");
    
                onClicked: {
                    fontSelector.visible = !fontSelector.visible;
                }
            }
    
            // 字体选择器
            FontSelector { // 定义
                visible: false
                id:fontSelector
                x:button.x + button.width;
                y:button.y - fontSelector.height;
            }
    
            Connections{   // 字体选择器信号捕捉
                target: fontSelector;
                onFontSelectChanged:{
                    console.log(newFont)
                }
            }
        }
    }

[20190919095607771.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0866b450d75b44a0a5a539bd952b76d8.gif