【易上手快捷开发新框架技术】nicegui标签组件lable用法庖丁解牛深度解读和示例源代码IDE运行和调试通过截图为证

传奇开心果编程2024-09-30 23:17

传奇开心果微博文系列

    • 序言
    • 一、标签组件lable最基本用法示例
      • 1.在网页上显示出 Hello World 的标签示例
        1. 使用 style 参数改变标签样式示例
    • 二、标签组件lable更多用法示例
        1. 添加按钮动态修改标签文字
        1. 点击按钮动态改变标签内容、颜色、大小和粗细示例代码
        1. 添加开关组件动态改变标签内容、颜色、大小和粗细示例代码
        1. 标签显示输入框组件输入的内容
    • 三、标签动画示例
        1. 标签文字颜色间隔时间变换动画
        1. 标签文字旋转动画
        1. 标签位置变化动画
        1. 标签大小变化动画
        1. 标签透明度变化动画
    • 四、知识点归纳
        1. 创建一个标签组件通常涉及到实例化 Label 类，并且可以立即设置其初始文本。
        1. 动态更新文本：
        1. 样式调整：
        1. 响应式布局：
        1. 事件处理：

序言

NiceGUI 中的 Label 组件主要用于显示静态文本信息。其作用是向用户传递明确的描述或提示。

用法通常如下：首先引入 NiceGUI 相关模块，创建应用实例。然后通过特定方法创建 Label 组件，并指定要显示的文本内容。可以设置字体、颜色等样式属性，还能根据布局需求将其放置在合适的位置，以增强界面的可读性和用户体验。您还可以为 Label 组件设置文本对齐方式，如左对齐、右对齐或居中对齐。同时，能够根据界面的交互需求，动态修改 Label 显示的文本内容。例如，当用户执行某个操作后，通过代码实时更新 Label 中的文字，向用户反馈操作结果或当前状态。此外，结合其他组件，如输入框，根据输入框的值来改变 Label 的显示内容，实现数据的关联和交互展示。

一、标签组件lable最基本用法示例

1.在网页上显示出 Hello World 的标签示例

python 复制代码 
from nicegui import ui

ui.label('Hello World')

ui.run()

运行这段代码，将会在网页上显示出 Hello World 的标签。

2. 使用 style 参数改变标签样式示例

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

二、标签组件lable更多用法示例

1. 添加按钮动态修改标签文字

python 复制代码 
from nicegui import ui

# 创建标签并设置初始文本
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')

# 创建一个按钮，当点击时会改变标签的文本
def change_label():
    label.set_text('Hello NiceGUI!')

ui.button('点击我', on_click=change_label)

ui.run()


2. 点击按钮动态改变标签内容、颜色、大小和粗细示例代码

在这个示例中，点击按钮后，标签的内容会变为 "Hello CSDN!！" 同时随机改变颜色、字体大小和字体粗细。你可以根据需要添加更多的颜色和样式选项。运行这个代码后，尝试多次点击按钮以查看不同的效果。

python 复制代码 
from nicegui import ui
import random

# 创建标签并设置初始文本、颜色、大小和粗细
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')

# 定义可选的颜色和字体大小、粗细
colors = ['red', 'blue', 'green', 'orange', 'purple']
font_sizes = ['150%', '200%', '250%']
font_weights = ['100', '300', '400', '700']

# 创建一个函数来随机改变标签的内容、颜色、大小和粗细
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('点击我改变标签', on_click=change_label)

ui.run()



3. 添加开关组件动态改变标签内容、颜色、大小和粗细示例代码

在这个示例中，使用 ui.switch 创建了一个开关组件。当开关被打开时，标签的文本、颜色、大小和粗细会随机变化；当开关关闭时，标签会恢复到初始状态。运行这个代码后，你可以通过切换开关来查看标签样式的变化。

python 复制代码 
from nicegui import ui
import random

# 创建标签并设置初始文本、颜色、大小和粗细
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')

# 定义可选的颜色和字体大小、粗细
colors = ['red', 'blue', 'green', 'orange', 'purple']
font_sizes = ['150%', '200%', '250%']
font_weights = ['100', '300', '400', '700']

# 创建一个函数来随机改变标签的内容、颜色、大小和粗细
def change_label(value):
    if value:  # 当开关打开时改变标签样式
        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:  # 当开关关闭时重置标签样式
        label.set_text('Hello World')
        label.style('color: red; font-size: 200%; font-weight: 300')

# 创建开关组件
ui.switch('切换标签样式', on_change=change_label)

ui.run()


4. 标签显示输入框组件输入的内容

python 复制代码 
from nicegui import ui

# 创建输入框和标签
input_text = ui.input('请输入内容：')
label = ui.label('')

# 创建确定按钮的回调函数
def submit():
    label.set_text(input_text.value)  # 设置标签的文本为输入框的值

# 创建确定按钮
ui.button('确定', on_click=submit)

