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

...

这是我启动应用程序时的样子：

Button 以某种方式决定将自己置于我的 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

你把ButtonaRow放在它自己的里面，所以没有什么告诉它去追你的DatePicker. 您需要将DatePicker内部Row或使用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;
        }
    }
}