序言

NiceGUI 中的 Label 組件主要用于顯示靜態(tài)文本信息。其作用是向用戶傳遞明確的描述或提示。

用法通常如下：首先引入 NiceGUI 相關(guān)模塊，創(chuàng)建應(yīng)用實(shí)例。然后通過特定方法創(chuàng)建 Label 組件，并指定要顯示的文本內(nèi)容?？梢栽O(shè)置字體、顏色等樣式屬性，還能根據(jù)布局需求將其放置在合適的位置，以增強(qiáng)界面的可讀性和用戶體驗(yàn)。您還可以為 Label 組件設(shè)置文本對齊方式，如左對齊、右對齊或居中對齊。同時(shí)，能夠根據(jù)界面的交互需求，動(dòng)態(tài)修改 Label 顯示的文本內(nèi)容。例如，當(dāng)用戶執(zhí)行某個(gè)操作后，通過代碼實(shí)時(shí)更新 Label 中的文字，向用戶反饋操作結(jié)果或當(dāng)前狀態(tài)。此外，結(jié)合其他組件，如輸入框，根據(jù)輸入框的值來改變 Label 的顯示內(nèi)容，實(shí)現(xiàn)數(shù)據(jù)的關(guān)聯(lián)和交互展示。

一、標(biāo)簽組件lable最基本用法示例

1.在網(wǎng)頁上顯示出 Hello World 的標(biāo)簽示例

from nicegui import uiui.label('Hello World')ui.run()

運(yùn)行這段代碼，將會(huì)在網(wǎng)頁上顯示出 Hello World 的標(biāo)簽。

2. 使用 style 參數(shù)改變標(biāo)簽樣式示例

from nicegui import ui
ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')
ui.run()

二、標(biāo)簽組件lable更多用法示例

1. 添加按鈕動(dòng)態(tài)修改標(biāo)簽文字

from nicegui import ui# 創(chuàng)建標(biāo)簽并設(shè)置初始文本
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')# 創(chuàng)建一個(gè)按鈕，當(dāng)點(diǎn)擊時(shí)會(huì)改變標(biāo)簽的文本
def change_label():label.set_text('Hello NiceGUI!')ui.button('點(diǎn)擊我', on_click=change_label)ui.run()

2. 點(diǎn)擊按鈕動(dòng)態(tài)改變標(biāo)簽內(nèi)容、顏色、大小和粗細(xì)示例代碼

在這個(gè)示例中，點(diǎn)擊按鈕后，標(biāo)簽的內(nèi)容會(huì)變?yōu)?“Hello CSDN!！” 同時(shí)隨機(jī)改變顏色、字體大小和字體粗細(xì)。你可以根據(jù)需要添加更多的顏色和樣式選項(xiàng)。運(yùn)行這個(gè)代碼后，嘗試多次點(diǎn)擊按鈕以查看不同的效果。

from nicegui import ui
import random# 創(chuàng)建標(biāo)簽并設(shè)置初始文本、顏色、大小和粗細(xì)
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')# 定義可選的顏色和字體大小、粗細(xì)
colors = ['red', 'blue', 'green', 'orange', 'purple']
font_sizes = ['150%', '200%', '250%']
font_weights = ['100', '300', '400', '700']# 創(chuàng)建一個(gè)函數(shù)來隨機(jī)改變標(biāo)簽的內(nèi)容、顏色、大小和粗細(xì)
def change_label():new_text = 'Hello CSDN!!'new_color = random.choice(colors)new_size = random.choice(font_sizes)new_weight = random.choice(font_weights)label.set_text(new_text)label.style(f'color: {new_color}; font-size: {new_size}; font-weight: {new_weight}')ui.button('點(diǎn)擊我改變標(biāo)簽', on_click=change_label)ui.run()

3. 添加開關(guān)組件動(dòng)態(tài)改變標(biāo)簽內(nèi)容、顏色、大小和粗細(xì)示例代碼

在這個(gè)示例中，使用 ui.switch 創(chuàng)建了一個(gè)開關(guān)組件。當(dāng)開關(guān)被打開時(shí)，標(biāo)簽的文本、顏色、大小和粗細(xì)會(huì)隨機(jī)變化；當(dāng)開關(guān)關(guān)閉時(shí)，標(biāo)簽會(huì)恢復(fù)到初始狀態(tài)。運(yùn)行這個(gè)代碼后，你可以通過切換開關(guān)來查看標(biāo)簽樣式的變化。

