QML 自定义控件 Toast

最新推荐文章于 2025-04-18 20:08:13 发布

LuciferCw

最新推荐文章于 2025-04-18 20:08:13 发布

阅读量652

点赞数

分类专栏： QML 学习文章标签： qt

本文链接：https://blog.csdn.net/u013163634/article/details/124884148

版权

本文介绍如何在QML中创建类似手机的Toast提示功能，包括弹出提示并在设定时间内自动消失的效果，同时提供了`main.qml`和`Toast.qml`两个关键文件的概述。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

QML 仿手机Toast

效果图：弹出提示后，提示框在一定时间内消失。

main.qml

    Button{
        text: "提示框3"
        onClicked: {
            toast.show("天行健 君子以自强不息,地势坤 君子以厚德载物", 4000);
        }
    }
    
    Toast{
        id: toast
    }

Toast.qml

import QtQuick 2.12

Rectangle {
    id: root
    opacity: 0
    color: "black"
    anchors{
        horizontalCenter: parent.horizontalCenter
        bottom: parent.bottom
        bottomMargin: 20
    }
    height: 50
    radius: 25
    antialiasing: true

    Text {
        id: lab
        color: "white"
        wrapMode: Text.Wrap
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 16
        anchors.centerIn: parent
    }

    SequentialAnimation on opacity {
        id: animation