qml - 如何在屏幕底部显示 TextField

Question

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

我尝试了多次，但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的方法，原因如下：

• 如果你可以anchor在 QML 中使用 s - 使用它。
• 避免使用未命名的常量（如30）。
• 这样的代码变得难以阅读（我的意思是，如果它超过 20 行）。
• 想象一下，你TextField的身高发生了变化——你需要改变y: screen.height - 30。所以这种代码变得难以维护。
• 不要写“我以后可以改进”的代码。写好代码。

Answer 2

尝试这个：

ApplicationWindow {
    id: screen
    width: 400
    height: 300

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