from nicegui import ui
import random# 創(chuàng)建標(biāo)簽并設(shè)置初始文本、顏色、大小和粗細(xì)
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')# 定義可選的顏色和字體大小、粗細(xì)
colors = ['red', 'blue', 'green', 'orange', 'purple']
font_sizes = ['150%', '200%', '250%']
font_weights = ['100', '300', '400', '700']# 創(chuàng)建一個(gè)函數(shù)來隨機(jī)改變標(biāo)簽的內(nèi)容、顏色、大小和粗細(xì)
def change_label(value):if value:  # 當(dāng)開關(guān)打開時(shí)改變標(biāo)簽樣式new_text = 'Hello CSDN!!'new_color = random.choice(colors)new_size = random.choice(font_sizes)new_weight = random.choice(font_weights)label.set_text(new_text)label.style(f'color: {new_color}; font-size: {new_size}; font-weight: {new_weight}')else:  # 當(dāng)開關(guān)關(guān)閉時(shí)重置標(biāo)簽樣式label.set_text('Hello World')label.style('color: red; font-size: 200%; font-weight: 300')# 創(chuàng)建開關(guān)組件
ui.switch('切換標(biāo)簽樣式', on_change=change_label)ui.run()

4. 標(biāo)簽顯示輸入框組件輸入的內(nèi)容

from nicegui import ui# 創(chuàng)建輸入框和標(biāo)簽
input_text = ui.input('請輸入內(nèi)容：')
label = ui.label('')# 創(chuàng)建確定按鈕的回調(diào)函數(shù)
def submit():label.set_text(input_text.value)  # 設(shè)置標(biāo)簽的文本為輸入框的值# 創(chuàng)建確定按鈕
ui.button('確定', on_click=submit)# 運(yùn)行 NiceGUI
ui.run()

三、標(biāo)簽動(dòng)畫示例

1. 標(biāo)簽文字顏色間隔時(shí)間變換動(dòng)畫

import random
from nicegui import ui# 創(chuàng)建一個(gè) label 組件，并設(shè)置初始文本和樣式
label = ui.label('Hello, NiceGUI!').style('font-size: 24px; color: blue;')# 使用 timer 函數(shù)創(chuàng)建一個(gè)定時(shí)器，每隔一段時(shí)間（這里是 0.3 秒）更新一次 label 的樣式
def update_color():# 定義顏色列表colors = ['red', 'yellow', 'green', 'blue', 'purple', 'black']# 隨機(jī)選擇顏色color = random.choice(colors)# 設(shè)置顏色樣式label.style(f'color: {color}; transition: color 0.5s ease-in-out')ui.timer(0.3, update_color)ui.run()

解釋

創(chuàng)建標(biāo)簽組件：

創(chuàng)建一個(gè)標(biāo)簽組件，并設(shè)置初始文本為 “Hello, NiceGUI!”，字體大小為 24 像素，顏色為藍(lán)色。
定義顏色更新函數(shù)：

定義一個(gè)函數(shù) update_color，從預(yù)設(shè)的顏色列表中隨機(jī)選擇一種顏色，并更新標(biāo)簽的顏色樣式。
設(shè)置顏色過渡效果，使顏色變化更平滑。
設(shè)置定時(shí)器：

使用 ui.timer 創(chuàng)建一個(gè)定時(shí)器，每隔 0.3 秒調(diào)用一次 update_color 函數(shù)，實(shí)現(xiàn)標(biāo)簽顏色的周期性變化。
啟動(dòng)應(yīng)用：

調(diào)用 ui.run() 啟動(dòng) NiceGUI 應(yīng)用，使所有組件和邏輯生效。
通過這些步驟，實(shí)現(xiàn)了標(biāo)簽顏色每隔 0.3 秒隨機(jī)變換的效果，并帶有平滑過渡動(dòng)畫。

2. 標(biāo)簽文字旋轉(zhuǎn)動(dòng)畫

from nicegui import ui# 創(chuàng)建一個(gè) label 組件，并設(shè)置初始文本和樣式
label = ui.label('Hello, NiceGUI!').style('''font-size: 24px;color: blue;animation: rotate 2s linear infinite;
''')# 定義 CSS 動(dòng)畫
ui.add_css('''@keyframes rotate {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}
''')ui.run()

