Question

我想在QML for SailfishOS的屏幕底部显示TextField。

我尝试了多次尝试，但TextField始终位于屏幕顶部。

import QtQuick 2.0
import Sailfish.Silica 1.0

ApplicationWindow {
     id: screen
     anchors.fill: parent
    Item {
        width: parent.width;
        anchors.bottom: screen.bottom
        TextField {
            width: parent.width;
            anchors.bottom: screen.bottom
            id: input
            placeholderText: "URL"
            inputMethodHints: Qt.ImhNoPredictiveText
            validator: RegExpValidator { regExp: /^[a-zA-Z]{3,}$/ }
        }
    }
}

Answer 1

Kaymaz ，一般来说，您的问题与SailfishOS无关。而你几乎是正确的，但在你的代码中犯了几个错误。您可以使用以下代码：

// Its desktop version, and everyone can run it. It will be easy 
// to insert correct includes for SailfishOS
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

ApplicationWindow {
    id: appWindow

    // Explicitly set window size (just for testing on desktop)
    width: 200
    height: 400

    // Item that represents "main application rectangle"
    // it will contain all child items
    Item {
        id: root
        anchors.fill: parent

        TextField {
            id: input
            anchors {
                left: parent.left
                right: parent.right
                bottom: root.bottom
            }
            placeholderText: "URL"
            inputMethodHints: Qt.ImhNoPredictiveText
            validator: RegExpValidator { regExp: /^[a-zA-Z]{3,}$/ }
        }
    }
}

我不建议使用 folibis 的方法，原因有以下几种：

如果您可以在QML中使用anchor - 请使用它。
避免使用未命名的常量（例如30）。
这样的代码变得难以阅读（我的意思是，如果它超过20行）。
想象一下，TextField的身高变化 - 您需要更改y: screen.height - 30。所以这种代码很难维护。
不要写代码思考＆＃34;我可以稍后改进它＃34;。写好代码。

Answer 2

试试这个：

ApplicationWindow {
    id: screen
    width: 400
    height: 300

    TextField {
        width: screen.width
        y: screen.height - height
        placeholderText: "URL"
    }
}

如何在屏幕底部显示TextField

2 个答案: