我们将创建两个自定义组件： 1. `NumericInputField`：一个输入框，当点击时弹出数字键盘。 2. `NumericKeyboard`：一个可缩放的数字键盘。 设计思路： - `NumericInputField` 是一个常规的输入框，但点击后会弹出 `NumericKeyboard`。 - `NumericKeyboard` 是一个弹出式键盘，它的大小可以等比例缩放（通过设置宽度，高度按比例计算）。 - 键盘内部包含数字0-9、小数点、退格、取消和确定按钮。 - 键盘的尺寸和字体大小都可以通过属性设置。 步骤： 1. 创建 `NumericKeyboard` 组件。 2. 创建 `NumericInputField` 组件，它包含一个 `TextInput` 和一个弹出键盘的机制。 3. 在 `NumericInputField` 中，当点击输入框时，显示 `NumericKeyboard`，并将键盘与输入框的位置关联（例如在输入框下方弹出）。 注意：为了支持等比例缩放，键盘的宽度可以设置，高度则根据宽度按比例计算（例如高度是宽度的0.6倍）。键盘内部的按钮大小和字体大小也根据键盘的当前尺寸进行缩放。 由于要求每个自定义组件的代码，我们将分别实现： 组件一：NumericKeyboard.qml 组件二：NumericInputField.qml 然后提供一个使用示例。
可缩放弹出式数字软键盘组件
下面我将实现一个完整的可缩放弹出式数字软键盘组件，包含两个自定义组件：NumericInputField（输入框）和 NumericKeyboard（键盘）。这两个组件都支持等比例缩放。
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12import QtQml 2.12import QtQuick.Layouts 1.12
import "./image"import QtQuick.Layouts 1.3Window {width: 1200height: 800visible: truetitle: "可缩放弹出式数字键盘"color: "#f8fafc"ColumnLayout {anchors.fill: parentanchors.margins: 30spacing: 20// 标题Text {text: "可缩放弹出式数字键盘"font.pixelSize: 28font.bold: truecolor: "#1e293b"Layout.alignment: Qt.AlignCenter}// 示例1：基本使用NumericInputField {id: basicInputLayout.preferredWidth: 300Layout.preferredHeight: 60placeholder: "点击输入金额"Layout.alignment: Qt.AlignCenter}// 示例2：整数输入NumericInputField {id: integerInputLayout.preferredWidth: 250Layout.preferredHeight: 50placeholder: "点击输入数量"allowDecimal: false // 禁用小数点Layout.alignment: Qt.AlignCenter}// 示例3：自定义键盘大小NumericInputField {id: customSizeInputLayout.preferredWidth: 350Layout.preferredHeight: 70placeholder: "点击输入百分比"keyboardScale: 0.7 // 键盘缩放比例Layout.alignment: Qt.AlignCenter}// 控制面板RowLayout {Layout.alignment: Qt.AlignCenterspacing: 20// 键盘缩放控制Slider {id: scaleSliderfrom: 0.5to: 1.2value: 0.8Layout.preferredWidth: 200onValueChanged: {basicInput.keyboardScale = valueintegerInput.keyboardScale = valuecustomSizeInput.keyboardScale = value}}// 缩放值显示Text {text: "键盘缩放: " + scaleSlider.value.toFixed(2)font.pixelSize: 16color: "#64748b"}// 小数点开关Switch {id: decimalSwitchchecked: truetext: "允许小数点"}}// 结果展示GridLayout {columns: 3columnSpacing: 30rowSpacing: 10Layout.alignment: Qt.AlignCenterText { text: "金额:"; font.bold: true; color: "#475569" }Text { text: basicInput.text || "0.00"; color: "#334155" }Text { text: "缩放: " + basicInput.keyboardScale.toFixed(2); color: "#64748b" }Text { text: "数量:"; font.bold: true; color: "#475569" }Text { text: integerInput.text || "0"; color: "#334155" }Text { text: "缩放: " + integerInput.keyboardScale.toFixed(2); color: "#64748b" }Text { text: "百分比:"; font.bold: true; color: "#475569" }Text { text: customSizeInput.text || "0.00"; color: "#334155" }Text { text: "缩放: " + customSizeInput.keyboardScale.toFixed(2); color: "#64748b" }}}// 应用键盘设置Component.onCompleted: {integerInput.allowDecimal = decimalSwitch.checked}// 小数点开关变化Connections {target: decimalSwitchfunction onCheckedChanged() {integerInput.allowDecimal = decimalSwitch.checked}}
}
//NumericInputField
import QtQuick 2.12
import QtQuick.Controls 2.12import QtQml 2.12
import "../image"Rectangle {id: rootwidth: 300height: 60radius: 10color: "white"border.color: root.activeFocus ? "#4f46e5" : "#d1d5db"border.width: 2// ===== 公共属性 =====property alias text: inputField.text // 输入文本property string placeholder: "点击输入" // 占位符文本property real keyboardScale: 0.4 // 键盘缩放比例property bool allowDecimal: true // 是否允许小数点// ===== 键盘实例 =====property NumericKeyboard keyboard: NumericKeyboard {id: numericKeyboardparent: Overlay.overlay // 确保键盘显示在最上层allowDecimal: root.allowDecimalvisible: false}// ===== 输入区域 =====TextInput {id: inputFieldanchors.fill: parentanchors.margins: 15verticalAlignment: Text.AlignVCenterfont.pixelSize: 24clip: truereadOnly: true // 只能通过键盘输入// 占位符文本Text {text: root.placeholderfont: inputField.fontcolor: "#9ca3af"visible: inputField.text.length === 0 && !root.activeFocusanchors.verticalCenter: parent.verticalCenter}}// ===== 键盘图标 =====Rectangle {width: 40height: 40radius: 20color: "#eef2ff"anchors.verticalCenter: parent.verticalCenteranchors.right: parent.rightanchors.rightMargin: 10Text {text: "⌨"font.pixelSize: 24anchors.centerIn: parent}}// ===== 点击弹出键盘 =====MouseArea {anchors.fill: parentonClicked: {// 设置键盘位置和大小numericKeyboard.width = root.width * 3 // 键盘比输入框宽
// numericKeyboard.keyboardScale = keyboardScalenumericKeyboard.text = inputField.text// 打开键盘numericKeyboard.open()// 连接信号numericKeyboard.accepted.connect(handleAccepted)}}// ===== 键盘接受事件处理 =====function handleAccepted() {inputField.text = numericKeyboard.text}// ===== 键盘关闭时断开连接 =====Connections {target: numericKeyboardfunction onClosed() {numericKeyboard.accepted.disconnect(handleAccepted)}}// ===== 输入框获得焦点样式 =====onActiveFocusChanged: {border.color = activeFocus ? "#4f46e5" : "#d1d5db"}
}
//NumericKeyboard
import QtQuick 2.12
import QtQuick.Controls 2.12import QtGraphicalEffects 1.12
Popup {id: rootwidth: Math.min(parent.width * 0.9, 600) // 宽度自适应，最大600pxheight: width * 0.6 // 高度按比例计算anchors.centerIn: parentmodal: truedim: trueclosePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside// ===== 公共属性 =====property alias text: inputField.text // 绑定输入文本property bool allowDecimal: true // 是否允许小数点property real scaleFactor: width / 600 // 缩放因子（基于600px基准）property int baseFontSize: 24 // 基准字体大小property color buttonColor: "#f0f0f0" // 按钮默认颜色// ===== 信号 =====signal accepted() // 点击确定时触发signal canceled() // 点击取消时触发// ===== 键盘背景 =====background: Rectangle {anchors.fill: parentcolor: "blue"radius: 10 * scaleFactorborder.color: "#d1d5db"border.width: 1 * scaleFactor// 键盘阴影效果layer.enabled: truelayer.effect: DropShadow {color: "#40000000"radius: 10 * scaleFactorsamples: 21verticalOffset: 3 * scaleFactor}}// ===== 输入框区域 =====Rectangle {id: inputContainerwidth: parent.width - 40 * scaleFactorheight: 60 * scaleFactoranchors.horizontalCenter: parent.horizontalCenteranchors.top: parent.topanchors.topMargin: 20 * scaleFactorcolor: "white"radius: 8 * scaleFactorborder.color: inputField.activeFocus ? "#4f46e5" : "#d1d5db"border.width: 2 * scaleFactor// 输入框TextInput {id: inputFieldanchors.fill: parentanchors.margins: 15 * scaleFactorfont.pixelSize: baseFontSize * scaleFactor + 4verticalAlignment: Text.AlignVCenterclip: truereadOnly: true // 禁止直接编辑// 文本改变动画Behavior on text {SequentialAnimation {PropertyAnimation {target: inputContainerproperty: "border.color"to: "#4f46e5"duration: 100}PropertyAnimation {target: inputContainerproperty: "border.color"to: "#d1d5db"duration: 300}}}}// 清除按钮Rectangle {width: 30 * scaleFactorheight: 30 * scaleFactorradius: 15 * scaleFactoranchors.verticalCenter: parent.verticalCenteranchors.right: parent.rightanchors.rightMargin: 10 * scaleFactorcolor: clearMouseArea.containsPress ? "#fee2e2" : "#fef2f2"visible: inputField.text.length > 0Text {text: "×"font.pixelSize: baseFontSize * scaleFactorcolor: "#ef4444"anchors.centerIn: parent}MouseArea {id: clearMouseAreaanchors.fill: parentonClicked: inputField.text = ""}}}// ===== 键盘网格布局 =====Grid {id: gridanchors.top: inputContainer.bottomanchors.topMargin: 20 * scaleFactoranchors.horizontalCenter: parent.horizontalCenterspacing: 10 * scaleFactorcolumns: 5// 数字键1-9Repeater {model: 9KeyButton {text: index + 1width: keyWidthheight: keyHeightonClicked: inputField.insert(inputField.cursorPosition, text)}}// 小数点键（根据allowDecimal显示/隐藏）KeyButton {text: "."width: keyWidthheight: keyHeightvisible: root.allowDecimalonClicked: {if (!inputField.text.includes(".")) {inputField.insert(inputField.cursorPosition, text)}}}// 数字0KeyButton {text: "0"width: keyWidthheight: keyHeightonClicked: inputField.insert(inputField.cursorPosition, text)}// 退格键KeyButton {text: "⌫"width: keyWidthheight: keyHeightbgColor: "#fecaca"textColor: "#b91c1c"onClicked: inputField.text = inputField.text.slice(0, -1)}// 取消键KeyButton {text: "取消"width: keyWidthheight: keyHeightbgColor: "#e5e7eb"onClicked: {root.canceled()root.close()}}// 确定键KeyButton {text: "确定"width: keyWidthheight: keyHeightbgColor: "#4f46e5"textColor: "white"onClicked: {root.accepted()root.close()}}}// ===== 计算按键尺寸 =====property real keyWidth: (root.width - 40 * scaleFactor - 2 * grid.spacing) / 6property real keyHeight: keyWidth * 0.8// ===== 弹出动画 =====enter: Transition {ParallelAnimation {NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 300 }NumberAnimation { property: "scale"; from: 0.8; to: 1; duration: 300; easing.type: Easing.OutBack }}}// ===== 关闭动画 =====exit: Transition {ParallelAnimation {NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 300 }NumberAnimation { property: "scale"; from: 1; to: 0.8; duration: 300 }}}
}
KeyButton
//KeyButton
import QtQuick 2.12// ===== 自定义按钮组件 =====
Rectangle {id: btnradius: 8 * root.scaleFactorcolor: mouseArea.pressed ? Qt.darker(bgColor, 1.2) : bgColorborder.color: mouseArea.pressed ? Qt.darker(borderColor, 1.2) : borderColorborder.width: 1 * root.scaleFactor// ===== 可自定义属性 =====property alias text: label.textproperty color bgColor: root.buttonColorproperty color textColor: "black"property color borderColor: "#d1d5db"// 按钮文本Text {id: labelanchors.centerIn: parentfont.pixelSize: root.baseFontSize * root.scaleFactorcolor: btn.textColor}// 鼠标区域MouseArea {id: mouseAreaanchors.fill: parentonClicked: btn.clicked()}// 点击效果动画scale: mouseArea.pressed ? 0.95 : 1.0Behavior on scale {NumberAnimation { duration: 100 }}// 点击信号signal clicked()
}
