python GUI开发：实现主屏幕控制副屏显示

实现效果

在这里插入图片描述
在这里插入图片描述

实现代码

import tkinter as tk
import threading
import pygetwindow as gw
import subprocess
import cv2
import pygame
import time
import screeninfodef func1():print("影音播放")open_child_window()def func5():print("视频播放")video_path = "C:/Users/Fengzhen/Videos/全向步态视频/侧向步态.mp4"threading.Thread(target=open_video, args=(video_path,)).start()def func6():print("音乐播放")audio_path = "C:/Users/Fengzhen/Videos/music.mp3"threading.Thread(target=open_music, args=(audio_path,)).start()def open_child_window():# 创建子窗口child_window = tk.Toplevel(window)child_window.attributes('-fullscreen', True)  # 设置子窗口为全屏显示child_window.geometry("{0}x{1}+0+0".format(child_window.winfo_screenwidth(), child_window.winfo_screenheight()))  # 设置子窗口大小为屏幕大小# 添加子窗口的内容child_canvas = tk.Canvas(child_window, width=child_window.winfo_screenwidth(),height=child_window.winfo_screenheight())# 在画布上创建背景图像child_canvas.create_image(child_window.winfo_screenwidth() / 2, child_window.winfo_screenheight() / 2,image=scaled_bg_image)# 加载图片按钮图像video_button_image = tk.PhotoImage(file="videoshow.png")music_button_image = tk.PhotoImage(file="music.png")# 缩放图片按钮图像global scaled_video_button_imageglobal scaled_music_button_imagescaled_video_button_image = video_button_image.subsample(1, 1)  # 3倍缩放scaled_music_button_image = music_button_image.subsample(2, 2)# 布局图片按钮button_width = scaled_video_button_image.width()button_height = scaled_video_button_image.height()canvas_center_x = child_window.winfo_screenwidth() // 2button_y = (child_window.winfo_screenheight() - button_height * 2) // 2video_button_x = canvas_center_x - (button_width + 10) * 0.8music_button_x = canvas_center_x + (button_width + 10) * 0.8video_button = tk.Button(child_canvas, image=scaled_video_button_image, command=func5, borderwidth=0,highlightthickness=0)music_button = tk.Button(child_canvas, image=scaled_music_button_image, command=func6, borderwidth=0,highlightthickness=0)# 添加文字说明video_label = tk.Label(child_canvas, text="视频播放", font=("Arial", 20, "bold"), bg=child_canvas["bg"])music_label = tk.Label(child_canvas, text="音乐播放", font=("Arial", 20, "bold"), bg=child_canvas["bg"])# 显示图片按钮和文字说明child_canvas.create_window(video_button_x, button_y, anchor=tk.CENTER, window=video_button)child_canvas.create_window(music_button_x, button_y, anchor=tk.CENTER, window=music_button)child_canvas.create_window(video_button_x, button_y + button_height, anchor=tk.CENTER, window=video_label)child_canvas.create_window(music_button_x, button_y + button_height, anchor=tk.CENTER, window=music_label)# 添加返回主页的按钮home_button_image = tk.PhotoImage(file="return.png")global scaled_home_button_imagescaled_home_button_image = home_button_image.subsample(4, 4)home_button = tk.Button(child_canvas, image=scaled_home_button_image, command=lambda: return_to_home(child_window),borderwidth=0, highlightthickness=0)child_canvas.create_window(canvas_center_x, button_y + button_height * 2 + 20, anchor=tk.CENTER, window=home_button)# 显示画布child_canvas.pack()def return_to_home(child_window):print("返回主页")child_window.destroy()close_video()close_music()def open_video(file_path):try:# 使用cv2读取视频cap = cv2.VideoCapture(file_path)# 创建窗口并设置位置cv2.namedWindow("Video", cv2.WINDOW_NORMAL)# cv2.moveWindow("Video", 3000, 100)cv2.setWindowProperty("Video", cv2.WND_PROP_FULLSCREEN, cv2.WINDOW_FULLSCREEN)while True:ret, frame = cap.read()if not ret:break# 在指定位置显示视频帧cv2.imshow("Video", frame)if cv2.waitKey(1) & 0xFF == ord('q'):breakcap.release()cv2.destroyWindow("Video")except Exception as e:print(e)def close_video():print("关闭视频")# cv2.destroyWindow("Video")def open_music(file_path):try:# 初始化pygamepygame.init()# 设置音频设备pygame.mixer.init()# 加载音乐文件pygame.mixer.music.load(file_path)# 播放音乐pygame.mixer.music.play()# 等待音乐播放完毕while pygame.mixer.music.get_busy():continue# 停止音乐播放pygame.mixer.music.stop()except Exception as e:print(e)def close_music():print("关闭音乐")pygame.mixer.init()pygame.mixer.music.stop()pygame.mixer.quit()pygame.quit()# def func2():
#     print("浏览器")
#     software_path = "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe"
#     subprocess.Popen(software_path)
#     window.attributes("-fullscreen", True)def func2():print("浏览器")software_path = "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe"# software_path = "C:/Program Files (x86)/Thunder Network/Thunder/Program/ThunderStart.exe"# software_path = "D:/Program Files/uvnc bvba/UltraVNC/vncviewer.exe"subprocess.Popen(software_path)# 等待打开的窗口出现time.sleep(0.35)# 获取所有窗口windows = gw.getAllWindows()# 获取副屏幕的尺寸screen = screeninfo.get_monitors()[1]  # 假设副屏幕是第二个屏幕screen_width = screen.widthscreen_height = screen.height# 遍历窗口，找到浏览器窗口for window in windows:# print(window.title)# if "UltraVNC Viewer - 1.4.0.9" in window.title:if "新建标签页" in window.title:# 将浏览器窗口移动到副屏上window.moveTo(3000, 100)# 设置窗口大小为副屏幕大小window.resizeTo(screen_width, screen_height)# 最大化浏览器窗口window.maximize()breakdef func3():print("游戏")software_path = "C:/Program Files (x86)/Thunder Network/Thunder/Program/ThunderStart.exe"subprocess.Popen(software_path)# 等待打开的窗口出现time.sleep(0.35)# 获取所有窗口windows = gw.getAllWindows()# 获取副屏幕的尺寸screen = screeninfo.get_monitors()[1]  # 假设副屏幕是第二个屏幕screen_width = screen.widthscreen_height = screen.height# 遍历窗口，找到指定的窗口for window in windows:print(window.title)if "迅雷" in window.title:  # 替换为你想要找到的窗口标题# 将窗口移动到副屏上window.moveTo(3000, 10)# 设置窗口大小为副屏幕大小window.resizeTo(screen_width, screen_height)# 最大化窗口window.maximize()breakdef func4():print("设置")folder_path = "C:/"  # 替换为你要打开的文件夹路径# 使用 explorer.exe 应用程序打开指定文件夹subprocess.Popen(["explorer.exe", folder_path])# 等待打开的窗口出现time.sleep(0.5)# 获取所有窗口windows = gw.getAllWindows()# 获取副屏幕的尺寸screen = screeninfo.get_monitors()[1]  # 假设副屏幕是第二个屏幕screen_width = screen.widthscreen_height = screen.height# 遍历窗口，找到指定的窗口for window in windows:print(window.title)if "文档" in window.title:  # 替换为你想要找到的窗口标题# 将窗口移动到副屏上window.moveTo(3000, 10)# 设置窗口大小为副屏幕大小window.resizeTo(screen_width, screen_height)# 最大化窗口window.maximize()break# 创建主窗口
window = tk.Tk()# 设置窗口全屏显示
window.attributes('-fullscreen', True)  # 设置窗口为全屏显示
window.geometry("{0}x{1}+0+0".format(window.winfo_screenwidth(), window.winfo_screenheight()))  # 设置窗口大小为屏幕大小# 加载背景图像
background_image = tk.PhotoImage(file="background.png")# 创建画布
canvas_width = window.winfo_screenwidth()  # 获取屏幕宽度
canvas_height = window.winfo_screenheight()  # 获取屏幕高度
canvas = tk.Canvas(window, width=canvas_width, height=canvas_height)# 缩放背景图像
scaled_bg_image = background_image.zoom(2, 2)# 在画布上创建背景图像
canvas.create_image(canvas_width / 2, canvas_height / 2, image=scaled_bg_image)# 加载按钮图像
button1_image = tk.PhotoImage(file="video.png")
button2_image = tk.PhotoImage(file="edge.png")
button3_image = tk.PhotoImage(file="play.png")
button4_image = tk.PhotoImage(file="setting.png")# 缩放按钮图像
scaled_button1_image = button1_image.subsample(2, 2)  # 2倍缩放
scaled_button2_image = button2_image.subsample(2, 2)
scaled_button3_image = button3_image.subsample(2, 2)
scaled_button4_image = button4_image.subsample(2, 2)# 布局图标按钮
button_width = scaled_button1_image.width()
button_height = scaled_button1_image.height()
canvas_center_x = canvas_width // 2
button_y = (canvas_height - button_height * 2) // 2button1_x = canvas_center_x - (button_width + 10) * 2.2
button2_x = canvas_center_x - (button_width + 10) * 0.7
button3_x = canvas_center_x + (button_width + 10) * 0.8
button4_x = canvas_center_x + (button_width + 10) * 2.2button1 = tk.Button(canvas, image=scaled_button1_image, command=func1, borderwidth=0, highlightthickness=0)
button2 = tk.Button(canvas, image=scaled_button2_image, command=func2, borderwidth=0, highlightthickness=0)
button3 = tk.Button(canvas, image=scaled_button3_image, command=func3, borderwidth=0, highlightthickness=0)
button4 = tk.Button(canvas, image=scaled_button4_image, command=func4, borderwidth=0, highlightthickness=0)# 添加文字说明
label1 = tk.Label(canvas, text="影音播放", font=("Arial", 20, "bold"), bg=canvas["bg"])
label2 = tk.Label(canvas, text="浏览器", font=("Arial", 20, "bold"), bg=canvas["bg"])
label3 = tk.Label(canvas, text="游戏", font=("Arial", 20, "bold"), bg=canvas["bg"])
label4 = tk.Label(canvas, text="设置", font=("Arial", 20, "bold"), bg=canvas["bg"])# 显示按钮和文字说明
canvas.create_window(button1_x, button_y, anchor=tk.CENTER, window=button1)
canvas.create_window(button2_x, button_y, anchor=tk.CENTER, window=button2)
canvas.create_window(button3_x, button_y, anchor=tk.CENTER, window=button3)
canvas.create_window(button4_x, button_y, anchor=tk.CENTER, window=button4)canvas.create_window(button1_x, button_y + button_height, anchor=tk.CENTER, window=label1)
canvas.create_window(button2_x, button_y + button_height, anchor=tk.CENTER, window=label2)
canvas.create_window(button3_x, button_y + button_height, anchor=tk.CENTER, window=label3)
canvas.create_window(button4_x, button_y + button_height, anchor=tk.CENTER, window=label4)# 显示画布
canvas.pack()# 运行主循环
window.mainloop()

