项目推荐：指针切换器

小编的inscode部署项目：割绳子游戏。

更多精彩内容见InsCode - 让你的灵感立刻落地~

介绍一下项目。

引言

在现代用户界面设计中，鼠标指针的样式和行为对用户体验有着重要的影响。传统的鼠标指针样式（如箭头、手形、等待图标等）已经广泛应用于各种应用程序中，但随着技术的发展和用户需求的多样化，越来越多的开发者开始探索和实现自定义鼠标指针，以提升应用的独特性和功能性。本文将详细介绍一个使用 Streamlit 创建的“超级增强版多功能鼠标指针更换器”项目，该项目不仅涵盖了常见的鼠标指针样式，还引入了多种自定义和非标准的指针类型，旨在为用户提供丰富的交互体验。

项目概述

项目背景

Streamlit 是一个用于快速创建数据应用的 Python 库，它允许开发者使用简单的 Python 代码创建复杂的 Web 应用。Streamlit 的优势在于其简洁的语法和强大的功能，使得开发者可以专注于业务逻辑，而无需关心底层的 Web 开发细节。在这个项目中，我们将利用 Streamlit 的这些特性，创建一个功能丰富、易于使用的鼠标指针更换器。

项目目标

1. 提供多种鼠标指针样式：包括常见的标准指针类型和自定义的非标准指针类型。
2. 用户友好的界面：通过按钮和文字提示，让用户轻松切换不同的鼠标指针样式。
3. 扩展性和灵活性：支持添加更多的指针类型，以便未来扩展。
4. 教育意义：通过实际项目，展示如何使用 Streamlit 和 CSS 实现复杂的 UI 功能。

代码详解

导入库

python

import streamlit as st

首先，我们导入 Streamlit 库。Streamlit 是一个强大的工具，用于创建数据应用和 Web 界面。通过导入 st，我们可以使用 Streamlit 提供的各种功能。

定义更改鼠标指针的函数

python

def change_cursor(cursor_type): st.markdown(f'<style>body {{ cursor: {cursor_type}; }}</style>', unsafe_allow_html=True)

change_cursor 函数用于更改页面的鼠标指针样式。它接受一个参数 cursor_type，表示要设置的鼠标指针类型。通过 st.markdown 函数，我们可以插入包含 CSS 样式的 HTML 代码，从而动态地更改鼠标指针。unsafe_allow_html=True 参数允许插入未转义的 HTML 内容，这对于设置 CSS 样式是必需的。

定义恢复默认指针的函数

python

def restore_default_cursor(): st.markdown('<style>body { cursor: auto; }</style>', unsafe_allow_html=True)

restore_default_cursor 函数用于恢复页面的默认鼠标指针样式。它通过设置 cursor: auto; 来恢复默认的箭头指针。

创建 Streamlit 应用

python

st.title("超级增强版多功能鼠标指针更换器")

使用 st.title 设置应用的标题，让用户一目了然地知道这是一个鼠标指针更换器。

新增五种指针类型

python

if st.button("更改为禁止操作"): change_cursor("not-allowed") st.write("鼠标指针已更改为禁止操作状态。") if st.button("垂直文本编辑"): change_cursor("vertical-text") st.write("鼠标指针已更改为垂直文本编辑模式。") if st.button("细胞选择（用于电子表格）"): change_cursor("cell") st.write("模拟为电子表格中的单元格选择状态。") if st.button("喷枪模式"): change_cursor("spraypaint") st.write("模拟喷枪模式，常用于绘图应用。") if st.button("游戏控制器（示例）"): # 非标准类型 change_cursor("url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iNSIvPjxnIGlkPSJDaGFuZ2VNYXNrIj48cGF0aCBkPSJNMCAxMUgyNEwxOCAxMEgyNEExIDEyIDEwIDE4IDExIDE4WiIgc3Ryb2tlPSIjMDAzMDMwIiBzdHJva2Utd2lkdGg9IjEuMCIvPjwvZz48L3N2Zz4=)") st.write("模拟游戏控制器指针，非标准类型仅供参考。")

这里我们新增了五种鼠标指针类型，每个类型都对应一个按钮。当用户点击按钮时，调用 change_cursor 函数更改鼠标指针，并使用 st.write 显示一条消息，告知用户当前的鼠标指针状态。

