当前位置: 首页 > article >正文

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

传奇开心果微博文系列

    • 前言
    • 一、button 组件基本用法
      • 1. 最基本用法示例
      • 2. 创建带图标按钮
    • 二、button按钮组件样式定制
      • 1. 按钮的尺寸调整
      • 2. 改变颜色示例
      • 3. 按钮的自定义字体大小
      • 4. 圆角形状示例
      • 5. 自定义边框
      • 6. 添加阴影
      • 7. 复合按钮
      • 8. 浮动按钮
      • 9. 可扩展浮动操作按钮QFAB
      • 10. 按钮的CSS自定义样式
      • 11. 使用css自定义鼠标悬停、离开和单击颜色变化实现按钮交互
      • 12. 按钮组
    • 三、按钮事件示例
      • 1. 禁用状态示例
      • 2. 动态切换禁用状态
      • 3. 带有上下文管理器的 Disable 按钮
      • 4. 加载状态示例
      • 5. 工具提示 (Tooltip)
      • 6. 用户界面通知
      • 7. 按钮的动画效果
      • 8.自定义鼠标悬停按钮和离开按钮触发不同事件,鼠标指针也发生变化
      • 9. 提交表单按钮
      • 10. 导航按钮导航到其他页面
      • 11. 执行命令
      • 12. 按钮之间交互
      • 13. 切换按钮ToggleButton
      • 14. 异步操作
      • 15. 等待按钮await
  • 四、归纳知识点
      • (一)button组件样式设定知识点归纳:
      • (二)button组件事件知识点归纳:

前言

NiceGUI 的 button 组件主要用于创建用户界面中的按钮元素。按钮是用户界面设计中最常见的交互元素之一,它允许用户通过点击来执行某些动作或触发特定的功能。
在 NiceGUI 中,button 组件具有以下作用:

用户交互:用户可以通过点击按钮来与应用程序进行交互。例如,在表单中提交数据、导航到其他页面、执行命令等。

事件触发:按钮可以绑定到事件处理器(回调函数),当用户点击按钮时,这些函数将会被执行。这使得开发者能够编写逻辑来响应用户的操作。

界面控制:按钮可以用来控制其他 UI 元素的状态或显示内容的变化。例如,显示或隐藏其他组件,切换不同的视图等。

样式定制:可以根据需要自定义按钮的外观,包括文本、图标、颜色、大小等属性,以适应不同的设计需求。

状态反馈:按钮可以根据其当前状态显示不同的视觉效果,如禁用状态、激活状态等,为用户提供明确的操作反馈。

使用 NiceGUI 的 button 组件时,可以通过 Python 代码轻松地创建按钮,并将其集成到更复杂的用户界面布局中。此外,还可以利用 NiceGUI 提供的各种功能来增强按钮的功能性和可用性。

一、button 组件基本用法

1. 最基本用法示例

from nicegui import ui

def on_click():
    print('Button clicked!')

ui.button('Click me', on_click=on_click)

ui.run()

创建一个简单的 GUI 界面,其中包含一个按钮。当用户点击这个按钮时,控制台将输出 “Button clicked!”。
在这里插入图片描述

2. 创建带图标按钮

from nicegui import ui

def on_click():
    print('Button clicked!')

# 使用 Material Icons
button1 = ui.button('Click me', on_click=on_click)
button1.props('icon=home')

# 使用自定义图标
with ui.button('Click me', on_click=on_click):
    ui.icon('home')

ui.run()

在这个示例中,我们创建了两个按钮,一个使用 props 方法设置 Material Icons 图标,另一个使用 ui.icon 组件设置自定义图标。运行这段代码后,你会看到两个带有图标的按钮,并且点击按钮时会在控制台输出 “Button clicked!”。
在这里插入图片描述

二、button按钮组件样式定制

1. 按钮的尺寸调整

from nicegui import ui

def on_click():
    print('Button clicked!')

# 不同尺寸的按钮
button1 = ui.button('Large Button', on_click=on_click)
button1.props('size=lg')

button2 = ui.button('Small Button', on_click=on_click)
button2.props('size=sm')

ui.run()

可以设置按钮的不同尺寸。
在这里插入图片描述

2. 改变颜色示例

from nicegui import ui

def on_click():
    print('Button clicked!')

# 自定义样式
button1 = ui.button('Custom Button', on_click=on_click)
button1.props('color=yellow size=lg')

ui.run()

可以通过 props 方法来定制按钮的样式,例如改变颜色、大小等。
在这里插入图片描述

3. 按钮的自定义字体大小

from nicegui import ui

def on_click():
    print('Button clicked!')