问题

将ImageTk.PhotoImage()放在函数里图片不显示
不显示图片的代码如下：

def open_child_window():# 创建子窗口child_window = tk.Toplevel(window)child_window.attributes('-fullscreen', True)  # 设置子窗口为全屏显示child_window.geometry("{0}x{1}+0+0".format(child_window.winfo_screenwidth(), child_window.winfo_screenheight()))  # 设置子窗口大小为屏幕大小# 添加子窗口的内容child_canvas = tk.Canvas(child_window, width=child_window.winfo_screenwidth(),height=child_window.winfo_screenheight())# 在画布上创建背景图像child_canvas.create_image(child_window.winfo_screenwidth() / 2, child_window.winfo_screenheight() / 2,image=scaled_bg_image)# 加载图片按钮图像video_button_image = tk.PhotoImage(file="videoshow.png")music_button_image = tk.PhotoImage(file="music.png")# 缩放图片按钮图像scaled_video_button_image = video_button_image.subsample(1, 1)  # 3倍缩放scaled_music_button_image = music_button_image.subsample(2, 2)# 布局图片按钮button_width = scaled_video_button_image.width()button_height = scaled_video_button_image.height()canvas_center_x = child_window.winfo_screenwidth() // 2button_y = (child_window.winfo_screenheight() - button_height * 2) // 2video_button_x = canvas_center_x - (button_width + 10) * 0.8music_button_x = canvas_center_x + (button_width + 10) * 0.8video_button = tk.Button(child_canvas, image=scaled_video_button_image, command=func5, borderwidth=0,highlightthickness=0)music_button = tk.Button(child_canvas, image=scaled_music_button_image, command=func6, borderwidth=0,highlightthickness=0)# 添加文字说明video_label = tk.Label(child_canvas, text="视频播放", font=("Arial", 20, "bold"), bg=child_canvas["bg"])music_label = tk.Label(child_canvas, text="音乐播放", font=("Arial", 20, "bold"), bg=child_canvas["bg"])# 显示图片按钮和文字说明child_canvas.create_window(video_button_x, button_y, anchor=tk.CENTER, window=video_button)child_canvas.create_window(music_button_x, button_y, anchor=tk.CENTER, window=music_button)child_canvas.create_window(video_button_x, button_y + button_height, anchor=tk.CENTER, window=video_label)child_canvas.create_window(music_button_x, button_y + button_height, anchor=tk.CENTER, window=music_label)# 添加返回主页的按钮home_button_image = tk.PhotoImage(file="return.png")scaled_home_button_image = home_button_image.subsample(4, 4)home_button = tk.Button(child_canvas, image=scaled_home_button_image, command=lambda: return_to_home(child_window),borderwidth=0, highlightthickness=0)child_canvas.create_window(canvas_center_x, button_y + button_height * 2 + 20, anchor=tk.CENTER, window=home_button)# 显示画布child_canvas.pack()

