QML布局不正确显示

Question

我有一个简单的QML布局：

... 

Label 
{ 
    id: birthLabel 
    text: i18n.tr("Birth Date:"); 
} 

DatePicker 
{ 
    id:datePicker 
} 

Row 
{ 
    Button 
    { 
     text: i18n.tr("Add to Database"); 
     onClicked: 
     { 
      var firstName = playerFirstName.getText(); 
      var lastName = playerLastName.getText(); 
      var day = datePicker.selectedDay; 
      var month = datePicker.selectedMonth; 
      var year = datePicker.selectedYear; 
     } 
    } 
} 

... 

这里是个什么样子，当我启动应用程序，如：

按钮具有某种程度上决定把自己放在我的DatePicker顶部= \

布局有什么问题？这只是SDK中的一个错误？

这里是我的DatePicker.QML，但我敢肯定它的固体：

import QtQuick 2.0 
import Ubuntu.Components 0.1 
import Ubuntu.Components.Pickers 0.1 

UbuntuShape 
{ 
    property var selectedMonth; 
    property var selectedDay; 
    property var selectedYear; 

    Row 
    { 
     Picker 
     { 
      model: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"] 
      delegate: PickerDelegate 
      { 
       Label 
       { 
        text: modelData 
       } 
      } 
      selectedIndex: 5 
      onSelectedIndexChanged: { 
       selectedMonth = selectedIndex; 
       print("selected month: " + selectedIndex); 
      } 
     } 

     Picker 
     { 
      model: ["01", "02", "03", "04", "05", 
       "06", "07", "08", "09", "10", 
       "11", "12", "13", "14", "15", 
       "16", "17", "18", "19", "20", 
       "21", "22", "23", "24", "25", 
       "26", "27", "28", "29", "30", "31"] 
      delegate: PickerDelegate 
      { 
       Label 
       { 
        text: modelData 
       } 
      } 
      selectedIndex: 15 
      onSelectedIndexChanged: 
      { 
       selectedDay = selectedIndex; 
       print("selected day: " + selectedIndex); 
      } 
     } 

     Picker 
     { 
      model: ["1930", "1931", "1932", "1933", "1934", "1935", 
       "1936", "1937", "1938", "1939", "1940", 
       "1941", "1942", "1943", "1944", "1945", 
       "1946", "1947", "1948", "1949", "1950", 
       "1951", "1952", "1953", "1954", "1955", 
       "1956", "1957", "1958", "1959", "1960", 
       "1961", "1962", "1963", "1964", "1965", 
       "1966", "1967", "1968", "1969", "1970", 
       "1971", "1972", "1973", "1974", "1975", 
       "1976", "1977", "1978", "1979", "1980", 
       "1981", "1982", "1983", "1984", "1985", 
       "1986", "1987", "1988", "1989", "1990", 
       "1991", "1992", "1993", "1994", "1995", 
       "1996", "1997", "1998", "1999", "2000", 
       "2001", "2002", "2003", "2004", "2005", 
       "2006", "2007", "2008", "2009", "2010", 
       "2011", "2012", "2013"]; 
      delegate: PickerDelegate 
      { 
       Label 
       { 
        text: modelData 
       } 
      } 
      selectedIndex: 65 
      onSelectedIndexChanged: 
      { 
       selectedDay = selectedIndex; 
       print("selected day: " + selectedIndex); 
      } 
     } 
    } 
} 

Answer 1

你把Button在对自己那么没有什么，告诉它你的DatePicker追打。你需要要么把DatePicker的内部或使用anchors

Row 
{ 
    DatePicker 
    { 
     id:datePicker 
    } 

    Button 
    { 
     text: i18n.tr("Add to Database"); 
     onClicked: 
     { 
      var firstName = playerFirstName.getText(); 
      var lastName = playerLastName.getText(); 
      var day = datePicker.selectedDay; 
      var month = datePicker.selectedMonth; 
      var year = datePicker.selectedYear; 
     } 
    } 
} 

或者

DatePicker 
{ 
    id:datePicker 
} 

Row 
{ 
    anchors.left: datePicker.right 
    anchors.verticalCenter: datePicker.verticalCenter 

    Button 
    { 
     text: i18n.tr("Add to Database"); 
     onClicked: 
     { 
      var firstName = playerFirstName.getText(); 
      var lastName = playerLastName.getText(); 
      var day = datePicker.selectedDay; 
      var month = datePicker.selectedMonth; 
      var year = datePicker.selectedYear; 
     } 
    } 
}