QtVirtualKeyboard 虚拟键盘美化

最新推荐文章于 2025-03-13 16:37:09 发布

cc之家

最新推荐文章于 2025-03-13 16:37:09 发布

阅读量9.1k

点赞数 3

分类专栏： QT 开发指南文章标签： qt虚拟键盘 VirtualKeyboard qt中文键盘

本文链接：https://blog.csdn.net/oek8y/article/details/98494275

版权

QT 开发指南专栏收录该内容

4 篇文章

订阅专栏

源码的界面式样太丑，不符合产品设计风格，所有花了半天时间美化了一下，直接上效果：

1.键盘显示位置和大小修改修改这段代码，让键盘显示宽2/3屏幕，并且处于底部居中

void DesktopInputPanel::show()
{
    AppInputPanel::show();
    Q_D(DesktopInputPanel);
    if (d->view) {
        QRect rc=QGuiApplication::primaryScreen()->geometry();

        rc.moveTo(rc.width()*1/6,rc.height()*1/3);
        rc.setWidth(rc.width()*2/3);
        rc.setHeight(rc.height()*2/3);
        repositionView(rc);
        d->view->show();
    }
}

2.style.qml修改按钮的式样，修改文字显示颜色，修改底图

keyPanel: KeyPanel {
        Rectangle {
            id: keyBackground
            color: "#344D61"
            anchors.fill: parent
            anchors.margins: keyBackgroundMargin
            radius: 10
            BorderImage {
                id: keyBorderImage
                border { left: 30; top: 30; right: 30; bottom: 30 }
                horizontalTileMode: BorderImage.Stretch
                verticalTileMode: BorderImage.Stretch
                anchors.fill: parent
                source: resourcePrefix + "images/btn_jp.png"
            }
            Text {
                id: keySmallText
                text: control.smallText
                visible: control.smallTextVisible
                color: "#547A99"
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.margins: keyContentMargin / 3
                font {
                    family: fontFamily
                    weight: Font.Normal
                    pixelSize: 38 * scaleHint
                    capitalization: control.uppercased ? Font.AllUppercase : Font.MixedCase
                }
            }
            Text {
                id: keyText
                text: control.displayText
                color: "#547A99"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                anchors.fill: parent
                anchors.leftMargin: keyContentMargin
                anchors.topMargin: control.smallTextVisible ? keyContentMargin * 1.2 : keyContentMargin
                anchors.rightMargin: keyContentMargin
                anchors.bottomMargin: control.smallTextVisible ? keyContentMargin * 0.8 : keyContentMargin
                font {
                    family: fontFamily
                    weight: Font.Normal
                    pixelSize: 52 * scaleHint
                    capitalization: control.uppercased ? Font.AllUppercase : Font.MixedCase
                }
            }
        }
        states: [
            State {
                name: "pressed"
                when: control.pressed
                //PropertyChanges {
                //    target: keyBackground
                //    opacity: 0.75
                //}
                PropertyChanges {
                    target: keyText
                    opacity: 0.5
                }
                PropertyChanges {
                    target: keyBorderImage
                    source: resourcePrefix + "images/btn_jp_pre.png"
                }

            },
            State {
                name: "disabled"
                when: !control.enabled
                PropertyChanges {
                    target: keyBackground
                    opacity: 0.75
                }
                PropertyChanges {
                    target: keyText
                    opacity: 0.05
                }
            }
        ]
    }

3.修改按钮大小、间隔，没时间做了，大家可以试试