# 自定义字体大小
button = ui.button('Custom Button', on_click=on_click)
button.style('font-size: 18px')

ui.run()

可以设置按钮的字体大小。
在这里插入图片描述

4. 圆角形状示例

from nicegui import ui

def on_click():
    print('Button clicked!')

# 圆形按钮
button = ui.button('C', on_click=on_click)
button.props('round')

# 圆角按钮
button = ui.button('Click me', on_click=on_click)
button.props('rounded')

ui.run()

可以设置按钮为圆形或圆角形状。
在这里插入图片描述

5. 自定义边框

from nicegui import ui

def on_click():
    print('Button clicked!')

# 自定义边框
button = ui.button('Custom Button', on_click=on_click)
button.style('border: 2px solid red')

ui.run()

关键点解释:

button.style('border: 2px solid red')

这行代码设置了按钮的样式,具体来说是设置了按钮的边框样式。
border: 设置边框样式。
2px: 边框宽度为 2 像素。
solid: 边框类型为实线。
red: 边框颜色为红色。
在这里插入图片描述

6. 添加阴影

from nicegui import ui

def on_click():
    print('Button clicked!')

# 自定义边框和阴影
button = ui.button('Custom Button', on_click=on_click)
button.style('border: 2px solid red; border-radius: 5px; padding: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);')

ui.run()

关键点解释:

运行这段代码后,你会看到一个带有红色边框、圆角、内边距和更深阴影效果的按钮。具体效果如下:

按钮的边框宽度为 2px,边框类型为实线,边框颜色为红色。
按钮的圆角半径为 5px。
按钮的内边距为 10px。
按钮的阴影效果为水平偏移量 0px,垂直偏移量 8px,模糊半径 16px,阴影颜色为黑色,透明度为 0.5。
在这里插入图片描述

7. 复合按钮

from nicegui import ui

def on_click():
    print('Button clicked!')

# 复合按钮
with ui.button('Composite Button', on_click=on_click):
    ui.icon('home')
    ui.label('Label')

ui.run()

可以将多个元素组合在一起,形成复合按钮。
在这里插入图片描述

8. 浮动按钮

from nicegui import ui

def on_click():
    print('Button clicked!')

# 浮动按钮
button = ui.button('', on_click=on_click)
button.props('fab icon=add')

ui.run()

可以创建浮动按钮,常用于移动应用界面中。
在这里插入图片描述

9. 可扩展浮动操作按钮QFAB

from nicegui import ui

# 使用紫色图标和按钮
with ui.element('q-fab').props('icon=menu color=purple'):
    ui.element('q-fab-action').props('icon=subway color=purple') \
        .on('click', lambda: ui.notify('subway'))
    ui.element('q-fab-action').props('icon=rowing color=purple') \
        .on('click', lambda: ui.notify('rowing'))
    ui.element('q-fab-action').props('icon=satellite color=purple') \
        .on('click', lambda: ui.notify('satellite'))

ui.run()

是一个按钮,单击时会显示多个操作
在这里插入图片描述

10. 按钮的CSS自定义样式

from nicegui import ui

ui.add_css('''
.custom-button {
    background-color:Purple ; /* 紫色背景 */
    color: white;          /* 白色文字 */
    border: none;              /* 无边框 */
    padding: 10px 20px;       /* 内边距 */
    text-align: center;        /* 文本居中 */
    text-decoration: none;     /* 无下划线 */
    display: inline-block;     /* 行内块元素 */
    font-size: 16px;          /* 字体大小 */
    margin: 4px 2px;          /* 外边距 */
    cursor: pointer;           /* 鼠标指针 */
    border-radius: 5px;       /* 圆角 */
}
''')

# 使用 HTML 添加按钮
ui.html('<button class="custom-button">自定义按钮</button>')

ui.run()

使用 ui.html() 方法来创建一个更灵活的按钮样式,用 CSS 来自定义按钮的样式。
在这里插入图片描述

11. 使用css自定义鼠标悬停、离开和单击颜色变化实现按钮交互

from nicegui import ui

ui.add_css('''
.custom-button {
    background-color: Purple; /* 默认紫色背景 */
    color: white;             /* 白色文字 */
    border: none;             /* 无边框 */
    padding: 10px 20px;      /* 内边距 */
    text-align: center;       /* 文本居中 */
    text-decoration: none;    /* 无下划线 */
    display: inline-block;    /* 行内块元素 */
    font-size: 16px;         /* 字体大小 */
    margin: 4px 2px;         /* 外边距 */
    cursor: pointer;          /* 鼠标指针 */
    border-radius: 5px;      /* 圆角 */
    transition: background-color 0.3s; /* 平滑过渡效果:背景颜色变化时持续 0.3 秒  */
}

.custom-button:hover {
    background-color: DarkOrchid; /* 鼠标悬停时背景颜色变为深紫色 */
}

.custom-button:active {
    background-color: BlueViolet; /* 鼠标点击时背景颜色变为蓝紫色 */
}
''')

