源码的界面式样太丑,不符合产品设计风格,所有花了半天时间美化了一下,直接上效果:
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.修改按钮大小、间隔,没时间做了,大家可以试试