如何在屏幕底部显示TextField

Question

我想在 SailfishOS 的 QML 屏幕底部显示一个 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

试试这个：

ApplicationWindow {
    id: screen
    width: 400
    height: 300

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

Answer 2

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 中使用 anchors -- 使用它。
避免未命名常量（如 30）。
这样的代码变得难以阅读（我的意思是，如果它超过 20 行）。
想象一下，你的 TextField 的身高发生了变化——你需要改变 y: screen.height - 30。所以这种代码变得难以维护。
不要写代码思维"I can improve this later"。写出好的代码。

如何在屏幕底部显示TextField

How to display TextField at the bottom of the screen

qml

textfield

qtquick2

sailfish-os