CusPage{ objectName: "usingPage" id:root title: qsTr("图片查询") Rectangle { id: leftRect width: parent.width * 0.33 height: parent.height border.color: "red" border.width: 2 } Rectangle { id: rightRect width: parent.width * 0.67 height: parent.height x: leftRect.width border.color: "blue" border.width: 2 } }左边显示表格右边显示图片
时间: 2024-02-10 07:14:59 浏览: 176
您可以在左边的矩形中添加一个 TableView 组件,用于显示表格数据。在右边的矩形中添加一个 Image 组件,用于显示图片。以下是代码示例:
```
import QtQuick 2.0
import QtQuick.Controls 2.0
CusPage {
objectName: "usingPage"
id: root
title: qsTr("图片查询")
Rectangle {
id: leftRect
width: parent.width * 0.33
height: parent.height
border.color: "red"
border.width: 2
TableView {
id: table
anchors.fill: parent
model: myModel // 填充您的表格数据
// 设置表格列
TableViewColumn {
title: "姓名"
role: "name"
}
TableViewColumn {
title: "年龄"
role: "age"
}
}
}
Rectangle {
id: rightRect
width: parent.width * 0.67
height: parent.height
x: leftRect.width
border.color: "blue"
border.width: 2
Image {
id: image
anchors.centerIn: parent
source: "your_image_path" // 填充您的图片路径
fillMode: Image.PreserveAspectFit
}
}
}
```
在这个示例中,我们在左边的矩形中添加了一个 TableView 组件,并用 anchors.fill: parent 来使其填充整个矩形。我们设置了表格列和数据来源,您需要根据自己的需求填充相应的数据。
在右边的矩形中,我们添加了一个 Image 组件,并用 anchors.centerIn: parent 来使其居中显示。我们设置了图片路径和 fillMode,您可以根据自己的需求设置。
阅读全文