【易上手快捷开发新框架技术】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 组件并对其进行样式设置的方法总结：

基本样式
默认样式：按钮默认具有一定的样式，如背景色、边框等。
文本颜色：可以通过 props 设置文本颜色。
使用 props 自定义样式
圆角：rounded
平面风格：flat
无边框：outline
阴影效果：elevated
填充模式：unelevated
图标按钮：icon
颜色设置
主色：primary
次色：secondary
成功色：success
警告色：warning
错误色：error
信息色：info
大小调整
小尺寸：small
正常尺寸：default
大尺寸：large
状态样式
激活状态：active
禁用状态：disabled
自定义 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 类，可以控制背景色、悬停效果、文字颜色等。

添加图标
按钮上也可以添加图标：

ui.button('点击我', icon='add').props('icon=mdi-plus')

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

（二）button组件事件知识点归纳：

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

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

示例代码：

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

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

双击事件 (on_double_click)
当用户双击按钮时触发。同样可以通过 on_double_click 参数绑定一个回调函数。

示例代码：

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

ui.button('双击我', on_double_click=handle_double_click)

鼠标悬停事件 (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)

鼠标按下事件 (on_mouse_down)
当鼠标在按钮上按下时触发。

示例代码：

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

ui.button('按下测试', on_mouse_down=handle_mouse_down)

鼠标释放事件 (on_mouse_up)
当鼠标在按钮上释放时触发。

示例代码：

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

ui.button('释放测试', on_mouse_up=handle_mouse_up)

键盘事件 (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)

其他事件
还有一些其他常用的事件，如：

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

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

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

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

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