运行后，图片并没有显示，究竟是怎么回事？

原因：在调用load_img()函数后，垃圾回收机制会把变量photo给回收了。
解决办法：使用global全局变量。如下（为了做对比，代码用图片展示）：

def open_child_window():# 创建子窗口child_window = tk.Toplevel(window)child_window.attributes('-fullscreen', True)  # 设置子窗口为全屏显示child_window.geometry("{0}x{1}+0+0".format(child_window.winfo_screenwidth(), child_window.winfo_screenheight()))  # 设置子窗口大小为屏幕大小# 添加子窗口的内容child_canvas = tk.Canvas(child_window, width=child_window.winfo_screenwidth(),height=child_window.winfo_screenheight())# 在画布上创建背景图像child_canvas.create_image(child_window.winfo_screenwidth() / 2, child_window.winfo_screenheight() / 2,image=scaled_bg_image)# 加载图片按钮图像video_button_image = tk.PhotoImage(file="videoshow.png")music_button_image = tk.PhotoImage(file="music.png")# 缩放图片按钮图像global scaled_video_button_imageglobal scaled_music_button_imagescaled_video_button_image = video_button_image.subsample(1, 1)  # 3倍缩放scaled_music_button_image = music_button_image.subsample(2, 2)# 布局图片按钮button_width = scaled_video_button_image.width()button_height = scaled_video_button_image.height()canvas_center_x = child_window.winfo_screenwidth() // 2button_y = (child_window.winfo_screenheight() - button_height * 2) // 2video_button_x = canvas_center_x - (button_width + 10) * 0.8music_button_x = canvas_center_x + (button_width + 10) * 0.8video_button = tk.Button(child_canvas, image=scaled_video_button_image, command=func5, borderwidth=0,highlightthickness=0)music_button = tk.Button(child_canvas, image=scaled_music_button_image, command=func6, borderwidth=0,highlightthickness=0)# 添加文字说明video_label = tk.Label(child_canvas, text="视频播放", font=("Arial", 20, "bold"), bg=child_canvas["bg"])music_label = tk.Label(child_canvas, text="音乐播放", font=("Arial", 20, "bold"), bg=child_canvas["bg"])# 显示图片按钮和文字说明child_canvas.create_window(video_button_x, button_y, anchor=tk.CENTER, window=video_button)child_canvas.create_window(music_button_x, button_y, anchor=tk.CENTER, window=music_button)child_canvas.create_window(video_button_x, button_y + button_height, anchor=tk.CENTER, window=video_label)child_canvas.create_window(music_button_x, button_y + button_height, anchor=tk.CENTER, window=music_label)# 添加返回主页的按钮home_button_image = tk.PhotoImage(file="return.png")global scaled_home_button_imagescaled_home_button_image = home_button_image.subsample(4, 4)home_button = tk.Button(child_canvas, image=scaled_home_button_image, command=lambda: return_to_home(child_window),borderwidth=0, highlightthickness=0)child_canvas.create_window(canvas_center_x, button_y + button_height * 2 + 20, anchor=tk.CENTER, window=home_button)# 显示画布child_canvas.pack()

