Question

我正在尝试使工具栏正常工作，但是前3个选项卡按钮保持彼此书写。每个选项卡都在屏幕的左侧彼此重叠显示。

我希望每个选项卡按钮都填充并占用其唯一空间。

如何获取工具栏来显示3个单独的标签，这些标签在屏幕上水平分布且大小相等？

import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.1
import QtGraphicalEffects 1.0
import "../controls" as Controls



Page{
    anchors.fill: parent
header: ToolBar{
    Material.background: "green"
    TabButton {
                id: tab1
             width: parent.width/3
              text: qsTr("Asset")
              Image{
                  source: "../assets/clipboard.png"
              }
                onClicked: qmlfile1 = "./asset.qml"
          }
          TabButton {
              id:tab2
                    width: parent.width/3


              text: qsTr("Issue")
              Image{
                  source: "../assets/wrench.png"
              }
                onClicked: qmlfile1 = "./issue.qml"
          }
          TabButton {
                    width: parent.width/3

              id: tab3
              text: qsTr("Log")
              Image{
                  source: "../assets/cogs.png"
              }
              onClicked: qmlfile1 = "./log.qml"


           }

}


Rectangle{
     id: loader1
     Loader{

         width: pageApp.width

         source: qmlfile1
     }
       Component.onCompleted: {


           console.log(loader1.height)
           console.log(pageApp.height)
           console.log(tabBarApp.height)
       }
}
}

Answer 1

解决方案是添加行布局，并且每个选项卡按钮都会得到

Layout.fillHeight: true
Layout.fillWidth: true

填充选项卡以占据其所需的所有空间

import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.1
import QtGraphicalEffects 1.0

import "../controls" as Controls



Page{
anchors.fill: parent
header: ToolBar{
    Material.background: "green"
    RowLayout {
        anchors.fill: parent
    TabButton {
                id: tab1
             width: parent.width/3
             text: qsTr("Asset")
             Layout.fillHeight: true
             Layout.fillWidth: true

              Image{
                  source: "../assets/clipboard.png"
                   Layout.alignment: Qt.AlignLeft
              }
                onClicked: qmlfile1 = "./asset.qml"

          }
          TabButton {
              id:tab2
                    width: parent.width/3
                    Layout.fillHeight: true
                    Layout.fillWidth: true


              text: qsTr("Issue")
              Image{
                  source: "../assets/wrench.png"
                    Layout.alignment: Qt.AlignLeft
              }
                onClicked: qmlfile1 = "./issue.qml"
          }
          TabButton {
                    width: parent.width/3
                    Layout.fillHeight: true
                    Layout.fillWidth: true

              id: tab3
              text: qsTr("Log")
              Image{
                  source: "../assets/cogs.png"
                    Layout.alignment: Qt.AlignLeft
              }
              onClicked: qmlfile1 = "./log.qml"


           }
    }

}

// Add a Loader to load different samples.
// The sample Qml files can be found in the Samples folder
Rectangle{
     id: loader1
     Loader{

         width: pageApp.width

         source: qmlfile1
     }
       Component.onCompleted: {


           console.log(loader1.height)
           console.log(pageApp.height)
           console.log(tabBarApp.height)
       }
}
}

工具栏布局出现问题，每个选项卡相互堆叠

1 个答案: