当前位置: 首页 > news >正文

实现一个点击输入框可以弹出的数字软键盘控件 qt 5.12

我们将创建两个自定义组件: 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()
}

http://www.dtcms.com/a/273059.html

相关文章:

  • Java 单例类详解:从基础到高级,掌握线程安全与高效设计
  • wpf使用webview2显示网页内容(最低兼容.net framework4.5.2)
  • C Primer Plus 第6版 编程练习——第8章
  • python语言编程文件删除后的恢复方法
  • ARM环境上 openEuler扩展根盘并扩展到根分区中
  • 小架构step系列10:日志热更新
  • HTTP核心基础详解(附实战要点)
  • Jaspersoft Studio-6.4.0 TextField内容展示不全
  • [实战]调频(FM)和调幅(AM)信号生成(完整C语言实现)
  • 【养老机器人】核心技术
  • 6. Z 字形变换
  • 决策树与随机森林Python实践
  • 如何测家里是否漏电,4种方法
  • 实时连接,精准监控:风丘科技数据远程显示方案提升试验车队管理效率
  • 倍增法和ST算法 个人学习笔记代码
  • esp32在vscode中仿真调试
  • QT6 源(159)模型视图架构里的文件系统模型 QFileSystemModel 篇二:本类的源代码带注释
  • Building Bridges(搭建桥梁)
  • 【技术追踪】SynPo:基于高质量负提示提升无训练少样本医学图像分割性能(MICCAI-2025)
  • UE5源码模块解析与架构学习
  • 学习软件测试的第十四天(移动端)
  • pyqt-3(QSS、读取带qrc的ui、信号与槽函数)
  • CMake指令:add_custom_command和add_custom_target详解
  • Vue响应式原理五:响应式-自动收集依赖
  • OKHttp 核心知识点详解
  • 页面html,当鼠标点击图标,移开图标,颜色方块消失
  • 【牛客刷题】跳台阶(三种解法深度分析)
  • doker以及网站案例
  • 快速上手ASP .NET Core 8与MongoDB整合
  • 200W 以内的伺服电机 典型应用场景