QT Quick-组件

发表于 | 分类于
QT Quick-组件

基本组件

image-20211103002900919

这里面的这几个内部也可以填充其它组件

  • FocusScope
  • MouseArea
  • Rectangle

Item

Item 类型比较特殊，因为它是所有其他可视化类型的基类型。

尽管一个 Item 对象本身没有一个可视化的外观，但是它定义了可视化项目中所有常见的特性，比如 x 、y 、width 、height 、anchors 和键盘处理等。Item 类型最常见的用法是作为其他项目的容器，这样就可以把其他项目作为一个整体.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Item {
  Image {
    source: "tile.png"
  }
  Image {
    x: 80
    width: 100
    height: 100
    source: "tile.png"
  }
  Image {
    x: 190
    width: 100
    height: 100
    fillMode: Image.Tile
    source: "tile.png"
  }
}

Rectangle

填充渐变色

1
2
3
4
5
6
7
8
9
10
11
12
Rectangle {
  x: 160
  y: 20
  width: 100
  height: 100
  radius: 8 
  gradient: Gradient { 
    GradientStop { position: 0.0; color: "aqua" }
    GradientStop { position: 1.0; color: "teal" }
  }
  border { width: 3; color: "white" }
}

Rectangle的事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Rectangle {
    width: 600
    height: 400
    anchors.centerIn: parent
    color: "lightgray"
    TapHandler {
        //点击屏幕时，修改了pressed属性，触发onPressedChanged
        onPressedChanged: {
            console.log("press ? : ", pressed)
        }

        //长按时触发onLongPressed
        onLongPressed: {
            console.log("long pressed")
        }
    }
}

DropShadow(阴影)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Rectangle{
    id:progressRect
    width: 100
    height: 100
    anchors.centerIn: parent
}

DropShadow {
    color: "#cccccc"
    anchors.fill: progressRect
    horizontalOffset: 2
    verticalOffset: 2
    samples: 16
    radius: 10
    source: progressRect
}

其中

  • radius是阴影的半径，值越大，阴影的模糊范围就越大。

注意

这里要把DropShadow和需要加阴影的组件放在同级，如果放在下级显示会有问题。

Text/TextInput/TextEdit

Text 只支持文本的显示。

TextInput 编辑一行文本。

TextEdit 提供的多行文本编辑框。

1
2
3
4
5
6
7
8
9
10
Text {
  text: "你好!"
  font.family: "微软雅黑"  // 设置字体名称
  font.pointSize: 14    // 设置字体大小（磅）
  font.bold: true       // 设置加粗
  font.italic: true     // 设置斜体
  font.underline: true  // 设置下划线
  horizontalAlignment: Text.AlignHCenter  // 水平居中对齐
  verticalAlignment: Text.AlignVCenter    // 垂直居中对齐
}

注意

font.pixelSize 允许你直接指定字体的像素大小，这在不同设备和 DPI 设置下更一致。

font.pointSize 属性用于设置字体的大小，单位是“点”（point），通常缩写为“pt”

Image

Image用来展示静态图片

1
2
3
4
5
6
Image {
    width: 64
    height: 64
    fillMode:Image.PreserveAspectFit
    source: "qrc:/imgs/logo.png"
}

填充方式fillMode:

  • Image.Stretch：拉伸图像以填充空间，不保持宽高比。
  • Image.PreserveAspectFit：按比例缩放图像，保持宽高比，不裁剪。
  • Image.PreserveAspectCrop：按比例缩放图像，保持宽高比，裁剪以填充空间。
  • Image.Tile：平铺图像以填充空间。
  • Image.TileVertically：垂直平铺图像。
  • Image.TileHorizontally：水平平铺图像。

BorderImage

BorderImage 能设置圆角的组件

1
2
3
4
5
6
7
8
9
BorderImage {
    id: scalableElement2
    source: "./Images/baseBImage.png"
    width: 100
    height: 100
    anchors.centerIn: parent
    border.left: 10; border.top: 10
    border.right: 10; border.bottom: 10
}

AnimatedImage

AnimatedImage展示动态图片

AnimatedImage 提供了五个属性：

  • currentFrame，指示当前正在播放的帧序号
  • frameCount，指示图片的总帧数
  • paused，表示是否暂停，设置它也可以暂停或继续播放
  • playing，指示动画是否在播放，默认为 true ，意思是 AnimatedImage 对象创建后立即开始播放
  • source，类型为 url ，指定要播放的图片地址，可以使本地文件、 qrc 里的资源、网络文件

示例

1
2
3
4
5
6
7
8
AnimatedImage {
    id: animated;
    source: "qrc:/shapes.gif";

    onCurrentFrameChanged: {
        info.text = "%1/%2".arg(animated.currentFrame).arg(animated.frameCount);
    }
}

MouseArea

工具类组件，没有外观。

基本示例

MouseArea的作用是监听点击方法。

1
2
3
4
5
6
7
8
MouseArea
{
  anchors.fill: parent
  onClicked:
  {
    Qt.quit()
  }
}

MouseArea子对象是鼠标区域，是一个不可见的组件，通过MouseArea对象可以实现鼠标互动。将鼠标区域覆盖整个Rectangle窗口。

开启事件传递

MouseArea 有一个属性为 propagateComposedEvents，默认为 false，当设置为 true 时，就可以将事件传递给重叠的其他鼠标区域了（包括控件）

见 Qt 官方文档：https://doc.qt.io/qt-5/qml-qtquick-mousearea.html#propagateComposedEvents-prop

示例代码如下：

1
2
3
4
5
6
7
8
MouseArea {
  anchors.fill: parent
  propagateComposedEvents: true
  onClicked: {
    console.log("clicked blue")
    mouse.accepted = false
  }
}

以上代码中开启了 propagateComposedEvents 属性，并且将 onClicked 中 mouse.accepted 重置为 false 了，这样 onClicked 事件就会顺利的传递到下层控件中。

如果你希望所有点击和释放操作都传递到下层，可以将 onPressed、onReleased 都重写掉，设置 accepted 为 false，如下示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
MouseArea {
  anchors.fill: parent
  propagateComposedEvents: true
  onClicked: {
    mouse.accepted = false
  }
  onPressed: {
    mouse.accepted = false
  }
  onReleased: {
    mouse.accepted = false
  }
}

这样实现后，这个 MouseArea 的所有点击、按下、释放操作都会传递到下层，而且如果你开启了 hoverEnabled 属性，还不影响 onPositionChanged（鼠标移动）的事件响应，完美的实现了一个鼠标区域只响应鼠标移动但又可以传递点击等事件到下层控件的需求。

FocusScope

FocusScope继承Item，是一个工具类组件，没有外观，一般都作为root组件出现。

QML中事件的传递顺序是 从外而内，从下而上 ，这个顺序是和qml内部组件实例化顺序一致的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Rectangle{
  //截断focus事件
  Rectangle{
    //由于外层截断了focus,所以永远无法获取focus事件
  }

  Rectangle{
    //由于外层截断了focus,所以永远无法获取focus事件
  }

}

FocusScope{
  id:root
  //永远不截断focus事件,会立刻传递给自己的children,从下向上找到第一个focus属性是true的child,把focus事件传给它
  Rectangle{
    id:rec2
    focus:true
    //因为rec1设置了focus = false,所以root会把focus事件传递给rec2,有因为focus=true,所以会截断并获取事件
  }

  Rectangle{
    id:rec1
    focus:false
    //因为设置了focus = false,所以截断
  }
}

Flipable

一个工具类组件，没有外观

Flipable 是一种可以在其正面和背面之间明显“翻转”的物品，就像卡片一样。它可以与Rotation、State和Transition类型一起使用以产生翻转效果。

front和back属性被用来容纳被分别显示在flipable项目的正面和背面上的项目。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Flipable {
    id: flipable
    width: 240
    height: 240

    property bool flipped: false

    front: Image { source: "front.png"; anchors.centerIn: parent }
    back: Image { source: "back.png"; anchors.centerIn: parent }

    transform: Rotation {
        id: rotation
        origin.x: flipable.width/2
        origin.y: flipable.height/2
        axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
        angle: 0    // the default angle
    }

    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 }
        when: flipable.flipped
    }

    transitions: Transition {
        NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: flipable.flipped = !flipable.flipped
    }
}