# 运行 NiceGUI
ui.run()

三、标签动画示例

1. 标签文字颜色间隔时间变换动画

python 复制代码 
import random
from nicegui import ui

# 创建一个 label 组件，并设置初始文本和样式
label = ui.label('Hello, NiceGUI!').style('font-size: 24px; color: blue;')

# 使用 timer 函数创建一个定时器，每隔一段时间（这里是 0.3 秒）更新一次 label 的样式
def update_color():
    # 定义颜色列表
    colors = ['red', 'yellow', 'green', 'blue', 'purple', 'black']
    # 随机选择颜色
    color = random.choice(colors)
    # 设置颜色样式
    label.style(f'color: {color}; transition: color 0.5s ease-in-out')

ui.timer(0.3, update_color)

ui.run()

解释

创建标签组件：

创建一个标签组件，并设置初始文本为 "Hello, NiceGUI!"，字体大小为 24 像素，颜色为蓝色。

定义颜色更新函数：

定义一个函数 update_color，从预设的颜色列表中随机选择一种颜色，并更新标签的颜色样式。

设置颜色过渡效果，使颜色变化更平滑。

设置定时器：

使用 ui.timer 创建一个定时器，每隔 0.3 秒调用一次 update_color 函数，实现标签颜色的周期性变化。

启动应用：

调用 ui.run() 启动 NiceGUI 应用，使所有组件和逻辑生效。

通过这些步骤，实现了标签颜色每隔 0.3 秒随机变换的效果，并带有平滑过渡动画。

2. 标签文字旋转动画

python 复制代码 
from nicegui import ui

# 创建一个 label 组件，并设置初始文本和样式
label = ui.label('Hello, NiceGUI!').style('''
    font-size: 24px;
    color: blue;
    animation: rotate 2s linear infinite;
''')

# 定义 CSS 动画
ui.add_css('''
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
''')

ui.run()

解释：

创建标签：使用 ui.label 创建一个标签，并设置初始文本和基本样式。

添加 CSS 样式：通过 .style() 方法为标签添加 CSS 样式，包括字体大小、颜色以及动画属性。

定义 CSS 动画：使用 ui.add_css 添加一个关键帧动画 rotate，使标签从 0 度旋转到 360 度。

启动应用：调用 ui.run() 启动 NiceGUI 应用。

这样就可以看到标签不断旋转的效果了。

3. 标签位置变化动画

python 复制代码 
from nicegui import ui

# 创建一个 label 组件，并设置初始文本和样式
label = ui.label('Hello, NiceGUI!').style('''
    font-size: 24px;
    color: blue;
    animation: moveRight 2s linear infinite;
''')

# 定义 CSS 动画
ui.add_css('''
    @keyframes moveRight {
        0% { transform: translateX(0); }
        50% { transform: translateX(100px); }
        100% { transform: translateX(0); }
    }
''')

ui.run()

解释总结

创建标签并设置初始样式：

创建一个标签组件，并设置初始文本为 "Hello, NiceGUI!"。

设置标签的字体大小为 24px，并且颜色为蓝色。

应用名为 moveRight 的动画，持续时间为 2 秒，线性过渡，无限循环。

定义 CSS 动画：

定义一个关键帧动画 moveRight，使标签在不同时间点水平方向向右移动。

0% { transform: translateX(0); }：初始状态位置不变。

50% { transform: translateX(100px); }：在 50% 时向右移动 100px。

100% { transform: translateX(0); }：最终恢复初始位置。

启动 NiceGUI 应用：

调用 ui.run() 启动 NiceGUI 应用。

这样就可以看到标签每隔 2 秒周期性地水平方向向右移动，并最终回到初始位置。

4. 标签大小变化动画

python 复制代码 
from nicegui import ui

# 创建一个 label 组件，并设置初始文本和样式
label = ui.label('Hello, NiceGUI!').style('''
    font-size: 24px;
    color: blue;
    animation: scale 2s linear infinite;
''')

# 定义 CSS 动画
ui.add_css('''
    @keyframes scale {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
''')

ui.run()

解释：

创建标签：使用 ui.label 创建一个标签，并设置初始文本和基本样式。

添加 CSS 样式：

animation: scale 2s linear infinite; 应用名为 scale 的动画，持续时间为 2 秒，线性过渡，无限循环。

定义 CSS 动画：使用 ui.add_css 添加一个关键帧动画 scale，使标签在不同时间点进行缩放变化。

0% { transform: scale(1); } 初始状态不缩放。

50% { transform: scale(1.5); } 在 50% 时放大 1.5 倍。

100% { transform: scale(1); } 最终恢复原状。

启动应用：调用 ui.run() 启动 NiceGUI 应用。

这样就可以看到标签在大小上不断变化的效果了。你可以根据需要调整动画的具体参数。

5. 标签透明度变化动画

python 复制代码 
from nicegui import ui