• 禁止操作：使用 not-allowed 指针，表示当前操作被禁止。
• 垂直文本编辑：使用 vertical-text 指针，表示垂直文本编辑模式。
• 细胞选择：使用 cell 指针，模拟电子表格中的单元格选择状态。
• 喷枪模式：使用 spraypaint 指针，常用于绘图应用。
• 游戏控制器：使用自定义的 SVG 图像作为指针，模拟游戏控制器。这里使用了 Base64 编码的 SVG 数据。

保留原有和新增功能

python

if st.button("更改为忙碌（wait）"): change_cursor("wait") st.write("鼠标指针已更改为忙碌状态。") if st.button("更改为十字光标（crosshair）"): change_cursor("crosshair") st.write("鼠标指针已更改为十字光标。") if st.button("更改为帮助（help）"): change_cursor("help") st.write("鼠标指针已更改为帮助标志。") if st.button("更改为移动（move）"): change_cursor("move") st.write("鼠标指针已更改为移动图标。") if st.button("更改为链接（link）"): change_cursor("link") st.write("鼠标指针已更改为链接样式。") if st.button("更改为抓手（grab）"): change_cursor("grab") st.write("鼠标指针已更改为抓手状态，适合拖拽操作。")

这里保留了一些常见的鼠标指针类型，并为每个类型添加了一个按钮。当用户点击按钮时，调用 change_cursor 函数更改鼠标指针，并使用 st.write 显示一条消息，告知用户当前的鼠标指针状态。

• 忙碌：使用 wait 指针，表示系统正在忙于处理某个任务。
• 十字光标：使用 crosshair 指针，常用于绘图和图像编辑。
• 帮助：使用 help 指针，表示用户可以获取帮助信息。
• 移动：使用 move 指针，表示用户可以拖动对象。
• 链接：使用 link 指针，表示用户可以点击链接。
• 抓手：使用 grab 指针，表示用户可以抓取和拖动对象。

自定义或不标准的鼠标指针类型展示

python

if st.button("模拟进行中（progress，非标准）"): change_cursor("progress") # 虽然非标准，但用于演示 st.write("模拟鼠标指针更改为进行中的状态。")

这里添加了一个非标准的鼠标指针类型 progress，虽然这不是一个标准的 CSS 指针类型，但可以用于演示目的。当用户点击按钮时，调用 change_cursor 函数更改鼠标指针，并使用 st.write 显示一条消息，告知用户当前的鼠标指针状态。

恢复默认鼠标指针

python

if st.button("恢复默认鼠标指针"): restore_default_cursor() st.write("鼠标指针已恢复为默认状态。")

最后，添加一个按钮用于恢复默认的鼠标指针。当用户点击按钮时，调用 restore_default_cursor 函数恢复默认指针，并使用 st.write 显示一条消息，告知用户当前的鼠标指针状态。

项目运行

启动应用

在终端中运行以下命令来启动 Streamlit 应用：

sh

streamlit run mouse_pointer_changer.py

打开浏览器并访问显示的 URL（通常是 http://localhost:8501），你应该能看到一个简单的 Streamlit 应用，点击按钮可以更改和恢复鼠标指针。

项目扩展

添加更多指针类型

你可以根据需要添加更多的鼠标指针类型。只需在代码中添加新的按钮，并调用 change_cursor 函数即可。例如：

python

if st.button("更改为复制（copy）"): change_cursor("copy") st.write("鼠标指针已更改为复制状态。")

支持自定义指针文件

如果你有自定义的指针文件（如 .cur 或 .png），可以将其上传到项目目录中，并在 change_cursor 函数中使用 url 属性引用这些文件。例如：

python

if st.button("更改为自定义指针"): change_cursor("url(path/to/your/custom_cursor.cur), auto") st.write("鼠标指针已更改为自定义指针。")

结论

通过这个项目，我们展示了如何使用 Streamlit 和 CSS 创建一个功能丰富的鼠标指针更换器。这个项目不仅涵盖了常见的标准指针类型，还引入了多种自定义和非标准的指针类型，为用户提供丰富的交互体验。通过简单的 Python 代码，我们可以轻松实现复杂的 UI 功能，这正是 Streamlit 的强大之处。希望这个项目能为你的开发工作带来灵感，帮助你创建更多有趣和实用的应用。

运行截图。。。