如何在 QML 中将水平菜单选项卡转换为垂直菜单选项卡?
How to convert horizontal menu tab to vertical in QML?
我想将水平菜单标签转换为垂直菜单标签,我写了以下代码:
TabView {
id: frame
anchors.fill: parent
anchors.margins: 4
Tab { title: "Tab 1" }
Tab { title: "Tab 2" }
Tab { title: "Tab 3" }
style: TabViewStyle {
frameOverlap: 1
tab: Rectangle {
color: styleData.selected ? "steelblue" :"lightsteelblue"
border.color: "steelblue"
implicitWidth: Math.max(text.width + 4, 80)
implicitHeight: 20
radius: 2
Text {
id: text
anchors.centerIn: parent
text: styleData.title
color: styleData.selected ? "white" : "black"
}
}
frame: Rectangle { color: "steelblue" }
}
}
有什么帮助吗?谢谢
人们,我做了很多经验,但几乎没有任何效果,直到我发现这个 post https://evileg.com/en/post/191/ 对我有帮助并且我曾经将菜单水平转换为垂直。下面是我使用的代码。
非常感谢!
// Layer with buttons that will change the fragments
RowLayout {
id: rowLayout
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 0
anchors.margins: 15
Button {
id: button1
anchors.left: rowLayout.left
text: qsTr("Fragment 1")
// Download the component from a file
onClicked: loader.source = "Fragment1.qml"
}
Button {
id: button2
anchors.left: rowLayout.left
anchors.top: button1.bottom
text: qsTr("Fragment 2")
// Loading setSource component through the method of installing the fragment parameters
onClicked: loader.setSource("Fragment2.qml")
}
Button {
id: button3
anchors.left: rowLayout.left
anchors.top: button2.bottom
text: qsTr("Fragment 3")
// Loading setSource component through the method of installing the fragment parameters
onClicked: loader.setSource("Fragment3.qml")
}
Button {
id: button4
anchors.left: rowLayout.left
anchors.top: button3.bottom
text: qsTr("Fragment 4")
// Installing a fragment from the Component
onClicked: loader.sourceComponent = fragment4
}
Button {
id: button5
anchors.left: rowLayout.left
anchors.top: button4.bottom
text: qsTr("Fragment 5")
// Installing a fragment from the Component
onClicked: loader.sourceComponent = fragment5
}
}
Loader {
id: loader
anchors.top: rowLayout.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.topMargin: -40
anchors.leftMargin: 63
source: "Fragment1.qml"
}
我想将水平菜单标签转换为垂直菜单标签,我写了以下代码:
TabView {
id: frame
anchors.fill: parent
anchors.margins: 4
Tab { title: "Tab 1" }
Tab { title: "Tab 2" }
Tab { title: "Tab 3" }
style: TabViewStyle {
frameOverlap: 1
tab: Rectangle {
color: styleData.selected ? "steelblue" :"lightsteelblue"
border.color: "steelblue"
implicitWidth: Math.max(text.width + 4, 80)
implicitHeight: 20
radius: 2
Text {
id: text
anchors.centerIn: parent
text: styleData.title
color: styleData.selected ? "white" : "black"
}
}
frame: Rectangle { color: "steelblue" }
}
}
有什么帮助吗?谢谢
人们,我做了很多经验,但几乎没有任何效果,直到我发现这个 post https://evileg.com/en/post/191/ 对我有帮助并且我曾经将菜单水平转换为垂直。下面是我使用的代码。
非常感谢!
// Layer with buttons that will change the fragments
RowLayout {
id: rowLayout
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 0
anchors.margins: 15
Button {
id: button1
anchors.left: rowLayout.left
text: qsTr("Fragment 1")
// Download the component from a file
onClicked: loader.source = "Fragment1.qml"
}
Button {
id: button2
anchors.left: rowLayout.left
anchors.top: button1.bottom
text: qsTr("Fragment 2")
// Loading setSource component through the method of installing the fragment parameters
onClicked: loader.setSource("Fragment2.qml")
}
Button {
id: button3
anchors.left: rowLayout.left
anchors.top: button2.bottom
text: qsTr("Fragment 3")
// Loading setSource component through the method of installing the fragment parameters
onClicked: loader.setSource("Fragment3.qml")
}
Button {
id: button4
anchors.left: rowLayout.left
anchors.top: button3.bottom
text: qsTr("Fragment 4")
// Installing a fragment from the Component
onClicked: loader.sourceComponent = fragment4
}
Button {
id: button5
anchors.left: rowLayout.left
anchors.top: button4.bottom
text: qsTr("Fragment 5")
// Installing a fragment from the Component
onClicked: loader.sourceComponent = fragment5
}
}
Loader {
id: loader
anchors.top: rowLayout.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.topMargin: -40
anchors.leftMargin: 63
source: "Fragment1.qml"
}