# 创建一个 label 组件，并设置初始文本和样式
label = ui.label('Hello, NiceGUI!').style('''
    font-size: 24px;
    color: blue;
    animation: fade 3s linear infinite;
''')

# 定义 CSS 动画
ui.add_css('''
    @keyframes fade {
        0% { opacity: 1; }
        50% { opacity: 0.1; }
        100% { opacity: 1; }
    }
''')

ui.run()

创建标签并设置初始样式：

创建一个标签组件，并设置初始文本为 "Hello, NiceGUI!"。

设置标签的字体大小为 24px，并且颜色为蓝色。

应用名为 fade 的动画，持续时间为 3 秒，线性过渡，无限循环。

定义 CSS 动画：

定义一个关键帧动画 fade，使标签的透明度在不同时间点变化。

0% { opacity: 1; }：初始状态完全不透明。

50% { opacity: 0.1; }：在 50% 时透明度为 0.1。

100% { opacity: 1; }：最终恢复完全不透明。

启动 NiceGUI 应用：

调用 ui.run() 启动 NiceGUI 应用。

这样就可以看到标签的透明度每隔 3 秒周期性地变化，而颜色保持不变。

四、知识点归纳

以下是一些关于 NiceGUI 中 Label 组件的基本用法知识点：

1. 创建一个标签组件通常涉及到实例化 Label 类，并且可以立即设置其初始文本。

示例代码：

python 复制代码 
from nicegui import ui

ui.label('Hello NiceGui')

ui.run()

2. 动态更新文本：

标签组件的文本可以通过点击按钮来更新。

示例代码：

python 复制代码 
from nicegui import ui

# 创建标签并设置初始文本
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')

# 创建一个按钮，当点击时会改变标签的文本
def change_label():
    label.set_text('Hello NiceGUI!')

# 创建按钮并绑定点击事件
ui.button('点击我', on_click=change_label)

# 启动 NiceGUI 应用
ui.run()

3. 样式调整：

可以通过设置样式属性来改变标签的外观，如字体大小、颜色等。

示例代码：

python 复制代码 
from nicegui import ui

# 创建标签并设置初始文本和样式
label = ui.label('Hello World')
label.style('color: red; font-size: 200%; font-weight: 300')

# 启动 NiceGUI 应用
ui.run()

4. 响应式布局：

标签组件可以被嵌入到不同的布局容器中，例如 Row 或 Column，以实现响应式的布局设计。

示例代码：

python 复制代码 
from nicegui import ui

# 在列布局中添加标签
with ui.column():
    ui.label('Label in a column')

# 在行布局中添加标签
with ui.row():
    ui.label('Label1 in a row')
    ui.label('Label2 in a row')

# 启动 NiceGUI 应用
ui.run()

5. 事件处理：

尽管标签本身不直接支持事件处理（如点击事件），但可以通过其他方式（例如绑定到按钮或其他交互组件）间接地与标签互动。

python 复制代码 
from nicegui import ui

# 创建一个标签和滑块
with ui.column():
    label = ui.label('初始值: 0')
    slider = ui.slider(min=0, max=10, value=0)

# 定义一个函数来更新标签
def update_label():
    label.set_text(f'当前值: {slider.value}')

# 绑定滑块变化事件到更新标签的函数
slider.on('change', update_label)

# 启动 NiceGUI 应用
ui.run()
相关推荐
蒙娜丽宁10 分钟前
《Python OpenCV从菜鸟到高手》——零基础进阶，开启图像处理与计算机视觉的大门！
python·opencv·计算机视觉
光芒再现dev11 分钟前
已解决，部署GPTSoVITS报错‘AsyncRequest‘ object has no attribute ‘_json_response_data‘
运维·python·gpt·语言模型·自然语言处理
好喜欢吃红柚子25 分钟前
万字长文解读空间、通道注意力机制机制和超详细代码逐行分析（SE,CBAM,SGE,CA,ECA,TA）
人工智能·pytorch·python·计算机视觉·cnn
小馒头学python30 分钟前
机器学习是什么？AIGC又是什么？机器学习与AIGC未来科技的双引擎
人工智能·python·机器学习
神奇夜光杯39 分钟前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
千天夜1 小时前
使用UDP协议传输视频流！（分片、缓存）
python·网络协议·udp·视频流
测试界的酸菜鱼1 小时前
Python 大数据展示屏实例
大数据·开发语言·python
羊小猪~~1 小时前
神经网络基础--什么是正向传播？？什么是方向传播？？
人工智能·pytorch·python·深度学习·神经网络·算法·机器学习
放飞自我的Coder1 小时前
【python ROUGE BLEU jiaba.cut NLP常用的指标计算】
python·自然语言处理·bleu·rouge·jieba分词
正义的彬彬侠2 小时前
【scikit-learn 1.2版本后】sklearn.datasets中load_boston报错 使用 fetch_openml 函数来加载波士顿房价
python·机器学习·sklearn
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解