Flat風格的Qml輸入框

• 2019 年 12 月 16 日
• 筆記

基於Qml的TextField控件修改而成。

0x00 輸入框代碼

import QtQuick 2.0  import QtQuick.Controls 2.0  import QtGraphicalEffects 1.0    TextField {      id: root        property color checkedColor: "#D5DBDB"        signal doubleClicked(var/*MouseEvent*/ event)        placeholderText: qsTr("請輸入內容")      font.family: "Arial"      font.pixelSize: 15      font.weight: Font.Thin      antialiasing: true        background: Rectangle {          implicitWidth: 213          implicitHeight: 42          radius: 8          color: root.enabled ? "transparent" : "#F4F6F6"          border.color: root.enabled ? root.checkedColor : "#D5DBDB"          border.width: 2          opacity: root.enabled ? 1 : 0.7            layer.enabled: root.hovered          layer.effect: DropShadow {              id: dropShadow              transparentBorder: true              color: root.checkedColor              samples: 10 /*20*/          }      }        cursorDelegate: Rectangle {          width: 1          height: parent.height * 0.4          color: root.checkedColor          visible: root.focus            Timer {              interval: 600              repeat: true              running: root.focus              onRunningChanged: parent.visible = running              onTriggered: parent.visible = !parent.visible          }      }        onDoubleClicked: selectAll()        /* note: This signal was introduced in QtQuick.Controls 2.1 (Qt 5.8). */      onPressed: {          _private.mouseEvent = event          _private.isCheckDoubleClickedEvent++            if (! _checkDoubleClickedEventTimer.running)              _checkDoubleClickedEventTimer.restart()      }        /* Private */      Item {          id: _private          property int isCheckDoubleClickedEvent: 0          property var/*MouseEvent*/ mouseEvent            Timer {              id: _checkDoubleClickedEventTimer              running: false              repeat: false              interval: 180              onTriggered: {                  if (_private.isCheckDoubleClickedEvent >= 2) {                      /* Double Clicked Event */                      root.doubleClicked(_private.mouseEvent)                  }                    stop()                  _private.isCheckDoubleClickedEvent = 0              }          }      }  }  

0x01 輸入框樣式代碼

GridLayout {      width: root.width      rows: 3      columns: 3        Repeater {          id: textFieldRepeater          model: ["#727CF5", "#0ACF97", "#F9375E",                  "#FFBC00", "#2B99B9", "#5A6268",                  "#EEF2F7", "#212730"]            TextField {              checkedColor: modelData          }      }        TextField {          enabled: false          placeholderText: "禁用狀態"      }  }