通过QML在Android中制作Toast

Question

我还没有通过QML开始学习Android开发，我只是好奇Toasts似乎是Android特定的小部件，而Qt for Android似乎没有现成的相应小部件，所以你如何通过QML在Android中实现Toast？

Answer 1

与fpermana的答案相比，类似但恕我直言更优雅的方法如下。

Toast.qml，可以单独使用，并且可以非自我毁灭的方式重复使用：

import QtQuick 2.0

/**
* @brief An Android-like timed message text in a box that selfdestroys when finished if desired
*/
Rectangle{

    /**
    * Public
    */

    /**
    * @brief Shows this Toast
    *
    * @param {string} text Text to show
    * @param {real} duration Duration to show in milliseconds, defaults to 3000
    */
    function show(text, duration){
        theText.text = text;
        if(typeof duration !== "undefined"){
            if(duration >= 2*fadeTime)
                time = duration;
            else
                time = 2*fadeTime;
            }
        else
            time = defaultTime;
        anim.start();
    }

    property bool selfDestroying: false ///< Whether this Toast will selfdestroy when it is finished

    /**
    * Private
    */

    id: root

    property real time: defaultTime
    readonly property real defaultTime: 3000
    readonly property real fadeTime: 300

    property real margin: 10

    width: childrenRect.width + 2*margin
    height: childrenRect.height + 2*margin
    radius: margin

    anchors.horizontalCenter: parent.horizontalCenter

    opacity: 0
    color: "white"

    Text{
        id: theText
        text: ""

        horizontalAlignment: Text.AlignHCenter
        x: margin
        y: margin
    }

    SequentialAnimation on opacity{
        id: anim

        running: false

        NumberAnimation{
            to: 0.9
            duration: fadeTime
        }
        PauseAnimation{
            duration: time - 2*fadeTime
        }
        NumberAnimation{
            to: 0
            duration: fadeTime
        }

        onRunningChanged:{
            if(!running && selfDestroying)
                root.destroy();
        }
    }
}

ToastManager.qml，如果同时显示多个Toast，则创建并组织import QtQuick 2.0 /** * @brief Manager that creates Toasts dynamically */ Column{ /** * Public */ /** * @brief Shows a Toast * * @param {string} text Text to show * @param {real} duration Duration to show in milliseconds, defaults to 3000 */ function show(text, duration){ var toast = toastComponent.createObject(root); toast.selfDestroying = true; toast.show(text, duration); } /** * Private */ id: root z: Infinity spacing: 5 anchors.centerIn: parent property var toastComponent Component.onCompleted: toastComponent = Qt.createComponent("Toast.qml") } ：

main.qml

ToastManager使用import QtQuick 2.0 ApplicationWindow{ visible: true /* other components of the application */ ToastManager{ id: toast } onSomeEvent: toast.show("Some event happened") onImportantEvent: toast.show("An important event happened!", 5000) } ：

*/3 * * * * sudo php /var/www/html/raspbank/index.php

Answer 2

也许是这样的......

这适用于InfoBanner.qml

import QtQuick 2.2
Loader {
    id: messages

    function displayMessage(message) {
        messages.source = "";
        messages.source = Qt.resolvedUrl("InfoBannerComponent.qml");
        messages.item.message = message;
    }

    width: parent.width
    anchors.bottom: parent.top
    z: 1
    onLoaded: {
        messages.item.state = "portrait";
        timer.running = true
        messages.state = "show"
    }

    Timer {
        id: timer

        interval: 2500
        onTriggered: {
            messages.state = ""
        }
    }

    states: [
        State {
            name: "show"
            AnchorChanges { target: messages; anchors { bottom: undefined; top: parent.top } }
            PropertyChanges { target: messages; anchors.topMargin: 100 }
        }
    ]

    transitions: Transition {
        AnchorAnimation { easing.type: Easing.OutQuart; duration: 300 }
    }
}

这适用于InfoBannerComponent.qml

import QtQuick 2.2

Item {
    id: banner

    property alias message : messageText.text

    height: 70

    Rectangle {
        id: background

        anchors.fill: banner
        color: "darkblue"
        smooth: true
        opacity: 0.8
    }

    Text {
        font.pixelSize: 24
        renderType: Text.QtRendering
        width: 150
        height: 40
        id: messageText


        anchors.fill: banner
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        wrapMode: Text.WordWrap

        color: "white"
    }

    states: State {
        name: "portrait"
        PropertyChanges { target: banner; height: 100 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            messages.state = ""
        }
    }
}

