ColumnLayout中的QML TabView

Question

我正在嘗試修改Gallery示例。我想在TabView下加Button。於是，我把TabView和Button到ColumnLayout，這裏是代碼：

import QtQuick 2.3 
import QtQuick.Controls 1.2 
import QtQuick.Layouts 1.1 
import QtQuick.Controls.Styles 1.1 
import QtQuick.Window 2.0 

Window { 
    visible: true 
    title: "settings" 
    width: 600 
    height: 400 
ColumnLayout{ 
    anchors.fill: parent 
    TabView { 
     anchors.right: parent.right 
     anchors.left: parent.left 
     Tab { 
      title: "Controls" 
      Controls { } 
     } 
     Tab { 
      title: "Itemviews" 
      Controls { } 
     } 
     Tab { 
      title: "Styles" 
      Controls { } 
     } 
     Tab { 
      title: "Layouts" 
      Controls { } 
     } 
    } 

    RowLayout{ 
     anchors.right: parent.right 
     anchors.left: parent.left 
     Button{ 
      text: "ok" 
     } 
    } 
} 

} 

然而，當我調整窗口下的標籤控件okButton代表。我應該如何修復代碼？

Answer 1

當您定義了Layout時，添加的每個元素都可以訪問與佈局本身相關的特定屬性。這些屬性對於將元素放置在佈局覆蓋的空間內很有用。面對什麼here。

因此，你應該修改ColumnLayout這樣的：

ColumnLayout { 
    anchors.fill: parent     
    TabView { 
     id:frame 
     enabled: enabledCheck.checked 
     tabPosition: controlPage.item ? controlPage.item.tabPosition : Qt.TopEdge 
     Layout.fillHeight: true   // fill the available space vertically 
     Layout.fillWidth: true    // fill the available space horizontally 
     Layout.row: 0      // item in the first row of the column 
     anchors.margins: Qt.platform.os === "osx" ? 12 : 2 
     Tab { 
      id: controlPage 
      title: "Controls" 
      Controls { } 
     } 
     Tab { 
      title: "Itemviews" 
      ModelView { } 
     } 
     Tab { 
      title: "Styles" 
      Styles { anchors.fill: parent } 
     } 
     Tab { 
      title: "Layouts" 
      Layouts { anchors.fill:parent } 
     } 
    } 

    Button { 
     text: "ok" 
     Layout.row: 1      // item in the second row of the column 
     Layout.alignment: Qt.AlignCenter // simple center the button in its spatial slot 
    } 
} 

你不需要的按鈕RowLayout。它應該放在您定義的ColumnLayout的第二行，因爲它是一個簡單的組件。在同一行上的多個元件的情況下，子佈局可能是有用的，例如，兩個或更多按鈕。

還要注意，錨定僅用於ColumnLayout「拉伸」並適合窗口。所有其他操作都通過佈局屬性執行。有關一般規則，請參閱this其他文章。