ReuseTextField.qml 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import QtQuick
  2. import QtQuick.Controls
  3. import QtQuick.Layouts
  4. RowLayout {
  5. id: reusetextfield
  6. anchors.fill: parent
  7. spacing: 10
  8. property string strTitle: ""
  9. property string strValue: ""
  10. Rectangle {
  11. width: parent.width * 0.225
  12. height: parent.height
  13. color: "#00ffffff"
  14. Text {
  15. id: reusetextfield_text_title
  16. anchors.fill: parent
  17. font.pixelSize: 25
  18. color: "#ffffff"
  19. horizontalAlignment: Text.AlignRight
  20. verticalAlignment: Text.AlignVCenter
  21. }
  22. }
  23. Rectangle {
  24. id: textFieldContainer
  25. x: parent.width * 0.225
  26. width: parent.width * 0.675
  27. height: parent.height * 0.725
  28. color: "#ffffff"
  29. radius: 5
  30. TextField {
  31. id: reusetextfield_text_value
  32. anchors.fill: parent
  33. anchors.margins: 2
  34. color: "#a3000000" // 70%透明度的黑色
  35. placeholderTextColor: "#60ffffff" // 40%透明度的白色
  36. // 字体设置
  37. font {
  38. pixelSize: 20
  39. styleName: "Regular"
  40. }
  41. // 背景设置
  42. background: Rectangle {
  43. color: "transparent"
  44. radius: parent.parent.radius - 1 // 使内圆角略小于外框
  45. }
  46. // 对齐和边距
  47. horizontalAlignment: Text.AlignLeft
  48. verticalAlignment: Text.AlignVCenter
  49. padding: 5 // 统一设置四个方向的padding
  50. // 其他属性
  51. selectionColor: "#a300aaff" // 选中文本的背景色
  52. wrapMode: Text.NoWrap
  53. renderType: Text.QtRendering
  54. onTextChanged:
  55. {
  56. strValue = text;
  57. }
  58. }
  59. }
  60. Connections {
  61. target: reusetextfield
  62. onStrTitleChanged: {
  63. reusetextfield_text_title.text = strTitle;
  64. }
  65. onStrValueChanged: {
  66. reusetextfield_text_value.text = strValue;
  67. }
  68. }
  69. Component.onCompleted: {
  70. reusetextfield_text_title.text = strTitle;
  71. reusetextfield_text_value.text = strValue;
  72. }
  73. }