# 使用 HTML 添加按钮
ui.html('<button class="custom-button">自定义按钮</button>')

ui.run()

12. 按钮组

from nicegui import ui

def on_click1():
    print('Button 1 clicked!')

def on_click2():
    print('Button 2 clicked!')

# 按钮组
with ui.row():
    ui.button('Button 1', on_click=on_click1)
    ui.button('Button 2', on_click=on_click2)

ui.run()

可以创建一组按钮,每个按钮都有不同的功能。
在这里插入图片描述

三、按钮事件示例

1. 禁用状态示例

from nicegui import ui

def on_click():
    print('Button clicked!')

# 禁用按钮
button2 = ui.button('Disabled Button', on_click=on_click)
button2.props('disabled')

ui.run()

可以设置按钮为禁用状态,使其不可点击。
在这里插入图片描述

2. 动态切换禁用状态

from nicegui import ui

def toggle_button():
    if button.disabled:
        button.props(remove='disabled')
    else:
        button.props('disabled')

def on_click():
    print('Button clicked!')

# 动态切换禁用状态
button = ui.button('Toggle', on_click=toggle_button)
button.props('disabled')

ui.run()

可以动态切换按钮的禁用状态。
在这里插入图片描述

3. 带有上下文管理器的 Disable 按钮

import httpx
from contextlib import contextmanager
from nicegui import ui

@contextmanager
def disable(button: ui.button):
    button.disable()
    try:
        yield
    finally:
        button.enable()

async def get_slow_response(button: ui.button) -> None:
    with disable(button):
        async with httpx.AsyncClient() as client:
            response = await client.get('https://httpbin.org/delay/1', timeout=5)
            ui.notify(f'Response code: {response.status_code}')

ui.button('响应缓慢', on_click=lambda e: get_slow_response(e.sender))

ui.run()

一个上下文管理器,可用于在异步进程期间禁用按钮。

4. 加载状态示例

from nicegui import ui

def on_click():
    print('Button clicked!')

# 加载状态
button3 = ui.button('Loading Button', on_click=on_click)
button3.props('loading')

ui.run()

可以在按钮上显示加载状态,通常用于长时间操作。
在这里插入图片描述

5. 工具提示 (Tooltip)

from nicegui import ui

def on_click():
    print('Button clicked!')

# 添加工具提示
button = ui.button('Click me', on_click=on_click)
button.tooltip('Click to perform an action')

ui.run()

可以为按钮添加工具提示,当鼠标悬停在按钮上时显示提示信息。
在这里插入图片描述

6. 用户界面通知

from nicegui import ui

# 创建一个按钮,并设置文本为 'Press me!'
button = ui.button('Press me!', on_click=lambda: 
                   ui.notify('Button was pressed!')
                   )

# 启动 NiceGUI 应用
ui.run()

单击按钮在用户界面中显示通知或提示。

在这里插入图片描述

7. 按钮的动画效果

from nicegui import ui

def on_click():
    print('Button clicked!')

# 动画效果
button = ui.button('Click me', on_click=on_click)
button.props('transition=fade-transition')

ui.run()

可以为按钮添加动画效果,比如,按钮单击有光晕扩散效果。
在这里插入图片描述

8.自定义鼠标悬停按钮和离开按钮触发不同事件,鼠标指针也发生变化

from nicegui import ui

def on_click():
    print('Button clicked!')

def on_mouseover():
    print('Mouse over button')

def on_mouseout():
    print('Mouse out button')

# 自定义事件
button = ui.button('Custom Button', on_click=on_click)
button.on('mouseover', on_mouseover)
button.on('mouseout', on_mouseout)

ui.run()

在这里插入图片描述

9. 提交表单按钮

from nicegui import ui
def submit_form():
    print(f"Form submitted with data: {name.value}")
    status.text = 'Form submitted successfully!'

# 创建表单
with ui.card():
    name = ui.input(label='Name')
    submit_button = ui.button('Submit', on_click=submit_form)
    status = ui.label()
    
ui.run()

提交表单数据
在这里插入图片描述

10. 导航按钮导航到其他页面

from nicegui import ui