解釋：
創(chuàng)建標(biāo)簽：使用 ui.label 創(chuàng)建一個(gè)標(biāo)簽，并設(shè)置初始文本和基本樣式。
添加 CSS 樣式：通過 .style() 方法為標(biāo)簽添加 CSS 樣式，包括字體大小、顏色以及動(dòng)畫屬性。
定義 CSS 動(dòng)畫：使用 ui.add_css 添加一個(gè)關(guān)鍵幀動(dòng)畫 rotate，使標(biāo)簽從 0 度旋轉(zhuǎn)到 360 度。
啟動(dòng)應(yīng)用：調(diào)用 ui.run() 啟動(dòng) NiceGUI 應(yīng)用。
這樣就可以看到標(biāo)簽不斷旋轉(zhuǎn)的效果了。

3. 標(biāo)簽位置變化動(dòng)畫

from nicegui import ui# 創(chuàng)建一個(gè) label 組件，并設(shè)置初始文本和樣式
label = ui.label('Hello, NiceGUI!').style('''font-size: 24px;color: blue;animation: moveRight 2s linear infinite;
''')# 定義 CSS 動(dòng)畫
ui.add_css('''@keyframes moveRight {0% { transform: translateX(0); }50% { transform: translateX(100px); }100% { transform: translateX(0); }}
''')ui.run()

解釋總結(jié)
創(chuàng)建標(biāo)簽并設(shè)置初始樣式：

創(chuàng)建一個(gè)標(biāo)簽組件，并設(shè)置初始文本為 “Hello, NiceGUI!”。
設(shè)置標(biāo)簽的字體大小為 24px，并且顏色為藍(lán)色。
應(yīng)用名為 moveRight 的動(dòng)畫，持續(xù)時(shí)間為 2 秒，線性過渡，無限循環(huán)。
定義 CSS 動(dòng)畫：

定義一個(gè)關(guān)鍵幀動(dòng)畫 moveRight，使標(biāo)簽在不同時(shí)間點(diǎn)水平方向向右移動(dòng)。
0% { transform: translateX(0); }：初始狀態(tài)位置不變。
50% { transform: translateX(100px); }：在 50% 時(shí)向右移動(dòng) 100px。
100% { transform: translateX(0); }：最終恢復(fù)初始位置。
啟動(dòng) NiceGUI 應(yīng)用：

調(diào)用 ui.run() 啟動(dòng) NiceGUI 應(yīng)用。
這樣就可以看到標(biāo)簽每隔 2 秒周期性地水平方向向右移動(dòng)，并最終回到初始位置。

4. 標(biāo)簽大小變化動(dòng)畫

from nicegui import ui# 創(chuàng)建一個(gè) label 組件，并設(shè)置初始文本和樣式
label = ui.label('Hello, NiceGUI!').style('''font-size: 24px;color: blue;animation: scale 2s linear infinite;
''')# 定義 CSS 動(dòng)畫
ui.add_css('''@keyframes scale {0% { transform: scale(1); }50% { transform: scale(1.5); }100% { transform: scale(1); }}
''')ui.run()

解釋：
創(chuàng)建標(biāo)簽：使用 ui.label 創(chuàng)建一個(gè)標(biāo)簽，并設(shè)置初始文本和基本樣式。
添加 CSS 樣式：
animation: scale 2s linear infinite; 應(yīng)用名為 scale 的動(dòng)畫，持續(xù)時(shí)間為 2 秒，線性過渡，無限循環(huán)。
定義 CSS 動(dòng)畫：使用 ui.add_css 添加一個(gè)關(guān)鍵幀動(dòng)畫 scale，使標(biāo)簽在不同時(shí)間點(diǎn)進(jìn)行縮放變化。
0% { transform: scale(1); } 初始狀態(tài)不縮放。
50% { transform: scale(1.5); } 在 50% 時(shí)放大 1.5 倍。
100% { transform: scale(1); } 最終恢復(fù)原狀。
啟動(dòng)應(yīng)用：調(diào)用 ui.run() 啟動(dòng) NiceGUI 應(yīng)用。
這樣就可以看到標(biāo)簽在大小上不斷變化的效果了。你可以根據(jù)需要調(diào)整動(dòng)畫的具體參數(shù)。

5. 標(biāo)簽透明度變化動(dòng)畫

