TextField从Control 1.5到Control 2.0的若干问题

adadadda

Control 2.0 把Control 1.*和Control.Style整合到了一起，更加轻量级，更加实用（支持Retia屏幕，定制化更加灵活），更加高效。我现在准备在整个项目中基于2.0来进行开发，目前只差TextField无法满足要求，因为Control2中不支持hover effect。见下图的control 1.*和control 2的对比。


而我又想使用hover effect，这个问题不知如何解决。首先贴出两段代码：

第一段是基于Control 1.*的

1. import QtQuick 2.7
   
2. import QtQuick.Controls 1.5
   
3. import QtQuick.Controls.Styles 1.4
   
4. 
   
5. Item{
   
6.     id:item
   
7.     property bool includeZero: false
   
8.     property alias title: titl.text
   
9.     property alias text: dat.text
   
10.     property alias valueFocus: dat.focus
    
11.     property double value: Number(text)
    
12.     function selectAll(){dat.selectAll()}
    
13. 
    
14.     width:80+titl.contentWidth
    
15.     height:Math.max(25,titl.contentHeight)
    
16. 
    
17.     Text {
    
18.         id: titl
    
19.         x:0
    
20.         anchors.verticalCenter: item.verticalCenter
    
21.     }
    
22. 
    
23.     TextField{
    
24.         id:dat
    
25.         readonly property color color_normal:  Qt.rgba(0.9412,0.9412,0.9412,1.0)
    
26.         readonly property color color_hover: Qt.rgba(0.898,0.9451,0.9843,1.0)
    
27.         readonly property color color_border: Qt.rgba(0,0.4706,0.8431,1.0)
    
28.         property color bordercolor: color_border
    
29. 
    
30.         anchors.left: titl.right
    
31.         anchors.verticalCenter: item.verticalCenter
    
32.         anchors.leftMargin: 5
    
33.         validator: DoubleValidator{bottom:0}
    
34.         selectByMouse:true
    
35. 
    
36.         style: TextFieldStyle{
    
37.             textColor: "black"
    
38.             background: Rectangle{
    
39.                 radius: 4
    
40.                 implicitWidth: 80
    
41.                 implicitHeight: 25
    
42.                 border.color:  control.bordercolor
    
43.                 border.width: control.focus ? 2:1
    
44.                 color: control.hovered ? dat.color_hover: dat.color_normal
    
45.             }
    
46.         }
    
47. 
    
48.         onFocusChanged:{
    
49.             var flag
    
50.             if(focus)
    
51.             {
    
52.                 selectAll()
    
53.                 bordercolor=color_border
    
54.             }
    
55.             else{
    
56.                 if(item.includeZero)
    
57.                     flag=(text!="")
    
58.                 else
    
59.                     flag=(text>0)
    
60.                 if(flag)
    
61.                     bordercolor=color_border
    
62.                 else
    
63.                     bordercolor="red"
    
64.             }
    
65.         }
    
66.     }

复制代码

第二段是基于Control 2.0

1. import QtQuick 2.7
   
2. import QtQuick.Controls 2.0
   
3. 
   
4. Item{
   
5.     id:item
   
6.     property bool includeZero: false
   
7.     property alias title: titl.text
   
8.     property alias text: dat.text
   
9.     property alias valueFocus: dat.focus
   
10.     property double value: Number(text)
    
11.     function selectAll(){dat.selectAll()}
    
12. 
    
13. 
    
14.     width:80+titl.contentWidth
    
15.     height:Math.max(25,titl.contentHeight)
    
16. 
    
17.     Text {
    
18.         id: titl
    
19.         x:0
    
20.         anchors.verticalCenter: item.verticalCenter
    
21.     }
    
22. 
    
23.     TextField{
    
24.         id:dat
    
25.         readonly property color color_normal:  Qt.rgba(0.9412,0.9412,0.9412,1.0)
    
26.         readonly property color color_hover: Qt.rgba(0.898,0.9451,0.9843,1.0)
    
27.         readonly property color color_border: Qt.rgba(0,0.4706,0.8431,1.0)
    
28. 
    
29.         anchors.left: titl.right
    
30.         anchors.verticalCenter: item.verticalCenter
    
31.         anchors.leftMargin: 5
    
32.         validator: DoubleValidator{bottom:0}
    
33.         selectByMouse: true
    
34.         selectionColor: color_border
    
35.         color:"black"
    
36. 
    
37.         background: Rectangle{
    
38.             id:bg
    
39.             radius: 4
    
40.             implicitWidth: 80
    
41.             implicitHeight: 25
    
42.             border.color:  dat.color_border
    
43.             border.width: dat.focus ? 2:1
    
44.             color: dat.hovered ? dat.color_hover: dat.color_normal
    
45.         }
    
46. 
    
47.         onFocusChanged:{
    
48.             var flag
    
49.             if(focus)
    
50.             {
    
51.                 selectAll()
    
52.                 bg.border.color=color_border
    
53.             }
    
54.             else{
    
55.                 if(item.includeZero)
    
56.                     flag=(text!="")
    
57.                 else
    
58.                     flag=(text>0)
    
59.                 if(flag)
    
60.                     bg.border.color=color_border
    
61.                 else
    
62.                     bg.border.color="red"
    
63.             }
    
64.         }
    
65. 
    
66. //        MouseArea{
    
67. //            anchors.fill: parent
    
68. //            hoverEnabled: true
    
69. //            onClicked: parent.focus=true
    
70. //            onEntered: bg.color=parent.color_hover
    
71. //            onExited: bg.color=parent.color_normal
    
72. //        }
    
73.     }
    
74. }
    

复制代码

总结几个问题：
1、control 2.0对比1.*，hovered属性不能用了，这就意味着人机交互反馈感减弱了。
2、control 2.0对比1.*，当鼠标移动到控件上时，鼠标指针不变形了。
3、control 2.0对比1.*，背景控件（第二段代码中的id为bg的控件）的属性可以在外围访问了，这是比较好的一面

我的挣扎：
我尝试着在基于control 2.0的TextField上加入MouseArea，但是无法用鼠标选择里面的数据了。限于水平我目前无法使用2.0的控件来达到1.*的使用效果，各位大神能不能帮帮我。我还是想使用2.0，满足对retia屏幕的支持。

Joey_Chan

我看了一下文档，貌似的确取消了hover，然后想起了control 2主要是为了移动平台设计的，所以弱化了桌面平台的一些特性。

你可以试试在background里面加个mousearea，设置其preventStealing和propagateComposedEvents属性看看能不能截获鼠标事件又不影响textfield本身

adadadda

Joey_Chan 发表于 2016-11-22 22:40
我看了一下文档，貌似的确取消了hover，然后想起了control 2主要是为了移动平台设计的，所以弱化了桌面平台 ...

谢谢，我在试试。万分感谢。。。。。。。。。。。。。。