快捷導(dǎo)航

Python使用eel模塊創(chuàng)建GUI應(yīng)用程序

更新時(shí)間：2023年12月11日 09:50:36 作者：Python 集中營

在Python中,有許多庫和模塊可以用來創(chuàng)建圖形用戶界面（GUI）應(yīng)用程序,其中一個(gè)流行的選擇是使用eel模塊,下面小編就來為大家詳細(xì)介紹一下如何使用eel模塊創(chuàng)建GUI應(yīng)用程序吧

步驟1：安裝eel模塊

首先，您需要安裝eel模塊。在命令行中運(yùn)行以下命令來安裝：

pip install eel

步驟2：創(chuàng)建HTML文件

接下來，您需要?jiǎng)?chuàng)建一個(gè)HTML文件，用于構(gòu)建GUI界面。

在您的項(xiàng)目文件夾中創(chuàng)建一個(gè)名為index.html的文件，并在其中編寫HTML和CSS代碼。

例如，您可以創(chuàng)建一個(gè)簡單的界面，其中包含一個(gè)按鈕和一個(gè)顯示文本的區(qū)域。

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <style>
        body {
            text-align: center;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
        }
        #output {
            margin-top: 20px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My App</h1>
    <button onclick="buttonClicked()">Click Me</button>
    <div id="output"></div>

    <script>
        function buttonClicked() {
            eel.button_clicked();
        }

        function displayOutput(output) {
            document.getElementById("output").innerHTML = output;
        }
    </script>
</body>
</html>

步驟3：編寫Python代碼

現(xiàn)在，您可以編寫Python代碼來與HTML界面進(jìn)行交互。

在您的項(xiàng)目文件夾中創(chuàng)建一個(gè)名為app.py的Python文件，并在其中編寫以下代碼：

import eel

# 初始化eel
eel.init('web')

# 定義一個(gè)Python函數(shù)，用于處理按鈕點(diǎn)擊事件
@eel.expose
def button_clicked():
    output = "Button Clicked!"
    eel.displayOutput(output)

# 啟動(dòng)GUI應(yīng)用程序
eel.start('index.html', size=(500, 400))

在這個(gè)示例中，我們首先導(dǎo)入了eel模塊，并使用eel.init('web')初始化了eel。

然后，我們定義了一個(gè)名為button_clicked()的Python函數(shù)，并使用@eel.expose裝飾器將其暴露給JavaScript代碼。