布局属性

Layout.leftMargin: 20 //左外边距设为20
Layout.fillHeight: true //填充到父项目的高
Layout.alignment: Qt.AlignCenter  //居中

Tab选项卡

用于选项卡的排列

TabBar {
    id: bar
    Layout.fillWidth: true
  	TabButton {
      text: '识别、保存设置'
      //width: implicitWidth  //此选项用于保证每个tab中的文字显示完整，如果tabBar的宽度够宽则显示为下图的效果
		}
    TabButton {
      text: '切点设置'
    }
    TabButton {
      text: '通讯接口设置'
    }
    TabButton {
      text: '光源设置'
    }
}

Tab选项卡

堆布局

在堆布局中，有4个列布局（或者任意布局），当堆布局的currentIndex变化时，显示的对象也进行切换

StackLayout {
    width: parent.width
    currentIndex: bar.currentIndex //此处指定当前显示的项目下标，配合绑定tab选项卡使用
  	ColumnLayout{
  		// index 0
		}
		ColumnLayout{
  		// index 1
		}
		ColumnLayout{
  		// index 2
		}
		ColumnLayout{
  		// index 3
		}
}

图片移动动画

Image {
    id: animatedImage1
    width: 100
    height: parent.height
    Layout.leftMargin:10
    source: "../images/log.svg"
    NumberAnimation {
        id: animateColor
        target: animatedImage1
        properties: "x"
        from: animatedImage1.x
        to: animatedImage1.x + 50
        loops: Animation.Infinite
        onStopped:{
            animatedImage1.x=0
        }
    }
}

按键处理过程

用户按下或释放一个按键，处理步骤：
1. Qt获取键盘动作并产生一个键盘事件
2. 场景将键盘事件交付给当前活动焦点的QML项目。如果没有项目具有活动焦点，键盘事件会被忽略，然后按常规的按键处理
3. 如果具有活动焦点的QML项目接收了该键盘事件，那么传播将停止
4. 一层一层传播父项目，如果到达了根项目，该事件会被忽略而继续常规的Qt按键处理
所有基于Item的可见元素都可以通过Keys附加属性来进行按键处理，Keys附加属性提供了基本的处理器

有时候处于焦点的对象与我们想要获取按键事件的对象不是父关系，并且还需要传递多个项目的时候可以使用key事件转发，列表中id对应的项目就可以同时受到按键事件：

Keys.forwardTo: [topBottom,bottomButton,leftButton,rightBottom] //转发按键消息

转发的按钮对象：

Button{
  id: topBottom
  text:'↑'
  Layout.row:1
  Layout.column:1
  Keys.onUpPressed: {
    	highlighted=true
  }
  Keys.onReleased:{
    if(event.key==Qt.Key_Up){
				highlighted=false
    }
  }
}
Button{
  id: leftButton
  text:'←'
  Layout.row:2
  Keys.onLeftPressed: {
    	highlighted=true
	}
	Keys.onReleased:{
    if(event.key==Qt.Key_Left){
				highlighted=false
    }
	}
}
Button{
  id: bottomButton
  //signal verifyFocus()
  text:'↓'
  Keys.enabled: true
  focus: true
  Keys.onDownPressed: {
    	highlighted=true
	}
	Keys.onReleased:{
  	if(event.key==Qt.Key_Down){
				highlighted=false
  	}
	}
}
Button{
    id: rightBottom
    text:'→'
    Keys.onRightPressed: {
        highlighted=true
  	}
  	Keys.onReleased:{
    if(event.key==Qt.Key_Right){
				highlighted=false
    }
  }
}