只需要在声明变量scaled_video_button_image、scaled_music_button_image、scaled_home_button_image之前将它设为全局变量即可。
注意：global不要放在函数外面，否则会没效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/624610.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据库系列：InnoDB下实现高并发控制

数据库系列：InnoDB下实现高并发控制

1 介绍 并发控制是为了防止多用户并发使用数据库时造成数据错误和程序运行错误，保证数据的完整性。当多个事务并发地存取数据库时，就会产生同时读取和/或修改同一数据的情况。若对并发操作不加控制就可能会存取和存储不正确的数据，破坏数据库…
阅读更多...
web前端（第二次作业）

web前端（第二次作业）

1、计算用户指定的数值内的奇数和。例如用户输入的是 10&#xff0c;则计算 1 3 5 7 9 的和 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><script>var nprompt("请输入数值&#xff1a;&…
阅读更多...
基于开源组件自主开发工作流引擎系统

基于开源组件自主开发工作流引擎系统

目前基于Java语言开发的主流开源工作流引擎有osworkflow、jbpm、activiti、flowable、camunda。其中osworkflow、jbpm技术较老已经过时&#xff0c;activiti包括activiti5、activiti6、activiti7三个版本&#xff0c;flowable分开源版和商业版&#xff0c;camunda包括camunda7和…
阅读更多...
ETCD 未授权访问实战案例