# 创建按钮导航界面
with ui.row():
    ui.button('返回', on_click=ui.navigate.back)  # 返回上一页
    ui.button('前进', on_click=ui.navigate.forward)  # 前往下一页
    ui.button(icon='savings',
              on_click=lambda: ui.navigate.to('https://blog.csdn.net/jackchuanqi?spm=1003.2105.3001.5343'))  # 前往 GitHub Sponsors 页面

# 启动应用
ui.run()

导航到其他页面
在这里插入图片描述
在这里插入图片描述

11. 执行命令

from nicegui import ui

def execute_command():
    print('Command executed!')

# 创建执行命令的按钮
command_button = ui.button('Execute Command', on_click=execute_command)

ui.run()

按钮可以执行命令
在这里插入图片描述

12. 按钮之间交互

from nicegui import ui

# 初始化按钮状态
button_a = None
button_b = None

def show_button_b():
    global button_a, button_b
    if button_b is not None:
        button_b.visible = True
        button_a.disable()

def show_button_a():
    global button_a, button_b
    if button_a is not None:
        button_b.visible = False
        button_a.enable()

# 创建按钮 A
button_a = ui.button('Button A', on_click=show_button_b)
button_a.style('border: 2px solid red; border-radius: 5px; padding: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);')

# 创建按钮 B,并初始隐藏
button_b = ui.button('Button B', on_click=show_button_a)
button_b.visible = False
button_b.style('border: 2px solid blue; border-radius: 5px; padding: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);')

ui.run()

关键点解释:
运行这段代码后,你会看到以下效果:

初始状态下,只有按钮 A 显示。
点击按钮 A 后,按钮 B 显示并且按钮 A 被禁用。
点击按钮 B 后,按钮 A 显示并且按钮 B 被隐藏。
可视化效果
当你运行这段代码并打开浏览器时,你会看到一个交互式的按钮界面,实现了按钮 A 和按钮 B 之间的切换。
在这里插入图片描述
在这里插入图片描述

13. 切换按钮ToggleButton

from nicegui import ui

class ToggleButton(ui.button):

    def __init__(self, *args, **kwargs) -> None:
        super().__init__(*args, **kwargs)
        self._state = False
        self.on('click', self.toggle)

    def toggle(self) -> None:
        """Toggle the button state."""
        self._state = not self._state
        self.update()

    def update(self) -> None:
        self.props(f'color={"yellow" if self._state else "red"}')
        super().update()

ToggleButton('Toggle me')

ui.run()

14. 异步操作

from nicegui import ui
import asyncio

async def load_data():
    await asyncio.sleep(2)
    print('Data loaded successfully!')
    loading_button.props(remove='loading')

loading_button = ui.button('Load Data', on_click=lambda: asyncio.create_task(load_data()))
loading_button.props('loading')

ui.run()

模拟异步加载数据,并在加载完成后移除按钮上的加载状态。
在这里插入图片描述

15. 等待按钮await

from nicegui import ui  

@ui.page('/')  
async def index():  
    b = ui.button('点击我')  # 创建一个按钮  
    await b.clicked()  # 第一次点击按钮  
    ui.label('开始')  # 显示 "开始"  
    await b.clicked()  # 第二次点击按钮  
    ui.label('继续')  # 显示 "继续"  
    await b.clicked()  # 第三次点击按钮  
    ui.label('完成')  # 显示 "完成"  

ui.run()

await 用于等待按钮点击事件,以顺序处理用户交互并更新界面状态。每次点击都会触发后续的代码逻辑。

四、归纳知识点

(一)button组件样式设定知识点归纳:

在使用 nicegui 框架时,对按钮(Button)组件进行样式定制是非常常见的需求。下面是一些关于如何使用 nicegui 的 Button 组件并对其进行样式设置的方法总结:

  1. 基本样式
    默认样式:按钮默认具有一定的样式,如背景色、边框等。
    文本颜色:可以通过 props 设置文本颜色。
  2. 使用 props 自定义样式
    圆角:rounded
    平面风格:flat
    无边框:outline
    阴影效果:elevated
    填充模式:unelevated
    图标按钮:icon
  3. 颜色设置
    主色:primary
    次色:secondary
    成功色:success
    警告色:warning
    错误色:error
    信息色:info
  4. 大小调整
    小尺寸:small
    正常尺寸:default
    大尺寸:large
  5. 状态样式
    激活状态:active
    禁用状态:disabled
  6. 自定义 CSS 类
    如果上述预设样式不能满足需求,可以使用自定义 CSS 类来进一步定制按钮的外观。例如:
ui.button('点击我', on_click=some_function).classes('bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded')

这里,classes 方法用于添加自定义的 CSS 类,可以控制背景色、悬停效果、文字颜色等。

  1. 添加图标
    按钮上也可以添加图标:
