QML填充父元素

我有一個問題，它可以在隨附的屏幕截圖QML填充父元素

有ApplicationWindow，其具有頭部和ListView其在水平佈局使用中可以看出的寬度。列表中的每個項目都應該是一個應用程序頁面。不幸的是，基本頁面的寬度設置不正確以填充其父項的寬度（白色背景，而不是灰色背景）。

這是主頁面的代碼，它應該加載登錄頁面 - 它顯示在圖像上。

ApplicationWindow { 
id: root_window 
title: Style.applicationName 
visible: true 
color: "white" 
width: Style.windowWidth 
height: Style.windowHeight  

ColumnLayout { 
    id: root_layout 
    spacing: 0 
    width: root_window.width 
    height: root_window.height 

    SmonHeader { 
     id: smon_user_app_header 
     height: Style.headerHeight 
     anchors.top: parent.top 
     Layout.alignment: Qt.AlignLeft 
     Layout.fillWidth: true 
    } 

    Component.onCompleted: { 
     console.log("Main width: " + width); 
    } 

    ListView { 
     id: navigation 

     width: parent.width 
     height: parent.height 
     orientation: ListView.Horizontal 
     interactive: true // disable manual pageChange 

     snapMode: ListView.SnapOneItem // while moving to right, finish move 
     highlightRangeMode: ListView.StrictlyEnforceRange // mouse gesture make currentIndex change 
     highlightMoveDuration: 400 // speed up pages change (swap) 

     model: ObjectModel { 
      /* First page with login capabilities */ 
      Login { 
       id: login_module 
       width: root_layout.width 
       height: root_layout.height 
      } 
     } 
    } 
} 

/* Private function definition*/ 
function init_database() 
{ 
    var database = Storage.LocalStorage.openDatabaseSync(Style.databaseName, Style.databaseVersion, Style.databaseDescr, Style.databaseSize); 
    smonDatabase.startDatabase(Style.databaseName); 
} 

Component.onCompleted: { 
    init_database(); 
} 
}

這裏是登錄頁面的基礎

import QtQuick 2.4 
import QtQuick.Controls 1.2 
import QtQuick.Layouts 1.1 
import QtQuick.Dialogs 1.2 

import "../" 
import "./common" 

Rectangle { 
id: login_page 
// why parent.width is not set ? 
anchors.fill: parent 
//width: parent.width 
//Layout.fillWidth: true 

property string credentials_title: qsTr("Přístupové údaje") 
property string available_devices: qsTr("Dostupné servery") 
property string identity_title: qsTr("Identita") 
property string password_title: qsTr("Heslo") 
property string domain_title: qsTr("Doména") 
property string infoLine_title: qsTr("Zapamatovat přihlašovací údaje") 
property string username_title: qsTr("Jméno"); 

Component.onCompleted: { 
    console.log("Login width: " + login_page.width); 
    control.cancelEnabled = false 
} 

ColumnLayout{ 
    id: navigation 
    spacing: Style.spacing 
    anchors.left: parent.left 
    anchors.leftMargin: Style.defaultAnchors 
    Layout.fillWidth: true 
    anchors.fill: parent 
    width: parent.width 

    Text { 
     id: title 
     //anchors.top: parent.top 
     //anchors.left: parent.left 
     font.pointSize: Style.fontSizeHeading 

     text: credentials_title 
    } 

    ColumnLayout{ 
     id: navigationLogin 
     spacing: Style.spacing 
     anchors.left: parent.left 
     anchors.leftMargin: Style.defaultAnchors 
     Layout.fillWidth: true 
     Layout.bottomMargin: Style.bottomMargin 
     width: (parent.width - 4*Style.defaultAnchors) 

     GridLayout { 
      id: input_login 
      rowSpacing: Style.denseSpacing 
      columns: 2 
      columnSpacing: Style.spacing 
      anchors.left: parent.left 
      anchors.leftMargin: Style.defaultAnchors 
      width: 200 

      Text { 
       id: user_name 
       font.pointSize: Style.fontSizeSubHeading 

       text: username_title 
      } 

      SmonComboBox { 
       id: user 
       width: parent.width 

       value: smonRole.user 
       object: smonRole 
       prop: "user" 
       isEditable: true 
       dataModel: smonRole.userData 
       selectedIndex: smonRole.userNameSelected 
      } 

      Text { 
       id: password_name 
       font.pointSize: Style.fontSizeSubHeading 

       text: password_title 
      } 

      SmonTextField { 
       id: password 
       width: parent.width 
       type: "password" 

       object: smonRole 
       prop: "pass" 
       value: smonRole.pass 

       onEnterPressed: { 
        user.enabled = false 
        password.enabled = false 
        //control.okEnabled = false 
        control.okEnabled = false 
        control.cancelEnabled = true 

        smonRole.save(); 
        smonCommunication.connect(); 
       } 

       onValueChanged: { 
        if(password.value !== "") 
        { 
         control.okEnabled = true 
        } 
        else 
        { 
         control.okEnabled = false 
        } 

       } 
      } 
     } 

     ColumnLayout { 
      id: scanning 
      spacing: Style.denseSpacing 
      anchors.left: parent.left 
      //Layout.fillWidth: true 



      RowLayout { 
       id: slider_component 

       Text { 
        id: scanningHeader 
        font.pointSize: Style.fontSizeSubHeading 

        text: qsTr("Perioda vyhledávání zařízení"); 
       } 

       Text { 
        id: value 
        font.pointSize: Style.fontSizeInfo 
        anchors.left: scanningHeader.right 
        anchors.leftMargin: Style.defaultAnchors 
        width: 30 

        text: slider.value 
       } 
      } 

      Slider { 
       id: slider 
       minimumValue: 2 
       maximumValue: 30 
       Layout.fillWidth: true 
       stepSize: 1 

       value: smonCommunication.scanPeriod 

       onValueChanged: { 
        smonCommunication.scanPeriod = slider.value; 
       } 
      } 
     } 

     SmonControlPanel { 
      id: control 
      width: parent.width 
      okEnabled: smonRole.user != "" && smonRole.pass != "" 
      okVisible: true 
      cancelVisible: true 

      onSignalOk: { 
       // hide content 
       user.enabled = false 
       password.enabled = false 
       control.okEnabled = false 
       control.cancelEnabled = true 

       smonRole.save(); 
       smonCommunication.connect(); 
      } 

      onSignalCancel: { 
       // show content again 
       password.enabled = true 
       user.enabled = true 
       //domain.enabled = true 
       control.cancelEnabled = false 
       control.okEnabled = true 

       //smonConnection.logout(); 
       smonCommunication.disconnect(); 
       smonRole.disconnected(); 
      } 
     } 
    } 

    Text { 
     id: favourite 
     font.pointSize: Style.fontSizeHeading 

     text: available_devices 
    } 

    ListView{ 
     id: servers 
     Layout.fillHeight: true 
     width: parent.width 

     model: smonCommunication.devicesList 

     delegate: Rectangle { 
      id: serverList 
      height: 80 
      width: parent.width 

      ColumnLayout{ 
       Text { 
        id: serverName 
        text: modelData.bluetooth_name 
       } 

       Text { 
        id: rssi 
        text: modelData.bluetooth_rssi 
       } 
      } 

      MouseArea { 
       id: bt_device 
       anchors.fill: parent 

       onClicked: { 
        if(smonCommunication.btCanConnect === true) 
         smonCommunication.connect(index); 
       } 
      } 
     } 
    } 
} 

MessageDialog { 
    id: errorDialog 
    standardButtons: StandardButton.Cancel | StandardButton.OK 
    visible: false; 

    informativeText: smonCommunication.errorMessage 

    onInformativeTextChanged: { 
     errorDialog.visible = true; 
    } 
}

}