这是针对main.qml

的

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true
    width: 360
    height: 360

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }

    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }

    InfoBanner {
        id: messages
    }

    Component.onCompleted: messages.displayMessage("Hello World");
}

在marxoft dot co dot uk向marxian致谢

Answer 3

我在Ayberk Özgür's answer上进行了改进，使其更类似于Android实现，同时在iOS上仍然运行相同。此实现创建了黑色吐司，其中白色文本显示在屏幕底部。它还支持使用ToastManager的多个同时吐司，底部有最新的吐司，并使用漂亮的动画。

代码可在Github上获取，并在下方复制以方便使用：

Toast.qml，可以单独使用，并且可以非自我毁灭的方式重复使用：

// Toast.qml
import QtQuick 2.0

/**
  * @brief An Android-like timed message text in a box that self-destroys 
  * when finished if desired
  */
Rectangle {

    /**
      * Public
      */

    /**
      * @brief Shows this Toast
      *
      * @param {string} text Text to show
      * @param {real} duration Duration to show in milliseconds, defaults to 3000
      */
    function show(text, duration) {
        message.text = text;
        if (typeof duration !== "undefined") { // checks if parameter was passed
            time = Math.max(duration, 2 * fadeTime);
        }
        else {
            time = defaultTime;
        }
        animation.start();
    }

    // whether this Toast will self-destroy when it is finished
    property bool selfDestroying: false  

    /**
      * Private
      */

    id: root

    readonly property real defaultTime: 3000
    property real time: defaultTime
    readonly property real fadeTime: 300

    property real margin: 10

    anchors {
        left: parent.left
        right: parent.right
        margins: margin
    }

    height: message.height + margin
    radius: margin

    opacity: 0
    color: "#222222"

    Text {
        id: message
        color: "white"
        wrapMode: Text.Wrap
        horizontalAlignment: Text.AlignHCenter
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            margins: margin / 2
        }
    }

    SequentialAnimation on opacity {
        id: animation
        running: false 


        NumberAnimation {
            to: .9
            duration: fadeTime
        } 

        PauseAnimation {
            duration: time - 2 * fadeTime
        } 

        NumberAnimation {
            to: 0
            duration: fadeTime
        }

        onRunningChanged: {
            if (!running && selfDestroying) {
                root.destroy();
            }
        }
    }
}

ToastManager.qml，如果同时显示多个Toast，则创建并组织Toasts：

// ToastManager.qml
import QtQuick 2.0

/**
  * @brief Manager that creates Toasts dynamically
  */
ListView {
    /**
      * Public
      */

    /**
      * @brief Shows a Toast
      *
      * @param {string} text Text to show
      * @param {real} duration Duration to show in milliseconds, defaults to 3000
      */
    function show(text, duration) {
        model.insert(0, {text: text, duration: duration});
    }

    /**
      * Private
      */

    id: root

    z: Infinity
    spacing: 5
    anchors.fill: parent
    anchors.bottomMargin: 10
    verticalLayoutDirection: ListView.BottomToTop

    interactive: false

    displaced: Transition {
        NumberAnimation {
            properties: "y"
            easing.type: Easing.InOutQuad
        }
    }

    delegate: Toast {
        Component.onCompleted: {
            if (typeof duration === "undefined") {
                show(text);
            }
            else {
                show(text, duration);
            }
        }
    }

    model: ListModel {id: model}
}

main.qml使用ToastManager：

// main.qml
import QtQuick 2.0
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    height: 640
    width: 480
    id: root

    ToastManager {
        id: toast
    }

    Timer {
        interval: 1000
        repeat: true
        running: true
        property int i: 0
        onTriggered: {
            toast.show("This timer has triggered " + (++i) + " times!");
        }
    }

    Timer {
        interval: 3000
        repeat: true
        running: true
        property int i: 0
        onTriggered: {
            toast.show("This important message has been shown " + (++i) + " times.", 5000);
        }
    }
}

Answer 4

我写这个方法（从Qt调用）

  public void onCreate(Bundle savedInstanceState){
    super.onCreate(savedInstanceState);

     baseContext = getApplicationContext();
      m_instance = this;
}

您必须在OnCreate事件上保存上下文：

countX("xxhixx") → 4
countX("xhixhix") → 3
countX("hi") → 0

归功于victorrbravo