import QtQuick 2.11
import QtQuick.Controls 2.4
Rectangle
{
id: base
width:640
height:480
color: backgroundColor
property string backgroundColor: "#191919"
anchors.margins: 6
Rectangle {
id: seekTimeBubble
width: currentSeekTime.width + 14
height: currentSeekTime.height + 21
anchors.centerIn: parent
color: parent.color
Canvas {
id: canvasSeekTime
anchors.fill: parent
property real radius: 9
onPaint: {
var ctx = getContext('2d')
ctx.reset()
ctx.strokeStyle = base.color
ctx.lineWidth = 1
ctx.clearRect(0, 0, width, height)
ctx.beginPath()
ctx.moveTo(0, radius)
ctx.arcTo(0, 0, radius, 0,radius)
ctx.lineTo(parent.width - radius, 0)
ctx.arcTo(parent.width, 0, parent.width, radius, radius)
ctx.lineTo(parent.width, parent.height - radius * 2)
ctx.arcTo(parent.width, parent.height - radius,parent.width - radius,parent.height - radius, radius)
ctx.lineTo(parent.width / 2 + 1.5*radius,parent.height - radius)
ctx.lineTo(parent.width / 2, parent.height)
ctx.lineTo(parent.width / 2 - 1.5*radius,parent.height - radius)
ctx.lineTo(radius, parent.height - radius)
ctx.arcTo(0, parent.height - radius, 0, parent.height - radius * 2, radius)
ctx.closePath()
ctx.clip()
ctx.stroke()
ctx.fillStyle = "#333333"
ctx.fillRect(0, 0, width, height)
}
Text {
id: currentSeekTime
anchors {
top: parent.top
topMargin: 3
horizontalCenter: parent.horizontalCenter
}
color: "#ffffff"
font.pointSize: 12
text: "03:21"
onWidthChanged: {
canvasSeekTime.requestPaint()
}
}
}
Glow {
anchors.fill: canvasSeekTime
samples: 17
color: "transparent"
source: canvasSeekTime
}
}
}
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
Rectangle {
id: container
width: 640
height: 360
StackLayout {
id: layout
width: parent.width - 120
height: 300
anchors.top: parent.top
anchors.topMargin: 6
anchors.horizontalCenter: parent.horizontalCenter
currentIndex: count - 1
Rectangle {
color: 'teal'
implicitWidth: 200
implicitHeight: 200
}
Rectangle {
color: 'plum'
implicitWidth: 300
implicitHeight: 200
}
Rectangle {
color: 'red'
implicitWidth: 300
implicitHeight: 200
}
Rectangle {
color: 'blue'
implicitWidth: 300
implicitHeight: 200
}
Rectangle {
color: 'green'
implicitWidth: 300
implicitHeight: 200
}
}
Button {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: layout.bottom
anchors.topMargin: 6
text: "Prev"
onClicked:{
if(layout.currentIndex == 0)
layout.currentIndex = layout.count-1
else {
layout.currentIndex --
}
}
}
}
import QtQuick 2.2
import QtQuick.Controls 1.2
Rectangle {
id: doubleSlider
width: 360
height: 72
color: "#c3c3c3"
property int minValue: 0
property int maxValue: 100
property int lowValue: 0
property int highValue: 100
property int thumbWidth: 12
readonly property int range: width - thumbWidth
property var thumbColor: "#c030bb"
property int lastX: 0
signal value(int low,int high)
Rectangle {
id: startSlider
width: doubleSlider.thumbWidth
height: parent.height
x: 0
anchors.verticalCenter: parent.verticalCenter
color: doubleSlider.thumbColor
}
Rectangle {
id: endSlider
width: doubleSlider.thumbWidth
height: parent.height
x: parent.width - endSlider.width
anchors.verticalCenter: parent.verticalCenter
color: doubleSlider.thumbColor
}
MouseArea {
id: sliderMouseArea
anchors.fill: parent
hoverEnabled: true
property point clickPos
property var currentSlider: undefined
onPressed: {
updateCurrentSlider(mouse)
clickPos = Qt.point(mouse.x,mouse.y)
}
onPositionChanged:{
if(pressed && currentSlider != undefined){
var delta = Qt.point(mouse.x-clickPos.x,mouse.y-clickPos.y)
doubleSlider.lastX = currentSlider.x
currentSlider.x = mouse.x
fixSliderPosition()
}
}
onWheel: {
if(currentSlider === undefined)
return
var delta = wheel.angleDelta.y/120
currentSlider.x += delta
fixSliderPosition()
}
function fixSliderPosition(){
if(currentSlider === undefined)
return
if(currentSlider === startSlider &&
startSlider.x+startSlider.width > endSlider.x)
currentSlider.x = endSlider.x-startSlider.width
if(currentSlider === endSlider &&
endSlider.x < startSlider.x + startSlider.width)
currentSlider.x = startSlider.x + startSlider.width
if(currentSlider.x < 0)
currentSlider.x = 0
if(currentSlider.x > doubleSlider.width - currentSlider.width)
currentSlider.x = doubleSlider.width - currentSlider.width
if(currentSlider === startSlider){
var v0 = 100*startSlider.x/doubleSlider.range
if(v0 != lowValue){
lowValue = v0
doubleSlider.value(lowValue,highValue)
}
}
else if(currentSlider === endSlider){
var v1 = 100*endSlider.x/doubleSlider.range
if(v1 != highValue){
highValue = v1
doubleSlider.value(lowValue,highValue)
}
}
}
function containPoint(input,minValue,maxValue){
if(input < minValue || input > maxValue)
return false
return true
}
function updateCurrentSlider(mouse){
if(containPoint(mouse.x,startSlider.x,startSlider.x+startSlider.width)){
currentSlider = startSlider
doubleSlider.lastX = startSlider.x
}
else if(containPoint(mouse.x,endSlider.x,endSlider.x+endSlider.width)){
currentSlider = endSlider
doubleSlider.lastX = endSlider.x
}
}
}
}
import QtQuick 2.2
import QtQuick.Controls 2.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.11
import QtQuick.Layouts 1.1
Rectangle
{
anchors.rightMargin: 4
anchors.bottomMargin: 4
anchors.leftMargin: 4
anchors.topMargin: 4
anchors.fill: parent
ColumnLayout
{
spacing: 2
anchors.fill: parent
Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
RowLayout {
anchors.fill: parent
Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
ListView {
id:idLogListView
focus:true
anchors.fill: parent
highlight: Rectangle { color: "#A0CED1" }
model: idListModle
delegate: Component
{
RowLayout {
id:idlistElemnet
height: 20
width: parent.width
spacing: 20
Layout.fillWidth: true
Rectangle {height: 16
width: 16
radius: 5
color:getListEleHeadColor(type)
Text{ anchors.centerIn: parent}
}
Text { text: time; font.bold: true}
Text { text:type }
Text { text:descripe; color:"blue" ; Layout.fillWidth: true}
states: State {
name: "Current"
when: idlistElemnet.ListView.isCurrentItem
PropertyChanges { target: idlistElemnet; x: 20 }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 200 }
}
MouseArea {
anchors.fill: parent
onClicked: idlistElemnet.ListView.view.currentIndex = index
}
}
}
Component.onCompleted:
{
for(var idx=0;idx<100;idx++)
{
var newType=parseInt((Math.random(Math.random())*100+1)%3);
idListModle.append( { "descripe": "系统日志
..","time": "2016-10-2","type":newType});
}
}
}
ListModel {
id:idListModle
ListElement {
descripe: "系统日志"
time: "2016-11-2"
type:1
}
}
}
Rectangle
{
Layout.fillHeight: true
id: scrollbar
width: 10;
height: 380
color: "#D9D9D9"
radius: 10
Rectangle {
id: button
x: 0
y: idLogListView.visibleArea.yPosition * scrollbar.height
width: 10
height: idLogListView.visibleArea.heightRatio * scrollbar.height;
color: "#979797"
radius: 10
MouseArea {
id: mouseArea
anchors.fill: button
drag.target: button
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: scrollbar.height - button.height
onMouseYChanged: {
idLogListView.contentY = button.y / scrollbar.height * idLogListView.contentHeight
}
}
}
}
}
}
Rectangle
{
Layout.preferredHeight: 40
Layout.fillWidth: true
Layout.minimumHeight:40
}
}
function getListEleHeadColor(ntype)
{
switch(ntype)
{
case 0:
return "lightblue"
case 1:
return "red";
case 2:
return "yellow";
case 3:
return "green";
default:
return "black";
}
}
}
import QtQuick 2.2
Rectangle{
id: rootItem
width: 360
height: 360
color: "#cfcfcf"
property int targetWidth: 0
Rectangle{
id: rect1
width:360
height:rootItem.height
color:"#808080"
}
Rectangle{
id: rect2
width:rootItem.width-rect1.width
height:parent.height
x:rootItem.width
color:"#c0c0c0"
}
Button{
text: "Button"
anchors.centerIn: parent
onClicked: {
animation.start()
}
}
NumberAnimation{
id: animation
target: rect1
properties: "width"
to: rootItem.targetWidth
duration: 720
onStopped: rootItem.targetWidth = rootItem.width - to
}
}
import QtQuick 2.6
import QtQuick.Controls 1.4
Rectangle{
id: rect1
width: 640
height: 480
ListModel{
id:libraryModel
ListElement{title: "aaa"; author: "AAA"}
ListElement{title: "bbb"; author: "BBB"}
ListElement{title: "ccc"; author: "ccc"}
}
TableView{
anchors.fill: parent
model:libraryModel
TableViewColumn{role:"title"; title: "Title"; width: 100}
TableViewColumn{role:"author"; title: "Author"; width: 200}
rowDelegate: Rectangle{
height: 50
color: styleData.selected?"#f0b0b0af":(styleData.alternate?"#c3c3c0":"#c0c0c3")
}
itemDelegate: Rectangle {
height: 50
color: "transparent"
Text {
//anchors.centerIn: parent
anchors.left: parent.left
anchors.leftMargin: 6
anchors.verticalCenter: parent.verticalCenter
color: styleData.textColor
text: styleData.value
verticalAlignment: Text.AlignVCenter
font.pointSize: 13
}
}
}
}
import QtQuick 2.2
Rectangle{
id: rootItem
width: 360
height: 360
color: "#cfcfcf"
Rectangle{
id: rect
width: 50
height: 50
x: 0
y: 5
color: "#c0c0ff"
MouseArea{
id: mouseArea
anchors.fill: parent
onClicked: {
animation.newHeight = 60
animation.start()
}
}
ParallelAnimation{
id: animation
property int newHeight: 240
NumberAnimation{
target: rootItem
properties: "height"
to: animation.newHeight
duration: 300
}
NumberAnimation{
target: rootItem
properties: "y"
to: y + (height-animation.newHeight)*0.5
duration: 300
}
}
}
}
import QtQuick 2.2
Rectangle{
id: rootItem
width: 360
height: 240
color: "#cfcfcf"
Rectangle{
id: rect
width: 50
height: 50
x: 0
y: 5
color: "#c0c0ff"
MouseArea{
id: mouseArea
anchors.fill: parent
onClicked: {
animation.start()
}
}
ParallelAnimation{
id: animation
NumberAnimation{
target: rect
properties: "x"
to: 100
duration: 300
}
NumberAnimation{
target: rect
properties: "y"
to: 100
duration: 300
}
}
}
}
有时候信号发送过快，消息还没过来，使用Connections
无法收到信息
可以使用 signal.connect直接连接槽函数即可
Item {
Rectangle {
id: item1
x: 0; width: 80; height: 80
color: "#0000FF"
}
Rectangle {
id:item2
x: 100; width: 80; height: 80
color: Qt.tint(item1.color, "#80FF0000")
}
}