ETCD 未授权访问实战案例

1、发现 etcd 未授权。 https://xxx200:2379/v2/keys 2、尝试在etcd里查询管理员的token&#xff0c;然后使用该token配合kubectl指令接管集群。 proxychains ./etcdctl --insecure-transportfalse --insecure-skip-tls-verify --endpointshttps://xxx0:2379/ get / --prefix…
阅读更多...
12月威胁态势 | 0day占比超82%！两大勒索家族“均分天下”

12月威胁态势 | 0day占比超82%！两大勒索家族“均分天下”

近日&#xff0c;亚信安全正式发布《亚信安全2023年12月威胁态势报告》&#xff08;以下简称“报告”&#xff09;报告显示&#xff0c;12月份新增安全漏洞1511个&#xff0c; APT 攻防较量日趋复杂&#xff0c;成为网络空间与现实地缘政治融汇交织新的风险点&#xff1b;监测发…
阅读更多...
精品量化公式——“主力拉升”，信号出现股价随时准备拉升

精品量化公式——“主力拉升”，信号出现股价随时准备拉升

► 日线表现 代码评估 技术指标代码评估&#xff1a; 计算变量: HSL1:5;&#xff1a;设置了一个常数变量。 VAR0 到 VAR6&#xff1a;这些变量通过复杂的计算公式来定义&#xff0c;通常涉及收盘价、最高价、最低价、开盘价以及它们的历史数据。 技术指标和信号: 线: VAR6 …
阅读更多...
使用Dockerfile构建镜像的详细指南

使用Dockerfile构建镜像的详细指南

目录 前言 一、什么是 Dockerfile 二、使用 Dockerfile 定制镜像 开始构建镜像 上下文路径 三、指令详解 四、构建阿里云仓库 前言 Docker是一种流行的容器化平台&#xff0c;可以帮助开发人员和运维团队更轻松地构建、发布和运行应用程序。在Docker中&#xff0c;镜像是…
阅读更多...
虾皮开通：如何在虾皮（Shopee）平台上开通店铺详细步骤

虾皮开通：如何在虾皮（Shopee）平台上开通店铺详细步骤

在全球电商市场的竞争中&#xff0c;越来越多的卖家选择在虾皮&#xff08;Shopee&#xff09;平台上开设店铺。作为东南亚地区最大的电子商务平台之一&#xff0c;虾皮提供了一个便捷的销售渠道&#xff0c;吸引了数百万的买家和卖家。如果您想在虾皮上开设自己的店铺&#xf…
阅读更多...
使用官方构建工具来创建一个vue3的项目

使用官方构建工具来创建一个vue3的项目

当你使用 Vite 构建项目时&#xff0c;可能会发现在命令行界面无法选择是否包含 TypeScript 等其他基础配置。此外&#xff0c;使用 vue create 命令创建项目时&#xff0c;默认会使用 vue-cli&#xff0c;但项目启动等过程可能较慢。在这种情况下&#xff0c;你可以参考以下步…
阅读更多...
Matlab论文插图绘制模板第135期—隐函数曲面图(fimplicit3)

Matlab论文插图绘制模板第135期—隐函数曲面图(fimplicit3)

在之前的文章中&#xff0c;分享了Matlab隐函数折线图的绘制模板&#xff1a; 进一步&#xff0c;再来分享一下隐函数曲面图。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『数据代码』已上传资源群中&#xff0c;加群的朋友请自行下载。有需要的朋友可以关…
阅读更多...
CG Magic分享3dmax渲染太亮问题如何解决？

CG Magic分享3dmax渲染太亮问题如何解决？