from nicegui import ui# 創(chuàng)建一個(gè) label 組件，并設(shè)置初始文本和樣式
label = ui.label('Hello, NiceGUI!').style('''font-size: 24px;color: blue;animation: fade 3s linear infinite;
''')# 定義 CSS 動(dòng)畫
ui.add_css('''@keyframes fade {0% { opacity: 1; }50% { opacity: 0.1; }100% { opacity: 1; }}
''')ui.run()

創(chuàng)建標(biāo)簽并設(shè)置初始樣式：

創(chuàng)建一個(gè)標(biāo)簽組件，并設(shè)置初始文本為 “Hello, NiceGUI!”。
設(shè)置標(biāo)簽的字體大小為 24px，并且顏色為藍(lán)色。
應(yīng)用名為 fade 的動(dòng)畫，持續(xù)時(shí)間為 3 秒，線性過渡，無限循環(huán)。
定義 CSS 動(dòng)畫：

定義一個(gè)關(guān)鍵幀動(dòng)畫 fade，使標(biāo)簽的透明度在不同時(shí)間點(diǎn)變化。
0% { opacity: 1; }：初始狀態(tài)完全不透明。
50% { opacity: 0.1; }：在 50% 時(shí)透明度為 0.1。
100% { opacity: 1; }：最終恢復(fù)完全不透明。
啟動(dòng) NiceGUI 應(yīng)用：

調(diào)用 ui.run() 啟動(dòng) NiceGUI 應(yīng)用。
這樣就可以看到標(biāo)簽的透明度每隔 3 秒周期性地變化，而顏色保持不變。

四、知識點(diǎn)歸納

以下是一些關(guān)于 NiceGUI 中 Label 組件的基本用法知識點(diǎn)：

1. 創(chuàng)建一個(gè)標(biāo)簽組件通常涉及到實(shí)例化 Label 類，并且可以立即設(shè)置其初始文本。

示例代碼：

from nicegui import uiui.label('Hello NiceGui')ui.run()

2. 動(dòng)態(tài)更新文本：

標(biāo)簽組件的文本可以通過點(diǎn)擊按鈕來更新。
示例代碼：

from nicegui import ui# 創(chuàng)建標(biāo)簽并設(shè)置初始文本
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')# 創(chuàng)建一個(gè)按鈕，當(dāng)點(diǎn)擊時(shí)會(huì)改變標(biāo)簽的文本
def change_label():label.set_text('Hello NiceGUI!')# 創(chuàng)建按鈕并綁定點(diǎn)擊事件
ui.button('點(diǎn)擊我', on_click=change_label)# 啟動(dòng) NiceGUI 應(yīng)用
ui.run()

3. 樣式調(diào)整：

可以通過設(shè)置樣式屬性來改變標(biāo)簽的外觀，如字體大小、顏色等。
示例代碼：

from nicegui import ui# 創(chuàng)建標(biāo)簽并設(shè)置初始文本和樣式
label = ui.label('Hello World')
label.style('color: red; font-size: 200%; font-weight: 300')# 啟動(dòng) NiceGUI 應(yīng)用
ui.run()

4. 響應(yīng)式布局：

標(biāo)簽組件可以被嵌入到不同的布局容器中，例如 Row 或 Column，以實(shí)現(xiàn)響應(yīng)式的布局設(shè)計(jì)。
示例代碼：

from nicegui import ui# 在列布局中添加標(biāo)簽
with ui.column():ui.label('Label in a column')# 在行布局中添加標(biāo)簽
with ui.row():ui.label('Label1 in a row')ui.label('Label2 in a row')# 啟動(dòng) NiceGUI 應(yīng)用
ui.run()

5. 事件處理：

盡管標(biāo)簽本身不直接支持事件處理（如點(diǎn)擊事件），但可以通過其他方式（例如綁定到按鈕或其他交互組件）間接地與標(biāo)簽互動(dòng)。

from nicegui import ui# 創(chuàng)建一個(gè)標(biāo)簽和滑塊
with ui.column():label = ui.label('初始值: 0')slider = ui.slider(min=0, max=10, value=0)# 定義一個(gè)函數(shù)來更新標(biāo)簽
def update_label():label.set_text(f'當(dāng)前值: {slider.value}')# 綁定滑塊變化事件到更新標(biāo)簽的函數(shù)
slider.on('change', update_label)# 啟動(dòng) NiceGUI 應(yīng)用
ui.run()