有主網頁上或裝在頁面上的問題？感謝您的幫助...

來源

2016-10-25 user2336793

這是比你所期望的願意幫助你願意閱讀的人更多的代碼。最好製作一個說明你的問題的小例子，這將增加獲得幫助的機會。請記住，在使用佈局時，它是管理對象大小的佈局，因此您不應使用寬度/高度，而應使用附加的佈局屬性。 – dtech

您的主頁面指定了一個有兩個孩子的列布局，但其中一個佈局與佈局完全一樣大。因此，無論是太大還是想要列布局以外的東西 –

你的問題在於anchors.fill: parent位在ObjectModel。

這裏的parent不是ListView，而是ListView的contentItem，它恰好具有100px的隱含寬度。

在你的小例子，這樣的事情應該工作：

model: ObjectModel { 
    /* First page with login capabilities */ 
    Rectangle{ 
     id: one 
     //anchors.fill: parent <- parent is not navigation 
     width: navigation.width 
     height: 50 
     color: "red" 
    } 
}

一般來說，你不應該在您的代表使用parent屬性。

來源

2016-10-25 14:50:54 Yoann

是的，就是這樣。非常感謝 – user2336793

因此，在從ddriver和凱文克拉默（答謝）我做了一個最小的工作示例。

我停止使用ColumnLayout，並盡我所能設置一切。

下面是代碼

import QtQuick 2.4 
import QtQuick.Controls 1.3 
import QtQuick.Layouts 1.1 
import QtQml.Models 2.1 

ApplicationWindow { 
id: root_window 
title: "Hello world" 
visible: true 
color: "white" 
width: 480 
height: 520 

Rectangle { 
    id: smon_user_app_header 
    height: 50 
    color: "blue" 
    width: parent.width 
} 

ListView { 
    id: navigation 

    orientation: ListView.Horizontal 
    interactive: true // disable manual pageChange 

    snapMode: ListView.SnapOneItem // while moving to right, finish move 
    highlightRangeMode: ListView.StrictlyEnforceRange // mouse gesture make currentIndex change 
    highlightMoveDuration: 400 // speed up pages change (swap) 

    anchors.top: smon_user_app_header.bottom 
    anchors.bottom: root_window.bottom 

    width: parent.width 
    height: 400 

    model: ObjectModel { 
     /* First page with login capabilities */ 
     Rectangle{ 
      id: one 
      anchors.fill: parent 
      color: "red" 
     } 
    } 
} 
}

這裏是它的外觀

來源

2016-10-25 13:31:29 user2336793

QML填充父元素

回答

相關問題