3D Max软件渲染时&#xff0c;渲染问题较多也是正常的&#xff0c;对于行业小白来说&#xff0c;渲染问题多也是能理解的&#xff0c;因为&#xff0c;小编经常在问答中&#xff0c;看到一些网友提问&#xff0c;3dmax渲染太亮怎么办&#xff1f; 3dmax渲染太亮了怎么回事&…
阅读更多...
pycharm的使用技巧

pycharm的使用技巧

1.新建文件时，自动生成代码 settings->editor->file and code templates，选择python script ${NAME} 文件名 ${DATE} 日期 2.自动补齐自定义段落 settings->editor->live templates，在右侧点击+号，添加自定义的内容 完成之后，在下方勾选python 3.修改注释的…
阅读更多...
就业难，程序员年纪大了怎么办？

就业难，程序员年纪大了怎么办？

程序员作为一项技术工种&#xff0c;年龄的确可能成为职业生涯发展的一大障碍。但年龄并不是决定职业生涯终点的唯一因素&#xff0c;只要保持对技术的热爱、不断学习提升&#xff0c;并积极调整心态&#xff0c;仍有许多出路可以选择。 1. 职业发展路线 随着年龄的增长&#…
阅读更多...
系分备考计算机网络传输介质、通信方式和交换方式

系分备考计算机网络传输介质、通信方式和交换方式

文章目录 1、概述2、传输介质3、网络通信4、网络交换5、总结 1、概述 计算机网路是系统分析师考试的常考知识点&#xff0c;本篇主要记录了知识点&#xff1a;网络传输介质、网络通信和数据交换方式等。 2、传输介质 网络的传输最常见的就是网线&#xff0c;也就是双绞线&…
阅读更多...
开源内容管理系统Wagtail本地安装运行并结合内网穿透实现公网访问

开源内容管理系统Wagtail本地安装运行并结合内网穿透实现公网访问

文章目录 前言1. 安装并运行Wagtail1.1 创建并激活虚拟环境 2. 安装cpolar内网穿透工具3. 实现Wagtail公网访问4. 固定的Wagtail公网地址 前言 Wagtail是一个用Python编写的开源CMS&#xff0c;建立在Django Web框架上。Wagtail 是一个基于 Django 的开源内容管理系统&#xf…
阅读更多...
Arduino| 开发板介绍、编程入门（引脚信号的输入输出）

Arduino| 开发板介绍、编程入门（引脚信号的输入输出）

Arduino开发板介绍、编程入门 开发板介绍编程入门setup和loop函数引脚信号输入输出数字信号模拟信号 开发板介绍 下面是一张Ardunio Uno R3的引脚图&#xff0c;包含14个数字引脚、6个模拟输入、电源插孔、USB连接和ICSP插头等。 14个数字引脚&#xff1a; Serial&#xff…
阅读更多...
React项目搭建流程

React项目搭建流程

第一步 利用脚手架创建ts类型的react项目&#xff1a; 执行如下的命令&#xff1a;create-react-app myDemo --template typescript &#xff1b; 第二步 清理项目目录结构&#xff1a; src/ index.tsx, app.txs, react-app-env.d.ts public/index.ht…
阅读更多...
基于树莓派5（Raspberry Pi 5）的高性能工业平板电脑升级版！

基于树莓派5（Raspberry Pi 5）的高性能工业平板电脑升级版！

​ 上海晶珩继推出首个搭载 Raspberry Pi 5 的平板电脑ED-HMI3010系列后&#xff0c;又推出了具备高性能和多功能特性的 Raspberry Pi 5 的平板电脑ED-HMI3020系列。ED-HMI3020支持选择7英寸和10.1英寸两种尺寸的触摸屏&#xff0c;可选配 M.2 NVMe SSD 存储扩展&#xff0c;提…
阅读更多...
CSS实现元素水平垂直居中几种方案

CSS实现元素水平垂直居中几种方案

方案一&#xff1a;利用 display: inline-block; vertical-align: middle; <div class"box"> <div></div> <span></span> </div> .box { width: 500px; height: 500px; background-color: red; text-align: center; } .box div …
阅读更多...
修改vscode内置Vue VSCode Snippets(代码片段)

修改vscode内置Vue VSCode Snippets(代码片段)

打开插件文件夹 文件夹名是 "作者名.vscode-插件名-版本号"组成的. C:\Users\Administrator\.vscode\extensions\sdras.vue-vscode-snippets-3.1.1\snippets 打开vue.json "prefix": "vbase" 就是代码块的关键词,输入vbase就会提示代码块 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023