ui.button('点击我', icon='add').props('icon=mdi-plus')

通过以上方法,你可以根据实际项目需求灵活地调整 nicegui 中按钮的样式。注意,具体可用的属性和方法可能会随着库版本更新而有所变化,请参考最新的官方文档获取最准确的信息。

(二)button组件事件知识点归纳:

在 nicegui 框架中,按钮(Button)组件提供了多种事件处理机制,可以帮助开发者实现丰富的交互功能。以下是关于 nicegui 中按钮组件事件的一些知识点归纳:

  1. 点击事件 (on_click)
    这是最常见的事件,当用户点击按钮时触发。可以通过 on_click 参数绑定一个回调函数。

示例代码:

def handle_click():
    print("按钮被点击了!")

ui.button('点击我', on_click=handle_click)
  1. 双击事件 (on_double_click)
    当用户双击按钮时触发。同样可以通过 on_double_click 参数绑定一个回调函数。

示例代码:

def handle_double_click():
    print("按钮被双击了!")

ui.button('双击我', on_double_click=handle_double_click)
  1. 鼠标悬停事件 (on_mouse_enter, on_mouse_leave)
    这些事件分别在鼠标进入按钮区域和离开按钮区域时触发。

示例代码:

def handle_mouse_enter():
    print("鼠标进入按钮区域")

def handle_mouse_leave():
    print("鼠标离开按钮区域")

ui.button('悬停测试', on_mouse_enter=handle_mouse_enter, on_mouse_leave=handle_mouse_leave)
  1. 鼠标按下事件 (on_mouse_down)
    当鼠标在按钮上按下时触发。

示例代码:

def handle_mouse_down():
    print("鼠标在按钮上按下")

ui.button('按下测试', on_mouse_down=handle_mouse_down)
  1. 鼠标释放事件 (on_mouse_up)
    当鼠标在按钮上释放时触发。

示例代码:

def handle_mouse_up():
    print("鼠标在按钮上释放")

ui.button('释放测试', on_mouse_up=handle_mouse_up)
  1. 键盘事件 (on_key_down, on_key_up)
    这些事件分别在键盘按键按下和释放时触发。

示例代码:

def handle_key_down(event):
    print(f"按键 {event.key} 被按下")

def handle_key_up(event):
    print(f"按键 {event.key} 被释放")

ui.button('键盘测试', on_key_down=handle_key_down, on_key_up=handle_key_up)
  1. 其他事件
    还有一些其他常用的事件,如:

on_focus: 当按钮获得焦点时触发。
on_blur: 当按钮失去焦点时触发。
示例代码:

def handle_focus():
    print("按钮获得焦点")

def handle_blur():
    print("按钮失去焦点")

ui.button('焦点测试', on_focus=handle_focus, on_blur=handle_blur)

通过以上事件,你可以实现丰富的按钮交互功能。在实际开发过程中,可以根据具体需求选择合适的事件处理机制,以提升用户体验。注意,具体可用的事件和参数可能会随着库版本更新而有所变化,请参考最新的官方文档获取最准确的信息。


http://www.kler.cn/a/331250.html

相关文章:

  • Xcode 16 编译弹窗问题、编译通过无法,编译通过打包等问题汇总
  • 动态规划<四> 回文串问题(含对应LeetcodeOJ题)
  • vue3入门教程:ref函数
  • sqoop的参数有哪些?
  • amazon广告授权
  • jsp中的四个域对象(Spring MVC)
  • 深入理解 CSS 浮动(Float):详尽指南
  • B 私域模式升级:开源技术助力传统经销体系转型
  • C(十)for循环 --- 黑神话情景
  • R语言Shiny包新手教程
  • MongoDB伪分布式部署(mac M2)
  • Bilibili视频如何保存到本地
  • OpenHarmony(鸿蒙南向开发)——小型系统芯片移植指南(一)
  • 基于微信小程序的校园失物招领系统的设计与实现(论文+源码)_kaic
  • 强化学习核心概念与公式总结
  • 前端登录页面验证码
  • 事件相机(event camera)数据常见处理方法总结
  • 2023_Spark_实验九:编写WordCount程序(Scala版)
  • 在C#中使用Redis实现高效消息队列
  • 物理学基础精解【44】
  • [leetcode]674_最长连续递增序列
  • JavaScript实现接口请求的超时机制方法汇总
  • AIOps案例 | 历史库异常,如何快速响应与优化?
  • 【大数据入门 | Hive】Join语句
  • CSS 盒子属性
  • 霍夫曼树及其与B树和决策树的异同