QMLは、親要素

Question

Iが水平レイアウトで使用されるヘッダおよびリストビューを有する取り付けスクリーンショット

ApplicationWindowがあり、上で見られる問題を持っているの幅を埋めます。リストの各項目は、アプリケーションの1ページでなければなりません。残念ながら、ベースページの幅は、親の幅を埋めるように正しく設定されていません（白い背景で、灰色の背景ではありません）。

ここはメインページのコードです。ログインページが表示されます。画像に表示されています。ここで

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; 
    } 
} 

}

は、メインページ上またはロードされているページ上の問題がありますか？助けてくれてありがとう...

Answer 1

どのように見えるかです。

ここではparentはリストビューではありませんが、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プロパティを使用してはならない、話します。

Answer 2

したがって、ddriverとKevin Krammer（感謝）からの回答を受けて、私は最小の実例を作りました。

私は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" 
     } 
    } 
} 
} 

であり、ここで、それはあなたの問題は、あなたのObjectModelにanchors.fill: parentビットである