Untitled
unknown
plain_text
9 months ago
17 kB
18
Indexable
Give me a simple example of a qml file that lays out 3 sections for panels, all 3 panels will extend horizontally to fill the space to the left and right edge, the top panel will be 80 height and have no margin to the top edge of the window, the bottom panel will be 64 height and have no margin to the bottom edge of the panel, there will be 10 between each panel and the middle panel will fill the rest of the vertical space between the top and bottom.Thought for 7sqmlimport QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
ApplicationWindow {
id: window
width: 400
height: 300
visible: true
title: "Panel Layout Example"
ColumnLayout {
anchors.fill: parent
spacing: 0 // We'll handle margins manually with anchors
// Top panel: fixed height 80, no top margin
Rectangle {
id: topPanel
Layout.fillWidth: true
Layout.preferredHeight: 80
color: "lightblue"
Layout.topMargin: 0
Text {
anchors.centerIn: parent
text: "Top Panel (80 height)"
font.pixelSize: 16
}
}
// Middle panel: fills remaining space
Rectangle {
id: middlePanel
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: 10
Layout.bottomMargin: 10
color: "lightgreen"
Text {
anchors.centerIn: parent
text: "Middle Panel (fills remaining space)"
font.pixelSize: 16
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
}
}
// Bottom panel: fixed height 64, no bottom margin
Rectangle {
id: bottomPanel
Layout.fillWidth: true
Layout.preferredHeight: 64
color: "lightcoral"
Layout.bottomMargin: 0
Text {
anchors.centerIn: parent
text: "Bottom Panel (64 height)"
font.pixelSize: 16
}
}
}
}2.2sOk, let's extend the middle panel. I want the middle panel to have tabbed panels that are multi-page. Lets do an example where the top of the middle panel has 3 tab buttons evenly spaced across the top, the tabs themselves 64 height and 200 width. Each of those tabs will switch to a different panel and inside of each of those panels we want to be able to switch pages with left and right angle brackets at the bottom of the panel with a dot indicator for the number of pages and which one we are on. For example if there were 3 pages on the first tabbed panel, you'd see 3 small circles in the bottom center with the circle indicator which page being solid.Thought for 32sqmlimport QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
ApplicationWindow {
id: window
width: 700
height: 500
visible: true
title: "Panel Layout Example with Tabs and Pagination"
ColumnLayout {
anchors.fill: parent
spacing: 0
// Top panel: fixed height 80, no top margin
Rectangle {
id: topPanel
Layout.fillWidth: true
Layout.preferredHeight: 80
color: "lightblue"
Layout.topMargin: 0
Text {
anchors.centerIn: parent
text: "Top Panel (80 height)"
font.pixelSize: 16
}
}
// Middle panel: fills remaining space with tabs and pagination
Rectangle {
id: middlePanel
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: 10
Layout.bottomMargin: 10
color: "lightgreen"
ColumnLayout {
anchors.fill: parent
anchors.margins: 0
// Tab bar with evenly spaced buttons
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: 64
Item { Layout.fillWidth: true }
Button {
id: tab1Button
text: "Tab 1"
Layout.preferredWidth: 200
Layout.preferredHeight: 64
checkable: true
checked: true
ButtonGroup.group: tabGroup
onCheckedChanged: if (checked) currentTab = 0
}
Item { Layout.fillWidth: true }
Button {
id: tab2Button
text: "Tab 2"
Layout.preferredWidth: 200
Layout.preferredHeight: 64
checkable: true
ButtonGroup.group: tabGroup
onCheckedChanged: if (checked) currentTab = 1
}
Item { Layout.fillWidth: true }
Button {
id: tab3Button
text: "Tab 3"
Layout.preferredWidth: 200
Layout.preferredHeight: 64
checkable: true
ButtonGroup.group: tabGroup
onCheckedChanged: if (checked) currentTab = 2
}
Item { Layout.fillWidth: true }
}
ButtonGroup { id: tabGroup }
property int currentTab: 0
// Stack for tab contents
StackLayout {
Layout.fillWidth: true
Layout.fillHeight: true
currentIndex: parent.currentTab
// Tab 1 content with 3 pages
Item {
property int currentPage: 0
property int numPages: 3
Rectangle {
anchors.fill: parent
color: "yellow"
// Page content area
Rectangle {
anchors {
top: parent.top
left: parent.left
right: parent.right
bottom: navBar.top
}
color: "transparent"
Text {
anchors.centerIn: parent
text: "Tab 1 - Page " + (parent.parent.currentPage + 1) + " of " + parent.parent.numPages
font.pixelSize: 20
horizontalAlignment: Text.AlignHCenter
}
}
// Navigation bar
Rectangle {
id: navBar
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
height: 40
color: "lightgray"
RowLayout {
anchors.fill: parent
anchors.margins: 10
Button {
text: "<"
onClicked: parent.parent.parent.currentPage = Math.max(0, parent.parent.parent.currentPage - 1)
}
Item { Layout.fillWidth: true }
// Dot indicators
Row {
spacing: 5
Repeater {
model: parent.parent.parent.numPages
delegate: Rectangle {
width: 10
height: 10
radius: 5
color: index === parent.parent.parent.currentPage ? "black" : "gray"
}
}
}
Item { Layout.fillWidth: true }
Button {
text: ">"
onClicked: parent.parent.parent.currentPage = Math.min(parent.parent.parent.numPages - 1, parent.parent.parent.currentPage + 1)
}
}
}
}
}
// Tab 2 content with 2 pages
Item {
property int currentPage: 0
property int numPages: 2
Rectangle {
anchors.fill: parent
color: "orange"
// Page content area
Rectangle {
anchors {
top: parent.top
left: parent.left
right: parent.right
bottom: navBar.top
}
color: "transparent"
Text {
anchors.centerIn: parent
text: "Tab 2 - Page " + (parent.parent.currentPage + 1) + " of " + parent.parent.numPages
font.pixelSize: 20
horizontalAlignment: Text.AlignHCenter
}
}
// Navigation bar
Rectangle {
id: navBar
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
height: 40
color: "lightgray"
RowLayout {
anchors.fill: parent
anchors.margins: 10
Button {
text: "<"
onClicked: parent.parent.parent.currentPage = Math.max(0, parent.parent.parent.currentPage - 1)
}
Item { Layout.fillWidth: true }
// Dot indicators
Row {
spacing: 5
Repeater {
model: parent.parent.parent.numPages
delegate: Rectangle {
width: 10
height: 10
radius: 5
color: index === parent.parent.parent.currentPage ? "black" : "gray"
}
}
}
Item { Layout.fillWidth: true }
Button {
text: ">"
onClicked: parent.parent.parent.currentPage = Math.min(parent.parent.parent.numPages - 1, parent.parent.parent.currentPage + 1)
}
}
}
}
}
// Tab 3 content with 4 pages
Item {
property int currentPage: 0
property int numPages: 4
Rectangle {
anchors.fill: parent
color: "pink"
// Page content area
Rectangle {
anchors {
top: parent.top
left: parent.left
right: parent.right
bottom: navBar.top
}
color: "transparent"
Text {
anchors.centerIn: parent
text: "Tab 3 - Page " + (parent.parent.currentPage + 1) + " of " + parent.parent.numPages
font.pixelSize: 20
horizontalAlignment: Text.AlignHCenter
}
}
// Navigation bar
Rectangle {
id: navBar
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
height: 40
color: "lightgray"
RowLayout {
anchors.fill: parent
anchors.margins: 10
Button {
text: "<"
onClicked: parent.parent.parent.currentPage = Math.max(0, parent.parent.parent.currentPage - 1)
}
Item { Layout.fillWidth: true }
// Dot indicators
Row {
spacing: 5
Repeater {
model: parent.parent.parent.numPages
delegate: Rectangle {
width: 10
height: 10
radius: 5
color: index === parent.parent.parent.currentPage ? "black" : "gray"
}
}
}
Item { Layout.fillWidth: true }
Button {
text: ">"
onClicked: parent.parent.parent.currentPage = Math.min(parent.parent.parent.numPages - 1, parent.parent.parent.currentPage + 1)
}
}
}
}
}
}
}
}
// Bottom panel: fixed height 64, no bottom margin
Rectangle {
id: bottomPanel
Layout.fillWidth: true
Layout.preferredHeight: 64
color: "lightcoral"
Layout.bottomMargin: 0
Text {
anchors.centerIn: parent
text: "Bottom Panel (64 height)"
font.pixelSize: 16
}
}
}
}Editor is loading...
Leave a Comment