零基础 + AI ，现阶段能做到快速界面复制+美化吗？

志字辈小蚂蚁
2,858 阅读6分钟

一. 前言

一个应用要好用 ，第一点就是要好看 ，看起来又土又旧的应用 ，可能大家都不会看一眼。

之前有几篇已经简单的梳理了一下 PyQT 如何进行布局的方式 ，这一篇我们换一种思路 ，能否让界面美化借助 AI 变得更简单。

PyQT 界面布局 ，常用的布局技巧都在这里了

PyQT 的美化 : 人们总是会被好看的事物所吸引

二. 我们要解决什么问题 ？

❓ 首先要有一个认知 ，PyQT 里面有两种核心的界面管理方式 ：

  • 布局管理器 ： 建筑结构 ，负责支撑整个建筑的形状和结构
  • QSS ： 内部的装潢和装饰，它决定了空间的美观程度和个性化风格

我们只要解决了这两个问题 ，那么一个应用基本上就搭建完成 ，后续进行内容的完善就行了。

为了完成这些 ，我们需要尝试做这些事 ： 我需要 AI 尽可能的给我搭建出布局 ，然后基于我给的图片生成 QSS.

三. 0 基础时 ，AI 做多能帮我们做到多少 ？

❓ 现在看完这两个用法 ，我们需要做的是通过 AI 加速这个过程，主要做两件事 ：

    1. 用 AI 快速画布局（布局管理器）
    1. 用 AI 图生文 生成 QSS 文件

AI 大家都会用 ，没什么复杂的 ，但是 AI 实际上是有上限的，不论是上下文 ，还是提示词 ，对于零基础的开发者来说 ，都是一种限制。 我们先来看一下单纯问 ，能设计出什么应用

3.1 画个导航组件

❓ 思路梳理 ：

一般导航分为 ： 菜单栏 / 工具栏 / 状态栏 / 选项卡 等样式。常见的方式就像 VScode 这样 ，顶部是菜单栏 ，侧面是工具栏。

先简单看一下顶部菜单栏的生成 ， 直接问 AI 以下几个问题 ：

❗ 问题一 ： (这里我期望能直接干出一个项目出来)

> 帮我设计一个 PyQT 的桌面端应用 ，它拥有一个侧边栏 和 一个 顶部菜单栏 
- 设计的样式参考这个图片里面的 ， 帮我生成多个文件 ，包括主页面 + 子页面 
- 同时完善页面切换的逻辑。 样式通过 QSS 引入外部 .qss 文件。 先给我主页面的代码

image.png

❗ 问题二 ： (很明显,Token数太多,上下文效果也不好，这里我尝试模块化)

> 界面不好看 ，帮我把 style_sheet 参考这个样式进行设计 ： 
1. 左侧和顶部菜单栏和主内容分开 
2. 左侧导航栏支持展开和伸缩 ，展开是图标 + 文字 ，右侧收缩的时候 ，只展示图标 
3. 导航栏有背景 ，半透明感

image.png

❗ 进行优化 ：我开始试图把内容细化 ，让 AI 进行处理


// 首先切割文件 ：
第一步 ： 优化这段代码 ，把 style_sheet 迁移到一个单独的文件里面 ，在这个 main 里面引入使用

// 定点优化 ： 
第二步 ： 详细的细化这一块的样式 ，尤其是左侧导航栏参考这个图片里面的样式


// 优化表格 （这里我试图让优化的点更加清晰）
第三步 ：优化这一段代码 ，为 table 添加更多的列 ，同时为 QTableWidget 完善更好看的样式 ：
1. 左侧序号需要浅灰底 ，小字 
2. 顶部头也是浅灰底小字
3. 鼠标放在某一行 ，当前行变成浅灰 ，比上面两种更浅

// 继续优化
第四步 ： 优化 QLabel 的 QSS 样式 ，要白底 圆角 ，同时要和外部的组件分隔开 ，高度控制只有一行的高低

image.png

总结

  1. 如果只是简单的使用 Chat 进行交互 ，AI 很难给你一次性安装你的要求设计出应用
  2. 有可以一把生成的 ，效果待定 ，而且收费比较贵 @ copyweb.ai/
  3. 可以通过一步步的询问小的方案 ，得到一个比较接近的结果 ，但是还是需要一定的代码基础

👉 零基础想通过 AI 照搬或者写出一个应用还是有难度的 ，AI 无法纵观全局是最大的问题

image.png

四. 换种思路 ，半基础进行定制

既然从零开始有难度 ，那么能否借用开源组件 ，在它上面进行微小的定制 ，借助 AI 的能力 ，减少我们的工作量 ：

这里我还是选择最常用的组件进行扩展 ： QFluentWidgets

4.1 尝试一 ： 基于 语言 + 图片案例 让它生成对应的 QSS -- 不理想

我定义了一个 TreeFrame ，通过 QTreeWidgetItem 定义了一个个小节点 。

我现在想要优化每个节点前面的勾选框的样式 ，样式优化的结果如上面的图片 ： 

要求的效果 ： 
1. 前面的勾选框需要白底
2. 勾选后复选框变成图片中的蓝色 ，整行也变成图片中的蓝色


// 结果 ： 
并没有达到我预期的效果

image.png

❓ 为什么复杂组件也无法实现修改？

image.png

  • 原因 ： 原因在于 有些组件的绘制是写到组件源码里面的 ，如果我们直接使用的时候 ，几乎没有办法对源码里面的代码进行修正

4.2 尝试二 ： 抽取源码，自定义一个 Tree 组件

那么我们是否可以借助 AI 来自行绘制一个组件工具呢 ？ 可以尝试一下 ，把代码丢给 AI 后 ，它给我生成了一个新的 Tree View 类 。

image.png

  • 结果 ： 虽然最后成功了 ，但是付出的代价是极大的， 从源项目里面 Copy 了大量的代码过来 ，AI 在其中的作用也不明显。

总结

针对毫无基础或者一点基础的小伙伴 ，AI 现在能做的有限。兄弟们可以先不用担心失业了。 但是 AI 已经能做到很多了 ：

  • 👉 现阶段 AI 的情况 ：
    • 已知的 Chat 会话 无法做到构建一个大型项目 ，只能一点点优化细枝末节
    • 不论是 Chat 还是 IDE 插件 ，都存在类似的窘境 ，无法串通上下文进行综合的处理
    • 最重要的 ，AI 生成的数据效果并不理想 ，没有达到预期
  • 👉 大型项目有没有办法 ：
    • 存在一些类似 CopyWeb 的一些工具 ，支持一键生成 ，太贵没尝试过 ，不确定价格
  • 👉 现阶段可行的思路 ：
    • 方案一 ： 有足够的基础 + 一点点的抠细节 , 组装出一个项目
    • 方案二 ： 尝试 CopyWeb 这类成熟的工具 ，能否一次性搭建大项目
    • 方案三 ： 在现有开源UI组件的基础上 ，配合 AI 改源码

👇👇👇

试了一天 ，我是没有找到很好的办法能快速流水线生产页面 ，大佬们有没有好的途径，欢迎评论区讨论。

最后的最后 ❤️❤️❤️👇👇👇

avatar
文章
阅读
粉丝