huyangpahuo

关于vercel的缓存机制

Wed, 14 Oct 2026 12:26:47 GMT

Vercel有一套缓存机制,也就是默认保留30天内所有构建快照

结果就是让本就不多的存储空间雪上加霜

实际上我就部署了一个twikoo后端和一个astro博客,连2GB都不到,what can i say~

解决方案

手动删除

首先前往deployments里删历史记录

可以看到这里有过往的部署记录

要想删掉还得一个一个点进这个记录去手动删除...

自动删除

首先在设置(settings)里找到安全(Security)

进入界面找到Recently Deleted Deployments

可以看到vercel把这些记录堆在这,默认保存30天,超过30天的才会自动删

我们不需要它保存这么多天,所以我们需要修改安全策略,点击defined retention policy进入Build and Deployment页面

或者在这打开

然后把30天全改成1天,或者你想留时间长点也行

这样去睡一觉就恢复正常了

删除Windows开机自启动软件残留

Wed, 14 Oct 2026 09:03:45 GMT

部分软件在删除后会出现开机自启动项仍存在

删除启动项

按 Win + R，输入

text

shell:startup

如果里面有对应程序的快捷方式 , 直接删除即可

然后再检查看看里面有没有

text

shell:common startup

删除注册表启动项

如果任务管理器里能看到, 但启动文件夹里没有，可以检查

按 Win + R

text

regedit

然后检查

text

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run

以及

text

HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\Run

找到对应程序后删除它的启动项 ,这里一定要确认名称和路径，不要随便删其他项目

VScode插件制作

Wed, 14 Oct 2026 02:59:45 GMT

本篇来制作VScode插件

之前做viora的插件时很头疼,因为每次都要让agent按照规定生成,我参与不了一点也看不到细节

开始的时候想的是做一个工作台,然后把sdk塞进去,然后在工作台里写代码并直接使用工作台生成这个插件

但是体验感太差,而且这完全是重复造轮子而且无法结合ai使用

插件初步思路:

需要结合viora sdk使用

需要可以在侧边栏预览转换前后的图片,在VScode右上角点击icon就能快速打开

需要快捷生成和打包插件的命令

需要有提供语法高亮、代码补全、错误诊断、跳转定义、格式化等能力(其实也不需要,毕竟代码是C#,可以直接用微软的那个C#插件)

环境配置

假设你已经安装了pnpm nodejs npm git

首先创建工作文件夹

bash
mkdir vscode-workshop && cd vscode-workshop

我们使用npm安装如下工具

yo：全称叫 Yeoman，是一个现代 Web 应用的脚手架工具（命令行工具），用于快速生成项目。
generator-code：VS Code 扩展生成器

运行 yo code 命令, 创建并初始化项目

bash
npm install -g yo generator-code

yo code

选择选项

然后我们需要回答几个问题,回答问题只需要Enter回车

bash
? What type of extension do you want to create?     #选择 New Extension (TypeScript)

bash

? What's the name of your extension?    #随便取个名字比如 Viora

bash
? What's the identifier of your extension? (viora)    #回车即可

bash

? What's the description of your extension?     #随便写一个插件的描述例如: Viora plugin development with scaffolding, validation, packaging, installation, and essential development tools

bash
? Initialize a git repository? (Y/n)    # 输入Y同意

bash

? Which bundler to use?  # 选 esbuild

bash

? Which package manager to use?  # 选 pnpm

然后可能遇到这种情况即pnpm阻止了esbuild的安装脚本执行

powershell
Error: ERR_PNPM_IGNORED_BUILDS

  × installing dependencies
  ╰─▶ Ignored build scripts: esbuild@0.28.2
  help: Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.

Error code

Command failed with exit code 1: pnpm install

我们进入目录批准安装

powershell
Set-Location D:\vscode-workshop\viora

pnpm approve-builds esbuild
pnpm install
pnpm exec esbuild --version

powershell
viora
├── node_modules
│   ├── @types    
│   │   ├── mocha #提供 Mocha 的类型定义
│   │   ├── node  #提供 Node.js 的类型定义
│   │   └── vscode  #提供 VS Code API 的 TypeScript 类型定义
│   ├── @vscode   
│   │   ├── test-cli   #辅助执行 VS Code 扩展测试
│   │   └── test-electron   #提供基于 Electron 的扩展测试环境
│   ├── esbuild   #编译和打包代码
│   ├── eslint   #检查 TypeScript 代码
│   ├── npm-run-all  #帮助组合和运行多个 npm/pnpm 脚本
│   ├── typescript   #提供 TypeScript 编译器
│   └── typescript-eslint   #检查 TypeScript 代码
├── src
│   ├── test   #测试文件
│   │   └── extension.test.ts     
│   └── extension.ts   # 插件的主要入口文件
├── CHANGELOG.md   #记录各版本的新功能、修复和变更
├── README.md
├── esbuild.js      #构建脚本，告诉 esbuild 如何编译和打包你的 TypeScript 代码
├── eslint.config.mjs   #配置 ESLint，检查代码风格和潜在问题
├── package.json #最重要的配置文件之一,声明插件名称、版本、入口文件、命令、菜单、快捷键、依赖和开发脚本等
├── pnpm-lock.yaml    #锁定依赖解析结果，尽量确保不同环境安装到一致的依赖版本
├── pnpm-workspace.yaml    #定义 pnpm 工作区及相关配置。单项目通常不需要复杂的工作区设置
├── tsconfig.json   # 配置 TypeScript 编译规则，例如目标 JavaScript 版本、模块类型和类型检查选项
└── vsc-extension-quickstart.md  #官方脚手架生成的快速入门说明，主要用于指导如何运行、调试和测试扩展

完成后进入 VS Code，按下F5

或者点这两个地方也可以

成功的话会弹出来一个Extension Development Host(开发宿主窗口)，其中就运行着插件

也可以通过在 VS Code 中按 Ctrl + Shift + P 搜索并执行 Debug: Select and Start Debugging打开这个窗口

按 Ctrl+Shift+P 执行 "Hello World" 命令

出现 Hello World from 项目名 就成功了

此时我们项目根目录出现了一个dist文件夹里面有extension.js和extension.js.map文件

当然这个右下角弹窗信息我们还可以改成我们自己的

可能遇到的问题

我们f5调试时可能出现这种情况就是

显示 Parameter format not correct - -Command

然后开发宿主窗口也不弹出来

这个就很玄学,也有人向微软提过这个问题

VS Code表示：任务和调试默认使用当前默认终端配置，但可以通过terminal.integrated.automationProfile.windows 单独指定任务所用的 Shell来避免干扰

我们使用

powershell
(Get-Command pwsh.exe).Source

获取当前powershell终端的exe路径(比如我的是powershell 7+版本)

然后打开

把下面这段粘进去, 在path地区替换为你自己的,记住路径使用两个斜杠

json
"terminal.integrated.automationProfile.windows": {
    "path": "C:\\Program Files\\WindowsApps\\Microsoft.PowerShell_7.6.6.0_x64__8wekyb3d8bbwe\\pwsh.exe",
    "args": ["-NoLogo", "-NoProfile"],
  },

这样就能解决这个问题

package.json文件相关参数

twikoo在vercel上部署过程

Tue, 13 Oct 2026 11:04:18 GMT

其实25年末我就部署了twikoo

只是当时版本比较旧,今天我想升级一下,结果twikoo后端升级后光速崩溃(果然后端这种东西能用就不要升级......)

然后花了一天半也不知道是为什么,没办法删掉重新搞一遍吧,不过变化和去年还是很大的

前置准备

假设你已经完成了MongoDB数据库的创建,且github绑定了vercel

配置github存储库

方式1(推荐)

按照twikoo给的一键部署模板在github创建仓库

然后我们配置MongoDB数据库

点开环境变量(Environment Variables)

保存(save)并重新部署(redeploy)

然后我们需要关掉vercel的认证保护,否则twikoo的消息推送会被拦截

然后我们就能在网站直接用这个vercel的链接和前端连接了

方式二(通用)

把twikoo仓库复刻到你的github

原理相同,只不过直接复刻的在多个平台如更通用

在vercel创建项目并导入github的复刻仓库

然后将默认的./改成templates/vercel-min

这个是表示我们我们只导入这个文件夹里的模板而非整个仓库

然后构建使用 npm install

然后配置环境变量

key填MONGODB_URI,然后value填你的MongoDB链接秘钥

npm和pnpm迁移到D盘

Mon, 12 Oct 2026 01:52:36 GMT

npm和pnpm默认是安装到C盘的,久而久之就越堆越多

我们需要给他们在D盘建个文件夹

这里我的是

D:\npm-global

D:\npm-cache

D:\pnpm

D:\pnpm-cache

D:\pnpm-state

检测当前的情况

终端输入

powershell
Write-Host "===== NODE ====="
node -v
where.exe node

Write-Host "`n===== NPM ====="
npm -v
npm config get prefix
npm prefix -g
npm root -g
npm config get cache
where.exe npm
where.exe npx

Write-Host "`n===== PNPM ====="
pnpm -v
pnpm root -g
pnpm bin -g
pnpm store path
pnpm config get store-dir
pnpm config get cache-dir
pnpm config get state-dir
pnpm config get global-dir
pnpm config get global-bin-dir
where.exe pnpm

先把当前结果丢给ai,让它帮你看看这些东西在C盘的什么地方,然后再按照我如下的说明让ai帮你调整修改和删除旧配置

npm配置

npm是随着nodejs安装的

设置

powershell
npm config set prefix "D:\npm-global" --global
npm config set cache "D:\npm-cache" --global

验证

powershell

npm config get prefix
npm config get cache

我们使用npm安装pnpm

powershell

npm install --global pnpm

设置path变量

我们在powershell执行如下命令

powershell
$paths = @(
    "D:\npm-global",
    "D:\pnpm\bin"
)

$userPath = [Environment]::GetEnvironmentVariable("Path", "User") -split ";"

foreach ($path in $paths) {
    if ($userPath -notcontains $path) {
        $userPath += $path
    }
}

[Environment]::SetEnvironmentVariable(
    "Path",
    ($userPath -join ";"),
    "User"
)

或者手动添加

这样之后我们使用npm安装的东西例如codex claude dsh hexo都会进入D:\npm-global

pnpm配置

设置path变量

powershell
[Environment]::SetEnvironmentVariable("PNPM_HOME", "D:\pnpm", "User")

设置

powershell
pnpm config set store-dir "D:\pnpm\store" --global
pnpm config set cache-dir "D:\pnpm-cache" --global
pnpm config set state-dir "D:\pnpm-state" --global
pnpm config set global-dir "D:\pnpm\global" --global
pnpm config set global-bin-dir "D:\pnpm\bin" --global

验证

powershell
pnpm config get store-dir
pnpm config get cache-dir
pnpm config get state-dir
pnpm config get global-dir
pnpm config get global-bin-dir
pnpm store path

Boss设计草稿

Sun, 11 Oct 2026 08:15:35 GMT

Starguardian开发日志

boss的重新构思

目前就用ai做了几个boss初稿,只是ai给boss的名字感觉傻傻的

已有二阶段

未做二阶段

目前初步ai设计图

让chatgpt生成了几个概念图、

初版

后续的几个方案，跟抽卡一样

实现的难度也是很大的

Linux---Linux入门

Fri, 09 Oct 2026 00:31:22 GMT

本篇我们来了解Linux

Linux是一个对个人免费开源的操作系统

我们目前目前用的比较多的就是

苹果电脑macOS以及苹果手机iOS
绝大多数基于WindowsOS的电脑
安卓Android以及华为的鸿蒙HarmonyOS

mermaid
graph LR
    unix --> Linux
    unix --> iOS和macOS
    Linux --> Android
    Linux --> HarmonyOS

常见发行版

Debian、Ubuntu、Fedora、Red Hat Enterprise Linux、Arch Linux、CentOS、Manjaro等多达上百种发行版

技术	它解决的问题	你可以怎样理解
直接安装 Linux	让整台电脑运行 Linux	用 Linux 替代或搭配 Windows
虚拟机(如VMware和Hyper-V和VirtualBox)	在现有系统上运行另一台虚拟电脑	在电脑里再开一台电脑
WSL 2	在 Windows 中运行 Linux 环境	不重装系统就能使用 Linux 工具
Docker 容器	隔离应用及其运行环境	把程序和依赖打包，方便部署
Elastic Compute Service(ECS)云服务器	可迅速创建或删除云服务器	花钱买别人现成的

对于直接安装或者在虚拟机中安装一般使用iso映像文件(Windows和macOS也可以通过iso文件安装)

这里用维基百科的定义

ISO映像是一种光盘的存档文件，是磁盘映像的类型之一，数据由一张光盘的每个扇区组成，这包括光盘的文件系统ISO映像文件通常采用文件扩展名.iso

在计算技术中，镜像是指一个单独的文件，它是一个容器，用来存放现有文件系统的数字副本，用于备份。ISO映像或.ISO文件是一种容器格式，用于保存光盘（CD或DVD）上用于存储程序、电影和其他多媒体内容的文件系统。ISO是由国际标准组织制定的格式标准。ISO格式不用于音频CD执行ISO映像备份可以防止在发生硬盘故障时丢失信息。一个.iso文件可刻录到新光盘上，也可直接从硬盘上存储和使用，ISO是用于CD和DVD的格式标准。将操作系统（OS）CD作为ISO存储在计算机上非常方便映像

Linux 的图形化界面叫做 GUI（Graphical User Interface，图形用户界面）

桌面、任务栏、开始菜单、窗口、文件管理器这一整套环境，通常叫 Desktop Environment（桌面环境，简称 DE）

常见的GUI主要有

主流的GUI
GNOME	KDE Plasma	Xfce	MATE	LXQt
IceWM	Fluxbox	Cinnamon	Budgie	Pantheon

比较常用的就是`GNOME`和`KDE`还有`Cinnarmon`以及`Xfce`

这个可以自行挑选自己喜欢的主题然后个性化调整,其实目前的linux桌面版使用体验和Windows差不多,自定义化程度很高

Linux基础命令

事实上,我们在使用Windows的cmd和powershell的时候,可能见过某些命令,其中powershell非常强大,在兼容性,容错性,个性化等等方面应有尽有

不过Windows由于GUI已经相当发达所以普通情况下基本上用不上终端,顶多用终端召唤ai的cli

为减轻认知负担我们先学这些linux命令,毕竟在具体真实的场景使用才能记得住

命令	用途	示例
`pwd`	显示当前目录	`pwd`
`ls`	列出文件和目录	`ls -la`
`cd`	切换目录	`cd /home`
`mkdir`	创建目录	`mkdir test`
`touch`	创建空文件或更新时间戳	`touch test.txt`
`cp`	复制文件	`cp a.txt b.txt`
`mv`	移动文件或重命名	`mv old.txt new.txt`
`rm`	删除文件	`rm test.txt`
`rmdir`	删除空目录	`rmdir test`
`find`	查找文件	`find /home -name "*.log"`
`file`	判断文件类型	`file test.txt`

Linux的文件系统

/：根目录

整个 Linux 文件系统的起点
~：当前用户的主目录

例如 /home/用户名，root 用户通常是 /root
..：上一级目录

例如 cd ..
.：当前目录

例如 ./program 表示运行当前目录里的 program

Docker---了解Docker

Fri, 09 Oct 2026 00:23:16 GMT

从这里开始写作。

Typescript入门

Sun, 20 Sep 2026 16:07:40 GMT

今天我们来学Typescript

学习资料来源

https://ts.xcatliu.com/introduction/what-is-typescript.html

https://wangdoc.com/typescript/intro

https://www.runoob.com/typescript/ts-install.html

https://www.typescriptlang.org/zh/docs/handbook/tsconfig-json.html

官方定义

*TypeScript*（简称 TS）是由微软开发并开源的编程语言，它是 JavaScript 的一个超集，为代码添加了可选的静态类型检查

核心特点

JavaScript 的超集：所有合法的 JavaScript 代码都已经是合法的 TypeScript 代码
静态类型检查：在代码运行之前（编译阶段），就能帮你发现拼写错误、类型不匹配等问题
最终编译为 JS：浏览器和 Node.js 无法直接运行 TS 代码，它需要通过编译器（tsc）转译成纯 JavaScript 后再执行
完全兼容：100% 兼容现有的 JavaScript 生态和库

为什么使用 TypeScript？

提前报错：不用等到代码运行或上线，在编辑器（如 VS Code）里写代码时就能实时看到错误提示
大型项目友好：面对复杂的代码库，类型定义让代码结构更清晰，重构和维护更安全
智能提示：编辑器能根据类型准确提示对象的属性和函数的参数，提高开发效率

安装Typescript

再开始前确保已经安装nodejs

安装完成后验证

powershell

node -v
npm -v

通过npm安装Typescript

powershell

npm install -g typescript

验证

powershell
tsc -v
#或者
tsc --version

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了

运行typescript代码

例如我们写一个hello.ts(和JavaScript一样,Typescript代码末尾的;号可加可不加,这里为了保持C#习惯我还是加吧)

typescript
const message: string = "Hello, World!";
console.log(message);

可以看到typescript在变量后使用:声明数据类型,比如我们当前的message就是Hello, World!即string字符串类型

当然也可以不写,因为typescript会自己推断

当然函数也是在参数括号右边声明类型

例如
typescript
123
function toString(num:number):string {
  return String(num);
}

编译单个脚本

编译一个 TypeScript 文件很简单：

bash

tsc hello.ts

我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀

然后就会发现在根目录生成了一个同名js文件,只是少了类型

javascript
"use strict";
const message = "Hello, World!";
console.log(message);

此时可以使用node hello.js运行js得到Hello, World!

powershell

node hello.js

由此我们可以发现typescript自己无法运行代码内容本身,而是先通过tsc编译器转换为JavaScript后使用nodejs运行

即typescript只在编译时检查类型,转换为JavaScript后就不管了

编译多个脚本

同样的tsc可以编译多个脚本

powershell
tsc hello.ts hello01.ts hello02.ts

编译完成会生成3个同名js文件即hello.js,hello01.js,hello02.js

tsc参数

其实就是tsc cli命令,详见typescript官方文档

或者在终端使用help命令查看所有tsc命令

powershell
tsc --help
#或者
tsc -h

其中有部分命令在我们tsc 7.0.2版本已被移除

已移除选项	功能说明	推荐迁移方案
`target: "es5"` (及 `es3`)	编译输出 ES5 代码，用于兼容 IE 等老旧浏览器	升级 `target` 至 `es2015` 或更高；若仍需 ES5 产物，需配合 Babel/esbuild 二次转译
`outFile` (及旧别名 `--out`)	TS 内置的多文件拼接单输出	改用 Webpack/Vite/esbuild/Rollup 等专业打包工具
`moduleResolution: "node"` / `"node10"`	旧版 Node 模块解析逻辑，不兼容新版 ESM/exports	Node 项目改用 `nodenext`；打包/Vite/Bun 项目改用 `bundler`
`moduleResolution: "classic"`	TypeScript 初代模块解析算法，无现代使用场景	统一改用 `nodenext` 或 `bundler`
`module: "amd"` / `"umd"` / `"systemjs"` / `"none"`	老式浏览器模块化方案	改用 `esnext`，输出格式由打包工具处理
`baseUrl`	路径映射的根目录，易产生意外模块匹配	将所有 `paths` 路径改为相对于项目根目录的完整前缀
`downlevelIteration`	仅为 ES5 提供迭代器垫片，无 ES5 时无作用	直接删除，ES2015+ 原生支持迭代
`esModuleInterop: false`	关闭 ESM 与 CommonJS 互兼容逻辑	强制永久为 `true`，不可关闭。需修正导入写法
`allowSyntheticDefaultImports: false`	禁止合成默认导入	强制永久为 `true`，不可关闭。统一标准导入语法
`alwaysStrict: false`	关闭 JS 严格模式解析	强制永久为 `true`，不可关闭。需重命名 `await`/`static`/`private` 等保留字变量
`importsNotUsedAsValues` / `preserveValueImports`	控制类型导入的保留行为	改用 `"verbatimModuleSyntax": true`
`ignoreDeprecations`	TS5/6 中用于屏蔽废弃警告的“逃生舱”	彻底移除，所有废弃选项在 7.0 中均变为硬错误
`charset`	指定源文件字符集（已无实际作用）	直接删除，编译器默认使用 UTF-8
`keyofStringsOnly`	控制 `keyof` 仅返回字符串键	直接删除，使用 `keyof T & string` 替代
`noImplicitUseStrict`	控制是否自动添加 `"use strict"`	直接删除，严格模式已由 `strict` 统一管理
`suppressExcessPropertyErrors`	抑制对象字面量的多余属性检查	直接删除，推荐使用 `--exactOptionalPropertyTypes`
`suppressImplicitAnyIndexErrors`	抑制隐式 `any` 索引错误	直接删除，开启 `strict` 后由类型系统统一处理
`noStrictGenericChecks`	关闭泛型严格检查	直接删除
`prepend: true` (项目引用)	在项目引用中前置输出	彻底移除，输出前置功能自 TS6 起已消失
`/// <reference no-default-lib="true"/>`	控制内置标准库加载的三斜杠指令	指令失效，改用 `--noLib` / `libReplacement` 配置

MarkDown元数据说明

Thu, 17 Sep 2026 00:06:34 GMT

文章 Frontmatter

字段	是否必填	示例	描述
`title`	是	"example"	文章标题
`slug`	是	example	运行时自动生成，可手动填写，使用`-`分隔单词
`index`	是	0	默认为0不置顶，大于0的整数置顶，数值越大越靠前
`description`	是	"展示 Markdown 语法的各种类型和示例"	文章描述
`category`	是	"示例"	文章分类
`tags`	是	[Markdown]	文章标签，多个标签用逗号隔开
`published`	是	2026-01-01 00:01:02	文章发布时间，格式为`YYYY-MM-DD HH:mm:ss`，脚本生成自带
`updated`	否	2026-01-01 00:01:03	文章更新时间，格式为`YYYY-MM-DD HH:mm:ss`，不自动生成
`draft`	否	false	是否草稿，不自动生成

请根据以上表格，填写文章的 Frontmatter。

Markdown语法样例

Wed, 16 Sep 2026 00:44:37 GMT

1. 标题

markdown
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果：

三级标题

四级标题

五级标题

六级标题

悬停标题会显示 # 锚点，点击可跳转到该标题。

2. 段落与换行

markdown

1234

这是第一段。  
这是第二段（行尾加两个空格实现换行）。

这是新段落（空一行分隔）。

效果：

这是第一段。
这是第二段（行尾加两个空格实现换行）。

这是新段落（空一行分隔）。

3. 文字强调

markdown
*斜体* 或 _斜体_
**粗体** 或 __粗体__
***粗斜体*** 或 ___粗斜体___
~~删除线~~
~单波浪删除线~

效果：

斜体或斜体
粗体或粗体
粗斜体 或 粗斜体
~~删除线~~
~~单波浪删除线~~

4. 列表

无序列表

markdown
- 项目1
- 项目2
  - 嵌套项目（缩进2或4个空格）
* 也可以用星号
+ 或者加号

效果：

项目1
项目2
- 嵌套项目（缩进2或4个空格）

也可以用星号

或者加号

有序列表

markdown
第一项
第二项
嵌套有序项（缩进）
第三项

效果：

第一项
第二项
1. 嵌套有序项（缩进）
第三项

任务列表

markdown

- [x] 已完成任务
- [ ] 未完成任务

效果：

已完成任务
未完成任务

5. 链接

markdown
[行内链接](https://example.com "可选标题")
[引用式链接][引用]
文章末尾添加：[引用]: https://example.com "标题" 
[空链接]<> 或 <https://example.com>（自动链接）

效果：

行内链接
 引用式链接
 https://example.com（自动链接）

外部链接自动在新窗口打开。

6. 图片

markdown
![替代文字](https://xxxxx "可选标题")
![引用式图片][img]
[img]: https://xxxxx "标题"
# 或者本地图片
![本地图片](../images/logo.webp "本地图片")

效果：

点击图片可打开灯箱放大预览。

7. 引用块

markdown
> 这是一段引用。
> 可以跨多行。
>> 嵌套引用。

效果：

这是一段引用。
可以跨多行。

嵌套引用。

8. 代码

行内代码

markdown

使用 `print()` 函数输出。

效果：使用 print() 函数输出。

代码块

markdown
```
普通代码块
```
```python
# 语法高亮
print("Hello, World!")
```
缩进4个空格或一个制表符：
    def foo():
        return "bar"

效果：

text

普通代码块

python
# 语法高亮
print("Hello, World!")

diff 高亮

markdown
```diff
+ 新增的行
- 删除的行
```

效果：

diff
+ 新增的行
- 删除的行

注意：代码块自带行号、复制按钮与语言标识；支持 python / bash / go / rust / sql / diff 等常用语言，未知语言按纯文本渲染。请勿使用缩进4个空格或一个制表符来创建代码块，因为不会显示。

9. 水平线

markdown

--- 或 *** 或 ___

效果：

---：

***：

___：

10. 表格

markdown
| 左对齐------ | ------居中------ | ------右对齐 |
|:-------|:----:|-------:|
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

效果：

左对齐------	------居中------	------右对齐
单元格	单元格	单元格
单元格	单元格	单元格

11. 脚注

markdown
这是一个句子[^1]。
[^1]: 脚注内容。

效果：

这是一个句子¹。

12. 提示容器

markdown

1234567891011

:::tip 提示标题
这是一个提示容器。
:::

:::warning
支持 info / tip / warning / danger / details 五种类型。
:::

:::details 点击展开
details 容器默认折叠，点击标题展开。
:::

效果：

提示标题

这是一个提示容器。

warning

支持 info / tip / warning / danger / details 五种类型。

点击展开

details 容器默认折叠，点击标题展开。

13. 内联 HTML

markdown
<kbd>Ctrl</kbd> + <kbd>C</kbd>  
<span style="color:red;">红色文字</span>

效果：

Ctrl + C
红色文字

14. 转义字符

markdown

\*不会变成斜体\*
\# 不是标题

效果：

*不会变成斜体*
# 不是标题

15. 表情符号

markdown

:smile: :heart: :+1:

效果：

😄 ❤️ 👍

16. 自动链接

markdown
<https://example.com>
<user@example.com>
www.example.com（GFM 自动识别）

效果：

https://example.com
user@example.com
www.example.com

17. 数学公式

markdown

1234

$E=mc^2$
$$
\int_{a}^{b} f(x) dx
$$

效果：

$E=mc^2$

\int_{a}^{b} f(x) dx

脚注内容。 ↩

Windows光标包转网页动画光标skill

Mon, 14 Sep 2026 01:49:16 GMT

Windows光标包转网页动画光标skill

前往我的Github仓库下载

把网上下载的 Windows 光标包(.ani 动画 / .cur 静态)转换成浏览器可用的动画鼠标指针

即逐帧抽成 PNG + 热点坐标 + data.js 清单,配合 skill 自带的 CSS/JS 模板用 CSS 变量逐帧播放(浏览器原生不支持 .ani 动画光标)

放入当前项目的 .agents/skills/ 目录(放用户目录 ~/.agents/skills/ 则全局可用)

然后对 AI 说"把 XXX 光标包做成网页鼠标指针"即可

配置Twikoo的Telegram消息推送

Sun, 13 Sep 2026 22:16:17 GMT

关于twikoo评论我一般看不到大家发了什么,所以试试Telegram推送吧

首先我们需要知道twikoo使用了pushoo来推送消息

支持各种平台,包括Telegram,QQ等等

获取token

就是如上所说把 @BotFather的token和 @userinfobot的id用 #拼在一起即token#id模式

关闭vercel的登录验证

如果你是和我一样用vercel部署的twikoo就需要关闭此项,否则会被vercel拦截 tg 机器人的推送

打开twikoo设置面板

然后我们发一条测试

此时Telegram机器人就给我们推送消息了,非常nice

购买阿里云68一年的服务器

Fri, 11 Sep 2026 10:14:23 GMT

如题,不过我买的时候买早了,导致我目前将近一个多月都没用

我挑选的是菲律宾马尼拉地区并预装Docker

到手之后由于我不喜欢它自带的那个远程连接workbench的界面所以用termius连接吧

然后先查看真实配置

bash

lscpu

得到cpu信息如下,确实是2核

bash
Architecture:        x86_64
CPU op-mode(s):      32-bit, 64-bit
Byte Order:          Little Endian
CPU(s):              2
On-line CPU(s) list: 0,1
Thread(s) per core:  2
Core(s) per socket:  1
Socket(s):           1
NUMA node(s):        1
Vendor ID:           GenuineIntel
BIOS Vendor ID:      Alibaba Cloud
CPU family:          6
Model:               85
Model name:          Intel(R) Xeon(R) Platinum
BIOS Model name:     pc-i440fx-2.1
Stepping:            4
CPU MHz:             2499.998
BogoMIPS:            4999.99
Hypervisor vendor:   KVM
Virtualization type: full
L1d cache:           32K
L1i cache:           32K
L2 cache:            1024K
L3 cache:            33792K
NUMA node0 CPU(s):   0,1
Flags:               fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush mmx fxsr sse sse2 ss ht syscall nx pdpe1gb rdtscp lm constant_tsc rep_good nopl xtopology nonstop_tsc cpuid tsc_known_freq pni pclmulqdq ssse3 fma cx16 pcid sse4_1 sse4_2 x2apic movbe popcnt tsc_deadline_timer aes xsave avx f16c rdrand hypervisor lahf_lm abm 3dnowprefetch cpuid_fault invpcid_single pti fsgsbase tsc_adjust bmi1 avx2 smep bmi2 erms invpcid avx512f avx512dq rdseed adx smap clflushopt clwb avx512cd avx512bw avx512vl xsaveopt xsavec xgetbv1 xsaves arat

然后查看内存

bash

free -h

确实是2G但是没有开swap缓存

bash
              total        used        free      shared  buff/cache   available
Mem:          1.8Gi       291Mi       561Mi       2.0Mi       1.0Gi       1.4Gi
Swap:            0B          0B          0B

查看硬盘

bash

df -h

确实是40G

bash
Filesystem      Size  Used Avail Use% Mounted on
devtmpfs        916M     0  916M   0% /dev
tmpfs           936M     0  936M   0% /dev/shm
tmpfs           936M  500K  936M   1% /run
tmpfs           936M     0  936M   0% /sys/fs/cgroup
/dev/vda3        40G  6.7G   31G  18% /
/dev/vda2       200M  5.8M  194M   3% /boot/efi
tmpfs           188M     0  188M   0% /run/user/1000
tmpfs           188M     0  188M   0% /run/user/0

查看 Linux 系统版本

bash

cat /etc/os-release

bash
NAME="Alibaba Cloud Linux"
VERSION="3 (OpenAnolis Edition)"
ID="alinux"
ID_LIKE="rhel fedora centos anolis"
VERSION_ID="3"
VARIANT="OpenAnolis Edition"
VARIANT_ID="openanolis"
ALINUX_MINOR_ID="2104"
ALINUX_UPDATE_ID="10"
PLATFORM_ID="platform:al8"
PRETTY_NAME="Alibaba Cloud Linux 3.2104 U10 (OpenAnolis Edition)"
ANSI_COLOR="0;31"
HOME_URL="https://www.aliyun.com/"

查看监听端口

bash

ss -lntp

就是22端口

bash
State        Recv-Q       Send-Q             Local Address:Port             Peer Address:Port       Process                               
LISTEN       0            128                      0.0.0.0:22                    0.0.0.0:*           users:(("sshd",pid=2721,fd=3))       
LISTEN       0            128                         [::]:22                       [::]:*           users:(("sshd",pid=2721,fd=4))  

开启swap 2GB缓存并永久启用

bash
sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

检测是否开启

bash

swapon --show

可以看到

bash

NAME      TYPE SIZE USED PRIO
/swapfile file   2G   0B   -2

或者也可以直接查看内存

text

free -h

得到

bash
              total        used        free      shared  buff/cache   available
Mem:          1.8Gi       288Mi       562Mi       1.0Mi       1.0Gi       1.4Gi
Swap:         2.0Gi          0B       2.0Gi

ok,已开启

防火墙

先看看防火墙状态,阿里云已经默认开了防火墙且已有几个端口添加自动添加了

所以无需操作,只需添加防火墙白名单即可

缺点

太慢了,造的VPN根本无法正常用,顶多只能浏览普通网站,无法看视频

所以我们需要开启BBR拥塞算法

BBR只是优化不保证能够降低延迟,取决于服务器自身

启用 BBR TCP 拥塞控制算法

首先看看是否为BBR模式

powershell
sysctl net.ipv4.tcp_congestion_control net.core.default_qdisc 

若显示的是net.ipv4.tcp_congestion_control = cubic net.core.default_qdisc = fq_codel

我们需要进一步操作启用BBR

powershell
cat > /etc/modules-load.d/tcp_bbr.conf <<'EOF'
tcp_bbr
EOF

cat > /etc/sysctl.d/99-bbr.conf <<'EOF'
net.core.default_qdisc=fq
net.ipv4.tcp_congestion_control=bbr
EOF

sysctl --system

我们验证一下

text

 sysctl net.ipv4.tcp_congestion_control net.core.default_qdisc

若显示net.ipv4.tcp_congestion_control = bbr net.core.default_qdisc = fq表示已开启

Zed的mcp安装

Thu, 10 Sep 2026 20:56:26 GMT

Zed插件市场有很多MCP

必装

Context7 MCP Server

**用途：**让 AI 获取当前版本的库/框架文档，而不是完全依赖模型训练数据

GitHub MCP Server

**用途：**让 Agent 更深入地使用 GitHub

Firecrawl MCP Server

**用途：**让 AI 更方便地抓取和理解真实网站

Puppeteer MCP Server

**用途：**让 Agent 操作真实浏览器

看具体项目装

Framelink Figma MCP Server

**用途：**让 AI 理解 Figma 设计稿

shadcn/ui MCP

**用途：**让 Agent 查询、浏览和安装 shadcn/ui 组件

Brave Search MCP

**用途：**让 Agent 使用搜索引擎搜索互联网

Exa Search + Crawling MCP

用途: 也是搜索 + 网页抓取类型

Tavily MCP

同样属于 AI 搜索 / Web Research 类型

数据库项目

Postgres Context Server

可以帮助 Agent 理解和操作 PostgreSQL 数据库

Supabase MCP Server

如果使用 Supabase用这个

Prisma Context Server

如果以后使用：

text

12345

Node.js
+
Prisma
+
PostgreSQL

可以安装

Cloudflare / 云部署方向

Terraform Context Server

Terraform 用于 Infrastructure as Code

text

123456

Cloudflare
AWS
Azure
服务器
数据库
网络

Azure Context Server

azure相关用这个

Grafana MCP Server

用途：

text

1234567

服务器
 ↓
Prometheus / Loki
 ↓
Grafana
 ↓
AI

Datadog MCP Server

企业监控 / DevOps 方向

Web 建站平台类

Webflow MCP Server

用于 Webflow

Material UI MCP Server

如果使用 Material UI可以考虑

代码理解 / Coding Agent 增强

Serena Context Server

让 Coding Agent 更深入地理解代码结构

Sequential Thinking MCP

帮助 Agent 分解复杂任务

Container Use MCP Server

用途是给 Agent 提供隔离的容器化开发环境

love2d的skill和mcp推荐

Wed, 09 Sep 2026 12:45:29 GMT

在使用agent辅助love2d游戏制作时,可以用一些skill和mcp来让ai更符合项目规范和减少出错

这里我用的agent是Zcode

首先先下载mcp

点击前往下载

我们需要先克隆这个mcp到一个文件夹

powershell
git clone https://github.com/shayarnett/love2d-mcp.git
cd love2d-mcp

然后安装依赖

powershell

npm install

此时启动构建服务器

powershell

npm run build

找到mcp设置项添加mcp

显示绿点即接入成功

不过我们需要在代码层引入这个MCP

mcp_bridge.lua

首先制作一个mcp_bridge.lua文件

lua
-- MCP Bridge - TCP server for communicating with MCP server
local socket = require("socket")

local mcp_bridge = {}
local server = nil
local clients = {}
local objectGetter = nil

-- Initialize TCP server
function mcp_bridge.init(port)
    server = assert(socket.tcp())
    server:bind("*", port)
    server:listen(5)
    server:settimeout(0) -- Non-blocking
    print("MCP Bridge listening on port " .. port)
end

-- Set function to get game objects
function mcp_bridge.setObjectGetter(getter)
    objectGetter = getter
end

-- Handle incoming connections and commands
function mcp_bridge.update()
    if not server then return end

    -- Accept new clients
    local client = server:accept()
    if client then
        client:settimeout(0)
        table.insert(clients, client)
        print("MCP client connected")
    end

    -- Handle existing clients
    for i = #clients, 1, -1 do
        local client = clients[i]
        local line, err = client:receive("*l")

        if line then
            -- Process command
            local success, response = pcall(mcp_bridge.handleCommand, line)
            if success then
                client:send(response .. "\n")
            else
                client:send(json.encode({error = tostring(response)}) .. "\n")
            end
        elseif err == "closed" then
            -- Client disconnected
            client:close()
            table.remove(clients, i)
            print("MCP client disconnected")
        end
        -- err == "timeout" means no data available, continue
    end
end

-- Handle a command from MCP server
function mcp_bridge.handleCommand(line)
    local command = json.decode(line)

    if command.command == "list_objects" then
        return mcp_bridge.listObjects()
    elseif command.command == "get_object" then
        return mcp_bridge.getObject(command.id)
    elseif command.command == "run_lua" then
        return mcp_bridge.runLua(command.code)
    else
        return json.encode({error = "Unknown command: " .. tostring(command.command)})
    end
end

-- List all objects
function mcp_bridge.listObjects()
    if not objectGetter then
        return json.encode({error = "No object getter configured"})
    end

    local objects = objectGetter()
    local result = {}

    for id, obj in pairs(objects) do
        table.insert(result, {
            id = id,
            type = obj.type,
            x = obj.x,
            y = obj.y
        })
    end

    return json.encode({objects = result})
end

-- Get specific object details
function mcp_bridge.getObject(id)
    if not objectGetter then
        return json.encode({error = "No object getter configured"})
    end

    local objects = objectGetter()
    local obj = objects[id]

    if not obj then
        return json.encode({error = "Object not found: " .. tostring(id)})
    end

    return json.encode({object = obj})
end

-- Run arbitrary Lua code with access to game objects
function mcp_bridge.runLua(code)
    local func, err = loadstring(code)
    if not func then
        return json.encode({error = "Syntax error: " .. tostring(err)})
    end

    -- Set up environment with access to objects
    local env = {
        objects = objectGetter and objectGetter() or {},
        love = love,
        print = print,
        pairs = pairs,
        ipairs = ipairs,
        type = type,
        tostring = tostring,
        tonumber = tonumber,
        table = table,
        math = math,
        string = string,
    }
    setfenv(func, env)

    local success, result = pcall(func)
    if not success then
        return json.encode({error = "Runtime error: " .. tostring(result)})
    end

    -- Handle table results by encoding them
    if type(result) == "table" then
        return json.encode({result = result})
    else
        return json.encode({result = tostring(result)})
    end
end

-- Shutdown server
function mcp_bridge.shutdown()
    -- Close all clients
    for _, client in ipairs(clients) do
        client:close()
    end
    clients = {}

    -- Close server
    if server then
        server:close()
        server = nil
        print("MCP Bridge shut down")
    end
end

-- Simple JSON encoder/decoder
json = {}

function json.encode(obj)
    local t = type(obj)
    if t == "table" then
        local parts = {}
        local isArray = true
        local arraySize = 0

        -- Check if it's an array
        for k, v in pairs(obj) do
            if type(k) ~= "number" then
                isArray = false
                break
            end
            arraySize = arraySize + 1
        end

        if isArray and arraySize > 0 then
            for i, v in ipairs(obj) do
                table.insert(parts, json.encode(v))
            end
            return "[" .. table.concat(parts, ",") .. "]"
        else
            for k, v in pairs(obj) do
                local key = type(k) == "string" and json.encode(k) or tostring(k)
                table.insert(parts, key .. ":" .. json.encode(v))
            end
            return "{" .. table.concat(parts, ",") .. "}"
        end
    elseif t == "string" then
        return '"' .. obj:gsub('\\', '\\\\'):gsub('"', '\\"'):gsub('\n', '\\n') .. '"'
    elseif t == "number" or t == "boolean" then
        return tostring(obj)
    elseif t == "nil" then
        return "null"
    else
        return '"' .. tostring(obj) .. '"'
    end
end

function json.decode(str)
    local pos = 1

    local function skip_whitespace()
        while pos <= #str and str:sub(pos, pos):match("%s") do
            pos = pos + 1
        end
    end

    local function decode_string()
        local result = ""
        pos = pos + 1 -- skip opening quote
        while pos <= #str do
            local char = str:sub(pos, pos)
            if char == '"' then
                pos = pos + 1
                return result
            elseif char == "\\" then
                pos = pos + 1
                local escape = str:sub(pos, pos)
                if escape == "n" then result = result .. "\n"
                elseif escape == "t" then result = result .. "\t"
                elseif escape == "r" then result = result .. "\r"
                elseif escape == "\\" then result = result .. "\\"
                elseif escape == '"' then result = result .. '"'
                else result = result .. escape end
                pos = pos + 1
            else
                result = result .. char
                pos = pos + 1
            end
        end
        error("Unterminated string")
    end

    local function decode_value()
        skip_whitespace()
        local char = str:sub(pos, pos)

        if char == '"' then
            return decode_string()
        elseif char == "{" then
            local obj = {}
            pos = pos + 1
            skip_whitespace()
            if str:sub(pos, pos) == "}" then
                pos = pos + 1
                return obj
            end
            while true do
                skip_whitespace()
                local key = decode_string()
                skip_whitespace()
                if str:sub(pos, pos) ~= ":" then error("Expected :") end
                pos = pos + 1
                obj[key] = decode_value()
                skip_whitespace()
                char = str:sub(pos, pos)
                if char == "}" then
                    pos = pos + 1
                    return obj
                elseif char == "," then
                    pos = pos + 1
                else
                    error("Expected , or }")
                end
            end
        elseif char == "[" then
            local arr = {}
            pos = pos + 1
            skip_whitespace()
            if str:sub(pos, pos) == "]" then
                pos = pos + 1
                return arr
            end
            while true do
                table.insert(arr, decode_value())
                skip_whitespace()
                char = str:sub(pos, pos)
                if char == "]" then
                    pos = pos + 1
                    return arr
                elseif char == "," then
                    pos = pos + 1
                else
                    error("Expected , or ]")
                end
            end
        elseif str:sub(pos, pos + 3) == "true" then
            pos = pos + 4
            return true
        elseif str:sub(pos, pos + 4) == "false" then
            pos = pos + 5
            return false
        elseif str:sub(pos, pos + 3) == "null" then
            pos = pos + 4
            return nil
        else
            local num_str = str:match("^%-?%d+%.?%d*[eE]?[%+%-]?%d*", pos)
            if num_str then
                pos = pos + #num_str
                return tonumber(num_str)
            end
            error("Invalid JSON value at position " .. pos)
        end
    end

    return decode_value()
end

return mcp_bridge

main.lua

并在main.lua中引入这个文件

lua
local mcp_bridge = require("mcp_bridge")

function love.load()
    -- Initialize MCP bridge on port 12345
    mcp_bridge.init(12345)

    -- Provide access to your game objects
    mcp_bridge.setObjectGetter(function()
        return your_game_objects_table
    end)
end

function love.update(dt)
    -- Call this every frame to handle MCP commands
    mcp_bridge.update()

    -- Your game logic here
end

function love.quit()
    mcp_bridge.shutdown()
end

启动游戏

bash
love game/   #在某目录启动游戏
或者
love .   #以当前目录启动游戏

此时就会弹出love2d的默认气球界面

游戏会在端口 12345 上启动一个 TCP 服务器

连接MCP Inspector

这个我不知道有什么用,不过影响不大

powershell

npx @modelcontextprotocol/inspector node build/index.js

就是我们在启动后会进入到浏览器的一个面板,可以自行研究

添加skill

我们使用这个认可度比较高的这个skill

点击前往网站

直接复制给ai让它帮你装

text

Read https://lobehub.com/skills/chongdashu-love2d-pocket-bomber-game-love2d-gamedev/skill.md to understand how to install and use this skill. Install it as documented, then open the installed SKILL.md and follow its instructions. Ask for confirmation before any credential use, external service setup, or irreversible action.

然后就会在项目的根目录生成

然后我们启动一个love2d项目,它自己就可以按照你的提示词调用工具打开love2d

不过光靠ai的效果是一言难尽的,还需要我们大量的纠正和调试

bug

不过这个还是存在一些bug的,例如ai会反复尝试获取报错日志,但是因为未知原因有的时候始终获取不到,

只能靠我们去love2d的窗口来ctrl +C 复制下来错误给它

这个问题还是等这个mcp的作者更新吧

看门狗2打不开解决方案

Mon, 07 Sep 2026 19:14:36 GMT

转载自B站某大佬的方法

本脚本用于解决启动游戏后，出现了个看门狗2的小弹窗，但又没进入游戏加载的情况

安装方法：

1.用记事本或者其它文本编辑器打开WD2_fix.bat
2.找到“set LAUNCHER_PATH”开头的那一行
3.把UbisoftConnect.exe的路径，复制到双引号中，示例：
set LAUNCHER_PATH="C:\Program Files (x86)\Ubisoft\Ubisoft Game Launcher\UbisoftConnect.exe"
或set LAUNCHER_PATH="D:\Ubisoft\Ubisoft Game Launcher\UbisoftConnect.exe"
如果安装育碧启动器时使用了默认的路径则不用改（C盘x86.....），如果是自定义安装路径则要自己重新填写。

使用方法：
1.选中WD2_fix脚本右键，“以管理员身份运行”
2.脚本挂着别动，打开uplay，在游戏库中找到看门狗2然后运行（注意不要以其它方式比如exe直接启动，且确保启动没有带参数比如-eac_launcher）
3.如果没问题的话，过一会应该就能进游戏了。每次进游戏要先运行脚本，只要脚本没关闭，再次从uplay中打开游戏也不需要重新打开脚本

bash
@echo off
chcp 65001 >nul
setlocal enabledelayedexpansion


REM ===== 用户配置区域 =====
REM 在下方LAUNCHER_PATH中设置Uplay启动器完整路径!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
set LAUNCHER_PATH="D:\Uplay\Ubisoft Game Launcher\UbisoftConnect.exe"
set GAME_EXE=SplashScreen.exe
set CHECK_INTERVAL=5
set LAUNCHER_DELAY=3
REM =======================


echo 请在Uplay中启动游戏
echo.

:MAIN_LOOP
tasklist /FI "IMAGENAME eq %GAME_EXE%" | find /I "%GAME_EXE%" >nul
if !errorlevel! equ 0 2>nul (
    timeout /t %LAUNCHER_DELAY% /nobreak >nul
    start "" %LAUNCHER_PATH% 
    :WAIT_FOR_GAME_EXIT
    tasklist /FI "IMAGENAME eq %GAME_EXE%" | find /I "%GAME_EXE%" >nul
    if !errorlevel! equ 0 2>nul (
        timeout /t %CHECK_INTERVAL% /nobreak >nul
        goto WAIT_FOR_GAME_EXIT
    )
)
timeout /t %CHECK_INTERVAL% /nobreak >nul
goto MAIN_LOOP

flutter---CORS问题

Thu, 03 Sep 2026 22:29:37 GMT

Flutter Web 跨域（CORS）问题

本篇为chatgpt总结

1. 什么是 Web 跨域？

在 Web 中，浏览器存在一套安全机制：

同源策略（Same-Origin Policy）

它规定：一个网页默认不能随意读取另一个不同 Origin 的资源。

一个 Origin 由三个部分组成：

text

协议 + 域名 + 端口

例如：

text

123

http://localhost:8080
│      │          │
协议   域名       端口

以下情况都属于不同 Origin：

text

http://example.com
https://example.com

协议不同。

text

https://example.com
https://api.example.com

域名不同。

text

https://example.com:8080
https://example.com:9000

端口不同。

2. 为什么浏览器要限制跨域？

主要是为了安全。

例如用户已经登录了：

text

https://bank.com

浏览器中可能保存着银行网站的 Cookie。

如果任何网站都可以随便读取银行的数据，那么恶意网站：

text

https://evil.com

就可能尝试读取：

text

https://bank.com/account

所以浏览器默认限制：

text

1234

evil.com
   │
   └──────→ bank.com
              ❌

这就是同源策略。

3. 什么是 CORS？

CORS：

Cross-Origin Resource Sharing
跨源资源共享

它是浏览器提供的一种机制，让服务器可以明确告诉浏览器：

“我允许某个 Origin 的网页访问我的资源。”

例如 Flutter Web：

text

http://localhost:8080

请求：

text

https://api.example.com/user

服务器可以返回：

http
Access-Control-Allow-Origin: http://localhost:8080

浏览器看到以后，就允许网页读取响应。

4. Flutter Web 为什么会遇到 CORS？

Flutter 本身不是 CORS 的核心问题。

关键在于：

Flutter Web 最终运行在浏览器中。

例如使用 Dio：

dart
final dio = Dio();

final response = await dio.get(
  'https://api.example.com/user',
);

在 Android 中：

text

1234567

Flutter
   ↓
Dio
   ↓
网络
   ↓
API

一般不会受到浏览器 CORS 的限制。

但是 Flutter Web：

text

1234567

Flutter
   ↓
Dio
   ↓
浏览器 Chrome
   ↓
API

Chrome 会执行浏览器的同源策略和 CORS 检查。

所以：

text

1234567891011

Flutter Web + Dio
        ↓
      Chrome
        ↓
      CORS检查
        ↓
   ┌────┴────┐
   ↓         ↓
允许        不允许
   ↓         ↓
  ✅        ❌

5. Dio 会不会出现跨域问题？

会。

Dio 本身不能绕过浏览器 CORS。

例如：

dart
final response = await dio.get(
  'https://api.example.com/test',
);

如果 API 没有正确配置 CORS：

Chrome Console 可能出现：

text

12345

Access to XMLHttpRequest at
'https://api.example.com/test'
from origin
'http://localhost:xxxxx'
has been blocked by CORS policy

Dio 可能表现为：

text

DioExceptionType.connectionError

或者：

text

XMLHttpRequest error.

所以：

Dio 能发请求 ≠ 浏览器一定允许读取这个请求的结果。

6. 如何判断是不是 CORS？

首先打开：

text

F12
→ Console

如果看到：

text

blocked by CORS policy

基本就可以确定是 CORS 问题。

典型错误：

text

123

Access to XMLHttpRequest at 'https://xxx.com/api'
from origin 'http://localhost:xxxxx'
has been blocked by CORS policy

而 Dio 代码中可能只看到：

text

DioException [connection error]
XMLHttpRequest error

因此：

判断 Flutter Web CORS 问题时，Chrome Console 比 Dio 的异常信息更重要。

7. 为什么有些 API 可以正常访问？

因为服务器已经配置了 CORS。

例如：

http
Access-Control-Allow-Origin: *

表示允许跨 Origin 访问。

所以：

text

1234567891011

Flutter Web
    ↓
Dio
    ↓
API
    ↓
Access-Control-Allow-Origin: *
    ↓
Chrome
    ↓
✅ 200

例如测试：

dart
final response = await dio.get(
  'https://jsonplaceholder.typicode.com/posts/1',
);

如果得到：

text

并不代表 Flutter Web 没有 CORS。

只是说明：

这个 API 允许当前请求跨域访问。

8. Postman 为什么可以请求，而浏览器不行？

这是一个很常见的误区。

例如：

text

Flutter Web → API

出现：

text

❌ CORS

但是：

text

Postman → API

得到：

text

✅ 200

这并不矛盾。

因为：

text

123

Postman
   ↓
API

不是网页浏览器环境。

而：

text

12345

Flutter Web
   ↓
Chrome
   ↓
API

需要遵守浏览器的同源策略。

所以：

Postman 能请求 ≠ 浏览器能请求。

9. 临时解决方法：关闭 Chrome Web Security

开发 Flutter Web 时，可以使用：

text

--disable-web-security

让 Chrome 关闭 Web Security，从而绕过浏览器的 CORS 检查。

一种修改 Flutter SDK 的方法：

① 修改 chrome.dart

找到：

text

flutter/packages/flutter_tools/lib/src/web/chrome.dart

在 Chrome 启动参数的位置添加：

dart
'--disable-web-security',

② 删除 Flutter 缓存

删除：

text

flutter/bin/cache/flutter_tools.snapshot
flutter/bin/cache/flutter_tools.stamp

③ 重新生成 Flutter Tools

执行：

bash

flutter doctor -v

然后重新运行：

bash

flutter run -d chrome

这样 Flutter 启动 Chrome 时，就会带上：

text

--disable-web-security

从而可以用于测试一些没有正确配置 CORS 的 API。

10. ⚠️ --disable-web-security 的注意事项

这个方法本质上是在告诉 Chrome：

关闭浏览器的 Web 安全限制。

因此它适合：

text

123

开发环境
测试
临时调试 CORS

不适合：

text

生产环境
正式部署的网站

因为这不是在真正解决 CORS。

正确的生产环境解决方案应该是：

text

1234567891011

Flutter Web
     ↓
     API
     ↓
服务器配置 CORS
     ↓
Access-Control-Allow-Origin
     ↓
Chrome
     ↓
✅

而不是：

text

1234567

Flutter Web
     ↓
关闭 Chrome 安全策略
     ↓
API
     ↓
✅

11. 正规解决方案

如果 Flutter Web：

text

http://localhost:8080

访问：

text

https://api.example.com

那么后端应该允许：

http
Access-Control-Allow-Origin: http://localhost:8080

生产环境则应该根据实际域名配置，例如：

http
Access-Control-Allow-Origin: https://example.com

也可以根据后端框架配置 CORS。

12. VPN 和 CORS 没有直接关系

VPN：

改变网络连接方式、路由、出口 IP 等。

CORS：

浏览器控制网页是否可以读取其他 Origin 的资源。

所以：

text

12345

VPN 开启
+
API 没有 CORS
=
❌ 仍然可能 CORS

而：

text

12345

VPN 关闭
+
API 正确配置 CORS
=
✅ 正常访问

因此：

VPN 不会自动解决 CORS。

13. Flutter Web + Dio 的完整关系

可以记住这个流程：

text

1234567891011121314151617

                 Flutter Web
                     │
                     ▼
                    Dio
                     │
                     ▼
                  Chrome
                     │
              同源策略 / CORS
                     │
             ┌───────┴───────┐
             │               │
          服务器允许       服务器不允许
             │               │
             ▼               ▼
            ✅              ❌
           200          CORS Error

14. 最重要的几个结论

① CORS 主要是浏览器的问题

不是 Dio 独有的问题，也不是 Flutter 独有的问题。

② Flutter Web 才特别容易遇到

因为 Flutter Web 运行在浏览器中。

③ Dio 不能绕过 CORS

Dio 只是 HTTP 客户端。

④ API 是否允许跨域由服务器配置

常见响应头：

http

Access-Control-Allow-Origin

⑤ Postman 能请求不代表浏览器能请求

因为 Postman 不受浏览器同源策略限制。

⑥ VPN 和 CORS 没有直接关系

VPN 不会自动解决跨域。

⑦ `--disable-web-security` 可以临时测试

Flutter 可以修改：

text

flutter/packages/flutter_tools/lib/src/web/chrome.dart

添加：

dart
'--disable-web-security',

然后删除：

text

flutter/bin/cache/flutter_tools.snapshot
flutter/bin/cache/flutter_tools.stamp

执行：

bash

flutter doctor -v

再：

bash

flutter run -d chrome

但这只是开发调试方案。

一句话记忆

Flutter Web 使用 Dio 请求 API 时，Dio 负责发请求，Chrome 负责执行浏览器安全策略，服务器通过 CORS Header 告诉 Chrome“哪些网页可以读取我的响应”。

所以遇到：

text

blocked by CORS policy

第一反应应该是：

text

12345

F12 → Console
        ↓
确认 CORS
        ↓
检查服务器 CORS 配置

而不是首先修改 Flutter。

安卓termux运行claudecode和codex

Thu, 03 Sep 2026 01:11:53 GMT

本篇介绍在Termux里claudecode等cli的安装

代理工具开启

首先确保VPN代理工具开启，网络流畅

下载Termux

下载termux软件并更新配置

bash

pkg update && pkg upgrade -y

由于在安卓没有办法在Termux直接用npm安装Claudecode，所以我们需要安装其支持的系统如Ubuntu

首先安装proot-distro

核心作用是无需 Root 权限就能在 Android 手机上安装并运行一个完整的 Linux 发行版，比如 Ubuntu,Debian 或 Arch Linux

bash

pkg install proot-distro -y

然后验证版本

bash

proot-distro --version

安装Ubuntu

然后安装Ubuntu 24.04LTS

bash

proot-distro install ubuntu:24.04

然后检查已安装的系统可以看到Ubuntu已安装

bash

proot-distro list

然后进入Ubuntu

bash

proot-distro login ubuntu

成功的话可以看到root@localhost:~#

也就是已经是root模式，不需要在前面添加sudo命令了

然后我们输入以下命令检查环境

bash
uname -a

cat /etc/os-release

echo $HOME

只要是显示为Linux和root即可

安装工具链

更新一下Ubuntu 配置

bash
apt update && apt upgrade -y

安装 Git、curl、jq

bash
apt install -y git curl jq

配置git信息

bash
git config --global user.name "huyangpahuo"

git config --global user.email "3930088367@qq.com"

检查

bash
#查看用户名：
git config user.name

#查看邮箱：
git config user.email

安装 Node.js（推荐方式）

Ubuntu 官方源里的 Node.js 版本通常较旧，Claude Code 需要较新版本。建议用 NodeSource 安装 LTS 版

下载并执行 NodeSource 安装脚本（以 Node 24 LTS 为例）

bash
curl -fsSL https://deb.nodesource.com/setup_24.x | bash -

安装 Node.js（会自动包含 npm）

bash
apt install -y nodejs

在此期间会让你选择时区

我们选亚洲Asia 5 地区上海 Shanghai 69

如果列表没有可以输入More查看更多地区

验证版本

bash
node --version

npm --version

更新 npm 到最新版

bash
npm install -g npm@latest

检查版本

bash

npm --version

安装 Claude Code

直接安装可能报错,这里用--allow-scripts允许执行脚本

bash
npm install -g @anthropic-ai/claude-code --allow-scripts=@anthropic-ai/claude-code

如果安装失败，先卸载再重装

bash
#先卸载
npm uninstall -g @anthropic-ai/claude-code

#再安装
npm install -g @anthropic-ai/claude-code --allow-scripts=@anthropic-ai/claude-code

检查Claude版本

bash

claude --version

我们先配置环境配置，这样Claude code 就不用登录了

把下面命令里的 sk-你的DeepSeek密钥 替换成你的真实 API Key：

设置API地址

bash
echo 'export ANTHROPIC_BASE_URL="https://api.deepseek.com/anthropic"' >> ~/.bashrc

配置deepseekAPI密钥

bash
echo 'export ANTHROPIC_AUTH_TOKEN="sk-你的DeepSeek密钥"' >> ~/.bashrc

配置模型声明1M百万上下文支持

bash
echo 'export ANTHROPIC_MODEL="deepseek-v4-pro[1m]"' >> ~/.bashrc

bash

source ~/.bashrc

安装 cc-switch-skill(可选,针对claudecode)

bash
curl -sSL https://raw.githubusercontent.com/stcatz/cc-switch-skill/main/install.sh | bash

安装脚本会自动把 Skill 安装到：

bash

~/.claude/skills/cc-switch

安装完成后会提示重启 Claude Code 才能使用。先不重启，继续初始化：

第一次运行会自动创建配置目录

bash

~/.claude/skills/cc-switch/scripts/list_providers.sh

查看预设提供商

bash

jq '.presets[] | {name,id}' ~/.claude/skills/cc-switch/presets.json

我们可以在列表看到DeepSeek Official等等预设

不过预设不等于已添加的provider

所以我们需要自己配置

自定义API和提供商的方法（以deepseek为例，虽然我们已经配置环境变量为deepseek的了）

添加 DeepSeek 到 cc-switch

bash
~/.claude/skills/cc-switch/scripts/add_provider.sh \

  --name "DeepSeek" \

  --app claude \

  --key "你的API Key" \

  --url "https://api.deepseek.com/anthropic"

查看已添加的提供商

bash

~/.claude/skills/cc-switch/scripts/list_providers.sh

如果装错API了需要清空

bash

123

~/.claude/skills/cc-switch/scripts/delete_provider.sh \

  --id 粘贴你实际的ID

然后检查一下

bash

~/.claude/skills/cc-switch/scripts/list_providers.sh

如果觉得界面上信息太多了

可以输入clear清除

输入exit退出

然后下一次进入进入Ubuntu

bash

proot-distro login ubuntu

输入claude启动，不过是以root为工作目录的

当然也可以在 Claude Code /cc-switch skill里选择Switch to DeepSeek 快速切换模型或者 List all providers 列出所有提供商（不过这个是让claude帮忙完成，会消耗token）

不过恢复的话也很简单，Ubuntu执行

bash
cat ~/.claude/settings.json先查看当前配置

nano ~/.claude/settings.json进行编辑

 Ctrl + O  →  Enter  保存

 Ctrl + X  退出

cat ~/.claude/settings.json再次检查

或者直接删除

bash

rm ~/.claude/settings.json

安装Codex

codex则不需要标记--allow-scripts，由于每个月有免费额度,所以这里不再推荐接其他模型的api

bash
npm install -g @openai/codex

授权termux手机存储的访问

由于termux默认无法对安卓文件系统操作,所以需要授权,这样ai才能在我们文件夹创建的目录工作

termux终端输入

bash

termux-setup-storage

然后进入指定目录例如

bash

/storage/emulated/0/MyProject

看看是否可以访问

注意路径不要有中文

检查是否能用

由于Android和Ubuntu的文件系统表示方式不太一样，所以还需要操作

我们进入Ubuntu

输入

bash

ls /storage/emulated/0

看看Ubuntu是否能访问Android文件

可以访问就执行进入文件路径

bash

cd /storage/emulated/0/MyProject

此时在Ubuntu里显示的是

bash

/mnt/sdcard/MyProject

实际上是同一个路径，只是表达方式不同

然后启动打开codex或者claude 输入提示词,例如“我需要你帮我生成一个简单的个人blog放在当前工作区....”

然后就可以看到这个文件夹里有生成的脚本,就大功告成啦

说实话,真的不如手机上远程连接电脑

试试新出的DeepseekHarness和Pi

Thu, 03 Sep 2026 01:11:53 GMT

Deepseek harness和pi最近很火爆,也算是AI圈朝秦暮楚的常态了

事不宜迟,旅游回家后第一件事就是下载一个看看

DeepseekHarness

点击前往

text

npx @deepseek-ai/dsh web

这个是终端输入dsh web启动作为后台,在网页运行的,功能采用插件式,和codex很像啊

当然这个东西也有网页套壳子的,就是这个,不过下载启动了这个就无法再使用dsh web命令了,这个软件会抢占并监听本地3080端口

点击前往下载

Pi

这个本质cli,在终端输入pi就可以启动了

text

npm install -g --ignore-scripts @earendil-works/pi-coding-agent

还有带有web UI端的可以了解一下,直接输入pi-web就能获得UI界面,比CLI操作方便多了

点击前往

text

npm install -g @agegr/pi-web@latest
pi-web

貌似用处都不是很大

JsonCrack---让json和yaml可视化

Fri, 17 Jul 2026 17:20:09 GMT

这个感觉非常实用尤其是对于大型json和yaml的查看和修改

点击前往下载

这个在VScode里也有插件

使用方法就是打开一个json文件并点击这里

不过付费版本的更好看,相比开源版还多支持了一个Mermaid图

付费版也有mcp和skill

powershell

npm install -g @todiagram/todiagram-mcp
npx skills add todiagram/skills --skill diagram

然后搭建

yaml
{
  "mcpServers": {
    "todiagram": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@todiagram/todiagram-mcp@latest"
      ],
      "env": {
        "TODIAGRAM_API_KEY": "your-api-key-here"
      }
    }
  }
}

或者把项目克隆到本地后运行

本地的缺点是太慢了,虽然可以部署到服务器的Docker,不过感觉浪费服务器空间,因为全部文件将近一个G

其实用官方的那个网站就行了

然后创建bat自启动脚本快速启动

powershell
@echo off
cd /d "D:\jsoncrack.com\jsoncrack.com"
cmd /k pnpm dev
start http://localhost:3000

然后在浏览器访问这个localhost本地服务器网址

然后就可以用了

AutoHotkey---TyporaWriterKit工具制作

Thu, 16 Jul 2026 23:11:19 GMT

自定义生成hexo 的 YAML front matter

思路不唯一,目前仅限我使用的hexo的主题,由于不同blog的yaml front matter可能天差地别

所以后续会更改为自定义化属性和字段

点击前往下载

凑合着用还行

目前是和md字体颜色生成器融合

浏览器插件推荐

Thu, 16 Jul 2026 18:24:23 GMT

昨天chrome的谷歌账号掉了结果就是浏览器插件都消失了

幸好谷歌有云备份,但是只有一小部分恢复了,于是我还得一个一个的下回来

以防万一我还是把我常用的插件在这里记录一下吧

首先确保chrome浏览器打开了开发者模式

广告屏蔽类

Ad Blocker: Stands AdBlocker

AdBlock - 拦截整个网络的广告

Adblock Plus - 免费的广告拦截器

AdGuard 广告拦截器

uBlock Origin Lite

Youtube视频播放类

'Improve YouTube!' 🎧 (for YouTube & Videos)

Adblock for YouTube™

Dmooji - YouTube弹幕和AI角色聊天

Enhancer for YouTube™

Global Speed: 视频速度控制

SponsorBlock for YouTube - 跳过赞助商广告

Video Speed Controller

过滤广告為 Youtube™

语言翻译类

DeepL：人工智能翻译器和写作助手

Google 翻译

Trancy - AI 翻译 & 双语字幕

沉浸式翻译 - AI 双语网页翻译 | PDF翻译 | 视频翻译 | 漫画翻译

鼠标工具提示翻译器 - PDF 和 Netflix Youtube 双字幕

Github增强类

Enhanced GitHub

GitZip for github

Material Icons for GitHub

Octotree - GitHub code tree

Refined GitHub

视频图片下载类

AIX智能下载器(图片/视频/音乐/文档)

BiliBili 字幕提取器

Billfish - 免费素材管理工具V4.0

codebox-AI下载文章

IDM Integration Module

Video Download Helper

Video Downloader Professional

哔哩哔哩 Downloader

关键词查询类

Context Menu Search

网站体验优化类

Save Chrome Tabs For Later

Dark Reader

Don't Close Window With Last Tab

HeadingsMap

Speed Dial [FVD] - New Tab Page, 3D, Sync...

Voyager

WebRTC Leak Shield

书签侧边栏

扩展管理器（Extension Manager)

开发工具类

Responsive Viewer

User-Agent Switcher for Chrome

篡改猴

其中篡改猴需要额外设置

然后去greasyfork 找你需要的插件下载即可,这里什么类型的脚本都有

然后可以管理已下载插件

当然还有数不胜数的插件,不过适合自己的才是最好的

使用VScode配置C和CPP环境

Wed, 15 Jul 2026 14:06:02 GMT

关于VS和Clion破电脑带不动,所以用VScode配置环境

这个记录一下吧,防止以后换电脑不知道咋配了

这是微软官方的教程,不过写的也太草率了点

https://code.visualstudio.com/docs/languages/cpp

下载VScode插件

把这个包装进去,当然你也可以装第一个的Code runner

下载MinGW64

点击前往下载

双击启动然后指定MinGW64的安装路径之后无脑下一步

然后安装完成弹出来一个小黑框

输入代码并回车来安装工具链(最好挂梯子,防止下载失败)

text

pacman -S --needed base-devel mingw-w64-ucrt-x86_64-toolchain

然后先回车默认安装所有的东西

然后当提醒是否继续时回车或者输入 y

然后稍等片刻就下载完了

然后把ucrt64加入到系统path路径

先找到ucrt64的bin文件位置

然后添加到Path

然后输入这几个命令检测一下

东西	作用
gcc	C编译器
g++	C++编译器
gdb	调试器

text

123

gcc --version   
g++ --version
gdb --version

①Coderunner插件下的使用方式(最简单)

我们测试一下C语言,可以

C++也可以

对了,说起来,好像在liunx里是自带gcc g++这些东西,直接使用gcc 文件名.c -o 文件名 g++ 文件名.cpp -o 文件名这种就可以编译运行c和c++程序

不过这个是单个文件的,我们要实现运行整个项目的文件需要这样改

首先打开这个配置文件Setting.json,找到这里

将其分别改为(即$fileName 改成*.c 或*.cpp 然后 $`dir$ fileNameWithoutExt 改成.\ $fileNameWithoutExt.exe`)

因为原版是对单个文件编译运行的,这里改成多个关联文件运行

json
//原版本
"c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
//修改后
"c": "cd $dir && gcc *.c -o $fileNameWithoutExt && .\\$fileNameWithoutExt.exe"
//固定名字版本(推荐)
"c": "cd $dir && gcc *.c -o program.exe && .\\program.exe"

json
//原版本
"cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
//修改后
"cpp": "cd $dir && g++ *.cpp -o $fileNameWithoutExt && .\\$fileNameWithoutExt.exe"
//固定名字版本(推荐)
"cpp": "cd $dir && g++ *.cpp -o program.exe && .\\program.exe"

我们分别测试一下

C++多文件程序

C语言多文件程序

接下来我要说的就是这个插件的缺点

我们刚才配置的是“.\$fileNameWithoutExt.exe”意思是根据当前文件名配置exe,但是就会导致在不同的文件上运行时,诞生出来了不同名字的exe,尽管结果一样

解决办法就是把$fileNameWithoutExt.exe改成一个具体的名字例如program.exe,这样就不会有这种问题了

最大的缺点就是我们对项目参与的脚本是否全部有用无从得知,一旦混进去无用脚本很难找出来

② C/C++ Extension Pack(常用)

注意,下载这个插件包之后千万千万千万不要再下载这个clangd插件,因为会和微软的产生冲突,导致右上角的三角形调试按钮消失(浪费一个下午才找出来原因,我还以为是VScode坏了,气死我了,为什么我一开始没想到是插件冲突的问题,真是的),不过clangd确实在智能补全上比微软的要好,不过目前我们先用微软的,这两个是二者不可得兼的

其他大佬的配置方法例如CSDN上的和知乎上的方法是task.json文件+ launch.json什么的

原理和Coderunner差不多,这里我还是实践一下吧

text

输入C/C++，选择“Edit Configurations(UI)”

可以打开配置面板

当然也可以从这里打开

然后我们设置为gcc.exe (C语言编译器)或者g++.exe(C++编译器)

下面的Windows-gcc-64不要改保持默认

然后设置完毕可以看到在.vscode文件夹多了一个c_cpp_properties.json文件

可以看到我们当前使用的是C语言编译器gcc.exe

此时我们就可以点击这个编译运行了

我们重新创建一个新的C语言文件,然后点击调试运行后,在.vscode文件夹中出现了tasks.json文件以及exe文件

我们试一下scanf输入输出有没有问题

对了这里提一嘴

我们在visual studio里的C项目使用scanf的时候需要在这里加一句,不然会报错,详细过程参考大佬文章

步骤：项目 -> 属性 -> C/C++ -> 预处理器 -> 预处理定义 -> 编辑 -> 加“_CRT_SECURE_NO_WARNINGS 1”

而在Dev C++和小熊猫C++这种轻量C/C++编译器里分别需要在编译的时候加上这一句,这样控制台输出的中文就不会是乱码了

c
-finput-charset=UTF-8 -fexec-charset=GBK      //小熊猫C++
-finput-charset=UTF-8 -fexec-charset=UTF-8    //Dev C++

OK回归正题

当然这只是单个文件的,我们如果要多个文件运行的话需要对tasks.json做一些调整

如图

我们先将其改为这样试试看

json
"args": [
        "-fdiagnostics-color=always",
        "-g",
        // "${file}",
        "*.c",
        "-o",
        // "${fileDirname}\\${fileBasenameNoExtension}.exe"
        "${fileDirname}\\program.exe"
      ],

然后保存后,我们创建launch.json文件,使用gdb调试

ok,我们获得了这个launch.json文件,此时我们需要添加配置

选择这个C/C++: (gdb) 启动

然后我们需要修改的只有两个地方

第一个是项目名称,我们和之前的${fileDirname}\\program.exe保持一致,第二个是gdb调试器的路径,这个我们需要改为我们实际的路径

比如我的是在这里

json
"program": "${fileDirname}\\program.exe",

很好,接下来我们验证一下,使用多文件项目测试,但是出现了这个问题

原因是我们task.json之前用的这个*.c ,VScode官方提到过多文件通配符需要显式列文件或者使用构建系统,也就是*.c 或者* .cpp在这个新版本插件里不适用(旧版可能适用)

所以我们还是一个一个的把文件添加上去吧,然后把cwd修改成"cwd": "${fileDirname}" 即当前工作目录 = 当前打开文件所在目录

json
"options": {
        // "cwd": "D:/MinGW-W64/ucrt64/bin"
        "cwd": "${fileDirname}"
      },

ok,调试成功

想必你也发现了-----我们光配置这个环境就浪费了这么多时间,而且可复用性低,而且难以管理文件,每次新开一个项目还都需要我们手动修改配置文件

所以我们接下来要讲的方法是Cmake + clang

③ CMake Tools (推荐)

对了,你肯定会注意到CMake Tools下方的CMake插件的存在,emmm,这个是因为以前CMake Tools以前是依赖这个东西的语言服务的,而现在更新了不需要了,可下可不下

我们之前提到的的那个 clangd插件,这里是需要的,这里我们不再依赖gcc,而是使用clang,clang的编译速度大于gcc,而且报错的时候的提示更现代

我们先在vscode的设置文件settings.json里把微软的这个智能补全由“default”设置为“disabled”,如果有一天你想要换回方案二就将其设置为default然后禁用 clangd插件

既然你决定使用Clangd插件,那么我们一不做二不休,把Clang也下载了,clang和gcc一样可以运行c或者c++程序

点击前往下载Clang 我们下载后把llvm的bin文件夹添加到系统path路径

这个就是VScode官方推荐的方式,CMake 不是编译器，而是构建系统生成器,任何大型cpp和c项目离不开Cmake

比如我们熟悉的flutter也是用Cmake构建和打包项目的

我们先下载cmake 点击前往下载提一嘴,cmake最新版本支持安卓了!

下载完记得把bin文件配置到path路径

然后这个东西有GUI界面的(不知道什么用,你们可以研究一下)

然后我们去下载Ninja 点击前往下载

把这个ninja exe放到Cmake的bin文件夹就行了(主要是ninja只有一个exe,图方便,你们要是介意也可以放到其他地方然后把它的路径加到系统path里面去),ninja是一个现代的快速构造工具

OK我们验证一下

很好,接下来要开始了

先按Ctrl + Shift + P 输入CMake: Quick Start并选择

然后第一步给Cmake项目命名,这里你可以保持默认

然后选择项目的语言,我们就用C++吧

然后问创建可执行文件Executable还是创建库Library,这里我们创建可执行文件Executable,毕竟我们要试验一下能不能用

然后就是测试工具Ctest和打包工具Cpack,可选可不选,这里我先都勾选上

然后我们得到了这三个东西

然后我们 Ctrl + Shift + P 指定工具包

text

CMake: Select Kit

我们选择Clang 如果你安装了但是没有显示,可以先扫描一下退出重进就可以看到有了(虽然你也可以用gcc,但我不推荐,因为还要多配置)

然后选择之后就可以了,于是我们现代化标准的C++环境已经搭建完成

然后我们开始build,build有两种方式,第一种就是

text

Cmake: Build

第二种就是点击下方的这个齿轮bulid(生成)

然后得到

最后我们终于可以运行项目了!

使用快捷键 ctrl + shift +F5 运行项目得到

text

CMake: Run Without Debugging

如果我们要调试的话可以按shift + F5

这里我们测试多文件项目,把cpp文件添加到cmakelists的add_executable里面

这个可以让AI给你写几个

然后由于cmakelists发生了变动我们需要重新构建

text

CMake: Configure
CMake: Build   或者 点击vscode下方的齿轮

然后Ctrl + shift +F5或者点击VScode下方的小虫子旁边的小三角运行,调试就是小虫子

成功得到结果

cmake
# 指定 CMake 最低版本要求
# 意思：
# 如果用户电脑上的 CMake 版本低于 3.10，则停止配置
cmake_minimum_required(VERSION 3.10.0)


# 定义项目
#
# 参数：
# VScodeScriptTest  -> 项目名称
# VERSION 0.1.0     -> 项目版本
# LANGUAGES C CXX   -> 项目使用的语言
#
# C   = C语言
# CXX = C++
#
# 如果不写 LANGUAGES，默认会启用 C 和 C++
project(
    VScodeScriptTest
    VERSION 0.1.0
    LANGUAGES C CXX
)


# 创建一个可执行程序
#
# 参数：
#
# 第一个参数：
# VScodeScriptTest
# 
# 是生成的目标(target)名字
#
# 后面的：
# main.cpp
# Player.cpp
# Enemy.cpp
#
# 是参与编译的源文件
#
# 最终生成：
#
# Windows:
# VScodeScriptTest.exe
#
add_executable(
    VScodeScriptTest

    main.cpp

    Player.cpp
    Enemy.cpp
)


# 引入CTest模块
#
# CTest是CMake自带的测试系统
#
# 作用：
# 管理单元测试
#
include(CTest)


# 开启测试功能
#
# 开启后：
#
# 可以使用:
# ctest
#
# 来执行测试
enable_testing()



# 设置CPack打包项目名称
#
# ${PROJECT_NAME}
#
# 是变量
#
# 它的值就是：
# VScodeScriptTest
#
set(
    CPACK_PROJECT_NAME 
    ${PROJECT_NAME}
)



# 设置打包版本
#
# ${PROJECT_VERSION}
#
# 来自：
#
# project(
# VERSION 0.1.0
# )
#
set(
    CPACK_PROJECT_VERSION
    ${PROJECT_VERSION}
)



# 引入CPack
#
# CPack负责生成安装包
#
# 例如：
#
# Windows:
# .exe安装程序
#
# Linux:
# .deb
#
# macOS:
# .dmg
#
include(CPack)

最后

C++我最近看到一个很好看的GUI库点击前往下载,也是基于Cmake的,就是不太成熟而且并不像其宣传的那样内存占用低,不过其实还有更成熟的库比如imgui这种

DiskGenius使用

Wed, 15 Jul 2026 12:05:10 GMT

最近C盘不够用了,于是用DiskGenius给把D盘的空间分C盘一点

点击下载软件

首先右键点击要分出去的盘,选择调整分区大小

不过提前提醒一下,C盘和D盘必须为相同类型的盘,比如都是固态硬盘或机械硬盘,否则无法互通

然后查看我们磁盘的位置,可以看到C盘位于D盘的左边

那么我们就在分区前部的空间输入例如30GB ,提醒一下,确保D盘有充足的空余空间,否组分配多的话会造成D盘磁盘数据损毁

这个如果要分配的磁盘位于D盘的右边就选择分区后部的空间,目的是让分出的空间离目标盘相邻

然后选择合并到Windows(C:),选择完成后关机或者重启,然后点击开始

然后就会弹出来一个提醒的弹窗问你是否确认开始分区,点击是然后就不要再操作电脑了,接下来是全自动操作了

最终C盘就会得到30GB,而D盘则会减少30GB

解决jetbrains的Rider等软件打开慢的问题

Wed, 15 Jul 2026 12:05:10 GMT

众所周知Jetbrains家的编辑器全都是内存怪兽

比如IDEA Rider pycharm这些东西,对普通电脑十分不友好,容易编译一半软件就崩溃

尤其是unity , 当rider加载unity项目时都要好几分钟,C#脚本编译速度就更别提了

之前在网上看到一个大佬给出了方法就是调整GC上限什么的

就是在rider下载文件夹里找到这个文件,用记事本打开

然后调整堆内存上限为4096m 下限为1024m m代表MB

text

-Xms1024m
-Xmx4096m

并调整代码缓存大小,这个一般情况下调的越大越好

text

-XX:ReservedCodeCacheSize=960m

然后增加一句字符串共用什么的来节省内存(可加可不加)

text

-XX:+UseStringDeduplication

然后保存重启,就会发现rider流畅了很多,以前滚动界面上的代码都一卡一卡的

不过我还是喜欢用VScode这种,就是配置麻烦了点

unity和godot的反编译工具

Sun, 12 Jul 2026 20:40:40 GMT

反编译,又俗称解包

Unity反编译软件AssetRipper

点击前往下载

使用方法是本地服务器作为后台,浏览器作为操作界面

然后此时你可以看到后台开始工作,输出一大堆日志,这个反编译是根据游戏包的体积来定的,如果游戏不到两个G,不到3分钟就反编译成功,如果游戏大于6个G,大约需要二三十分钟

如果完成这个“No Files Loaded”会变成绿色按钮,点击会进入一个新的界面,,然后勾选“导出为unity项目”并选择保存文件夹

此时会得到这两个文件夹

但是无法作为项目运行,只能获得代码和资源

Godot反编译软件gdsdecomp

点击前往下载

这个由于godot是开源的软件,所以所有的东西都是公开的,反编译一定就是100%反编译,不像unity是黑盒

不信的话你们可以把杀戮尖塔土豆兄弟反编译试一下,就会发现反编译出来的项目居然可以编译运行

然后就是使用方式也很简单,直接把这个godot游戏的exe拖进去

然后反编译成功后选择文件夹导出即可

Love2d的反编译

最经典的就是小丑牌,emmm这个其实无需反编译,因为直接右键小丑牌exe文件然后用7zip解压此文件就行了,然后就得到所有的文件了

事实上love2d打包游戏的方式本质上就是zip rar而且love2d甚至都不是引擎只是一个框架

Unity的MCP配置

Mon, 15 Jun 2026 10:44:44 GMT

AI目前已经开始进入游戏制作业了

插个眼,因为这是我第一次用这么nb的东西,我以前认为这玩意只会让项目混乱,现在看来是我错了

首先在unity中通过git链接添加包

text

https://github.com/CoplayDev/unity-mcp.git?path=/MCPForUnity#main

然后检查环境,

没有UV的可以装一个

text

pip install uv

然后在这些编译器和agent里安装MCP

然后启用服务器

弹出终端后台

然后你可以在claude codex opencode里看到mcp已经添加

例如在codex里试用

于是就添加成功了

这玩意甚至还遵循我的脚本结构,把文件放到正确的文件夹太强了

UnityShaderGraph---地形渲染

Tue, 09 Jun 2026 22:13:36 GMT

我们今天学习Unity的地形渲染

我们可以看这个shader脚本的前五个属性

创建地形分层shader

首先创建一个有光照lit的shadergraph

然后添加如下节点

由于这些材质会默然在inspector暴露参数,我们需要取消勾选每一个“Exposed”不再暴露在inspector (注意: 如果你是unity 6 用户,取消勾选 show in inspector) ,然后勾选每一个sprite的 Use Tilling and offset(平铺与偏移),并将Fragment里的smoothness平滑值设为0(这个我们之前说过,当这个不为0时材质表面上会出现一层像陶瓷轴一样的反光,这里我们不需要这个效果)

Use Tiling and Offset 用于控制纹理是否自动应用材质面板中的 Tiling（平铺） 和 Offset（偏移） 参数。启用后，Shader 会自动对 UV 执行 UV × Tiling + Offset 计算，使开发者和美术能够直接在材质球中调整纹理的重复次数和偏移位置，而无需修改 Shader Graph。对于普通贴图材质通常建议开启，对于已经手动处理 UV 的效果（如流动纹理、Triplanar、世界空间映射等）则通常关闭以避免重复计算。

我们们首先实现模型的材质的分层,添加一个control层和四个sprite层,这个是对应代码里的Control和四个图层

text

12345

 [HideInInspector] _Control("Control (RGBA)", 2D) = "red" {}
 [HideInInspector] _Splat3("Layer 3 (A)", 2D) = "grey" {}
 [HideInInspector] _Splat2("Layer 2 (B)", 2D) = "grey" {}
 [HideInInspector] _Splat1("Layer 1 (G)", 2D) = "grey" {}
 [HideInInspector] _Splat0("Layer 0 (R)", 2D) = "grey" {}

标准unity地形系统支持四个纹理层,地形系统通过名为Control的首个纹理将数据传输至着色器,也就是我们添加的control纹理,纹理的每个色彩通道都记录了地形对应位置某个图层的强度值,

所以红色通道对应的是第一层,也就是Sprite0

绿色通道对应的是第二层,也就是Sprite1

蓝色通道对应的是第三层,也就是Sprite2

alpha通道对应的是第四层,也就是Sprite3

而这里为了实现这个效果,可以直接用各个sprite层直接乘以control层的各个颜色的通道值,然后依此相加,最后将效果叠加到基础色上

目前已经可以实现分层了,但是为了让山体地形更真实,我们需要特殊处理一下

需要获取地形表面的法向量,检测y轴分量,若接近1或者-1就是近乎水平的地面,若接近0表示检测到的是斜坡地形

我们添加两个浮点参数:

normal start 用于控制y分量阈值用于判定岩石面的起始位置,设置为默认值为0.5取值范围0-1的slider

normal end 用于控制岩石面的终止边界,默认值设为0.6取值范围0-1的slider

然后使用normal vector法向量节点用split分离出y向量(也就是G通道),并使用smoothstep平滑过渡节点在normal start和normal end之间

这里复习一下这个节点: 当输入值小于第一个边界值时,节点输出0,当数值大于edge2时,节点输出1,当输入值介于两者之间的时候,输出值会呈现为从0-1的平滑过渡曲线

可以看到球体垂直面显示的是黑色,而顶部平坦区域显示为白色,这里不会出现全黑的情况,因为在unity实际地形环境中发现向量的y分量不会出现负值

然后我们把第一层和第二层使用smoothstep传入的参数来线性插值,并和control节点的R通道相乘

我们从模型网站下载一个山体的obj免费模型,然后添加合适的材质图通过调整参数来修改山体的效果,这样就可以实现了山体的材质(不过如字面意思,这就是贴图,和无人深空,荒野大镖客,黑神话悟空这些可交互地形这些没法比)

扫描地形效果

我们做一个扫描地形的效果

添加一个颜色节点并设置为HDR

由于手动控制地形扫描效果过于麻烦,我们可以使用C#脚本

csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class WorldScanner : MonoBehaviour
{
    public float scanSpeed;
    public Terrain terrain;

    private Material terrainMaterial;
    private float scanDistance;

    void Start()
    {
        terrainMaterial = terrain.materialTemplate;
        scanDistance = 1000f;
    }


    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            Vector3 mousePos = Input.mousePosition;
            if (Physics.Raycast(Camera.main.ScreenPointToRay(mousePos), out RaycastHit hitInfo))
            {
                terrainMaterial.SetVector("_ScanOrigin", hitInfo.point);
                scanDistance = 0.0f;
            }
        }
        scanDistance += scanSpeed * Time.deltaTime;
        terrainMaterial.SetFloat("_ScanDistance", scanDistance);
    }
}

但是之前我们为了节省时间直接从素材网站上下载的山的模型

unity其实自带了地形系统

其实我们可以自己刷一个,首先创建一个terrain

然后切换为set height并选择合适的笔刷来绘制地形

1. Set Height（设置高度）

作用：将地形特定区域的高度设置为一个固定值。
用法：先设定目标高度（Height），然后在地形上刷涂，被刷到的区域会被"压平"到该高度。
应用场景：创建平台、湖泊底部、道路基础层，或平整出建筑地基。
关键参数：Height 滑块决定目标高度；配合 Opacity 控制过渡强度。

2. Smooth Height（平滑高度）

作用：柔化地形高度的不规则起伏，消除尖锐的棱角和噪点。
用法：像橡皮擦一样在崎岖区域刷涂，使相邻顶点的高度差异变小。
应用场景：人工雕刻地形后消除锯齿感；让陡峭悬崖过渡更自然；修复笔刷留下的硬边。
注意：过度使用会让地形失去细节，变得"圆滑过度"。

3. Paint Texture（绘制纹理）

作用：在地形表面绘制不同的材质纹理（如草地、泥土、岩石、雪地）。
用法：先在 Terrain 的 Paint Texture 标签页添加纹理图层（Layers），每个图层包含漫反射贴图、法线贴图等，然后选择图层进行绘制。
关键概念：
- Splat Map（ splat 贴图）：Unity 使用 RGBA 通道混合最多 4 个纹理作为一个 Terrain Layer，多个 Layer 会自动分配额外的 splat 贴图。
- Target Strength：控制绘制强度（0-1），实现纹理过渡混合。

4. Paint Holes（绘制孔洞）

作用：在地形网格上"挖洞"，使该区域的 terrain 几何体不渲染。
用法：刷涂后该区域变成透明/空洞，可以看到地形下方的物体。
应用场景：制作洞穴入口、地下通道、地窖、竖井，或让地形与地下场景衔接。
注意：
- 孔洞是真正的几何缺失，不是透明材质。
- 需要配合其他几何体（如洞穴模型）填补空洞，否则会看到背面或天空盒。

5. Stamp Terrain（印章地形）

作用：像盖章一样将预设的高度图（Heightmap）印记到现有地形上。
用法：选择一个高度图纹理（通常是灰度图），调整大小、旋转、高度倍数后，点击地形放置。
应用场景：快速生成特定形状的山峰、陨石坑、台地；批量制作重复地貌特征；导入外部软件（如 World Machine）生成的高度图进行局部叠加。
特点：属于非破坏性/半破坏性编辑，可以预览后再确认，适合程序化生成内容。

6. Raise or Lower Terrain（升高或降低地形）

作用：最基本的地形笔刷，增加或减少地形高度。
用法：
- 左键刷涂：升高地形（Raise）。
- 按住 Shift + 左键刷涂：降低地形（Lower）。
应用场景：徒手雕刻山脉、山谷、河床；快速搭建地形大形。
关键参数：
- Brush Size：笔刷半径。
- Opacity：单次刷涂的强度/高度变化量。
- Brush Shape：圆形、柔边等笔刷形状影响过渡自然度。

总结对比表

工具	核心功能	破坏性	典型用途
Raise/Lower	自由升降高度	直接修改高度图	大形雕刻、山脉河谷
Set Height	固定到目标高度	强制平整	平台、地基、湖床
Smooth	模糊高度差异	平滑现有高度	消除锯齿、柔化过渡
Paint Texture	绘制地表材质	修改 splat 贴图	草地、岩石、道路
Paint Holes	删除局部网格	产生空洞	洞穴、地窖入口
Stamp	叠加预设高度图	叠加式修改	特定地貌、程序生成

画好地图后来给地图上材质,首先切换为PaintTexture模式

我们点击添加图层,添加纹理并绘制,当然没有的话也可以用现有的texture来create一个

然后我们的一坨山脉就做好了

UnityShaderGraph---自定义函数

Mon, 08 Jun 2026 15:10:23 GMT

今天来看自定义函数

因为部分想要的效果无法通过unity内置的节点实现,所以我们可以自定义函数

众所周知,unity的shdergraph本质上是shader的HLSL和ShaderLab代码的可视化,这是计算机图形学的内容

但是shadergraph具有一定的局限性,比如同样的shadergraph换一个引擎就不能用了,以及部分效果无法用节点实现

如果你对脚本版本的shader感兴趣可以学一下方便理解节点(不过我数学不好,看不懂)

我们复用之前学习自定义光照时的celshaded的shadergraph

我们首先创建自定义节点

然后自己在VScode或者VS或Rider里创建一个hlsl文件

在 Unity Shader Graph 中，Precision（精度） 指的是节点和整个 Shader 计算时使用的数值精度类型。它主要影响 GPU 性能、内存占用 和 渲染质量

精度	全称	说明	适用场景
Half	16-bit floating point (fp16)	低精度，计算快，占用少	颜色、UV、简单运算、移动设备
Single(float)	32-bit floating point (fp32)	高精度，计算慢，占用多	位置、深度、复杂数学运算、需要高精度的效果

我们在hlsl里输入以下代码,这里就直接给完整的

hlsl
#ifndef ADDITIONAL_LIGHT_INCLUDED
#define ADDITIONAL_LIGHT_INCLUDED

void MainLight_float(float3 WorldPos, out float3 Direction, out float3 Color, out float Attenuation)
{
#ifdef SHADERGRAPH_PREVIEW
    Direction = normalize(float3(1.0f, 1.0f, 0.0f));
    Color = 1.0f;
    Attenuation = 1.0f;
#else
    Light mainLight = GetMainLight();
    Direction = mainLight.direction;
    Color = mainLight.color;
    Attenuation = mainLight.distanceAttenuation;
#endif
}

void MainLight_half(half3 WorldPos, out half3 Direction, out half3 Color, out half Attenuation)
{
#ifdef SHADERGRAPH_PREVIEW
    Direction = normalize(half3(1.0f, 1.0f, 0.0f));
    Color = 1.0f;
    Attenuation = 1.0f;
#else
    Light mainLight = GetMainLight();
    Direction = mainLight.direction;
    Color = mainLight.color;
    Attenuation = mainLight.distanceAttenuation;
#endif
}

void AdditionalLight_float(float3 WorldPos, int lightID, out float3 Direction, out float3 Color, out float Attenuation)
{
    Direction = normalize(float3(1.0f, 1.0f, 0.0f));
    Color = 0.0f;
    Attenuation = 0.0f;

#ifndef SHADERGRAPH_PREVIEW
    int lightCount = GetAdditionalLightsCount();
    if(lightID < lightCount)
    {
        Light light = GetAdditionalLight(lightID, WorldPos);
        Direction = light.direction;
        Color = light.color;
        Attenuation = light.distanceAttenuation;
    }
#endif
}

void AdditionalLight_half(half3 WorldPos, int lightID, out half3 Direction, out half3 Color, out half Attenuation)
{
    Direction = normalize(half3(1.0f, 1.0f, 0.0f));
    Color = 0.0f;
    Attenuation = 0.0f;

#ifndef SHADERGRAPH_PREVIEW
    int lightCount = GetAdditionalLightsCount();
    if(lightID < lightCount)
    {
        Light light = GetAdditionalLight(lightID, WorldPos);
        Direction = light.direction;
        Color = light.color;
        Attenuation = light.distanceAttenuation;
    }
#endif
}

void AllAdditionalLights_float(float3 WorldPos, float3 WorldNormal, float2 CutoffThresholds, out float3 LightColor)
{
    LightColor = 0.0f;

#ifndef SHADERGRAPH_PREVIEW
    int lightCount = GetAdditionalLightsCount();

    for(int i = 0; i < lightCount; ++i)
    {
        Light light = GetAdditionalLight(i, WorldPos);

        float3 color = dot(light.direction, WorldNormal);
        color = smoothstep(CutoffThresholds.x, CutoffThresholds.y, color);
        color *= light.color;
        color *= light.distanceAttenuation;

        LightColor += color;
    } 
#endif
}

void AllAdditionalLights_half(half3 WorldPos, half3 WorldNormal, half2 CutoffThresholds, out half3 LightColor)
{
    LightColor = 0.0f;

#ifndef SHADERGRAPH_PREVIEW
    int lightCount = GetAdditionalLightsCount();

    for(int i = 0; i < lightCount; ++i)
    {
        Light light = GetAdditionalLight(i, WorldPos);
        
        float3 color = dot(light.direction, WorldNormal);
        color = smoothstep(CutoffThresholds.x, CutoffThresholds.y, color);
        color *= light.color;
        color *= light.distanceAttenuation;

        LightColor += color;
    } 
#endif
}

#endif // ADDITIONAL_LIGHT_INCLUDED

我们这个脚本运用到刚才的自定义函数 Mainlight节点上,并设置输入 vector3类型的worldpos(世界坐标) 输入和 vector3类型direction(方向) 和 Color (颜色)以及浮点类型的Attenuation(虚弱) 输出

此时不再使用之前的 main light direction主光源节点和 negate取反节点

先实现主要的参数

hlsl
#ifndef ADDITIONAL_LIGHT_INCLUDED
#define ADDITIONAL_LIGHT_INCLUDED

//这个是单精度模式
void MainLight_float(float3 WorldPos, out float3 Direction, out float3 Color, out float Attenuation)
{
#ifdef SHADERGRAPH_PREVIEW
    Direction = normalize(float3(1.0f, 1.0f, 0.0f));
    Color = 1.0f;
    Attenuation = 1.0f;
#else
    Light mainLight = GetMainLight();
    Direction = mainLight.direction;
    Color = mainLight.color;
    Attenuation = mainLight.distanceAttenuation;
#endif
}

//这个是半精度模式
void MainLight_half(half3 WorldPos, out half3 Direction, out half3 Color, out half Attenuation)
{
#ifdef SHADERGRAPH_PREVIEW
    Direction = normalize(half3(1.0f, 1.0f, 0.0f));
    Color = 1.0f;
    Attenuation = 1.0f;
#else
    Light mainLight = GetMainLight();
    Direction = mainLight.direction;
    Color = mainLight.color;
    Attenuation = mainLight.distanceAttenuation;
#endif
}

#endif // ADDITIONAL_LIGHT_INCLUDED

先给自定义的这个节点输入position world 位置节点

我们需要考虑衰减因素,获取环境光插值节点 lerp,然后乘以光源亮度后再和衰减值相乘后与基础色相乘

此时已经可以通过调整灯光控制材质颜色了

由于这是主光源的情况,而如果在物体旁边添加其他的点光源则需要额外的自定义函数

hlsl
//这个是单精度
void AdditionalLight_float(float3 WorldPos, int lightID, out float3 Direction, out float3 Color, out float Attenuation)
{
    Direction = normalize(float3(1.0f, 1.0f, 0.0f));
    Color = 0.0f;
    Attenuation = 0.0f;

#ifndef SHADERGRAPH_PREVIEW
    int lightCount = GetAdditionalLightsCount();
    if(lightID < lightCount)
    {
        Light light = GetAdditionalLight(lightID, WorldPos);
        Direction = light.direction;
        Color = light.color;
        Attenuation = light.distanceAttenuation;
    }
#endif
}

//这个是半精度
void AdditionalLight_half(half3 WorldPos, int lightID, out half3 Direction, out half3 Color, out half Attenuation)
{
    Direction = normalize(half3(1.0f, 1.0f, 0.0f));
    Color = 0.0f;
    Attenuation = 0.0f;

#ifndef SHADERGRAPH_PREVIEW
    int lightCount = GetAdditionalLightsCount();
    if(lightID < lightCount)
    {
        Light light = GetAdditionalLight(lightID, WorldPos);
        Direction = light.direction;
        Color = light.color;
        Attenuation = light.distanceAttenuation;
    }
#endif
}

同样的加入自定义函数并按照HLSL脚本导入输入和输出

由于shader无法使用像for循环那样的遍历场景里的每一个光源,这就导致不仅要复制附加光源节点还要对每个光源进行计算,而且无法动态监测实际存在的光源的数量,所以现在是假设场景里是有4个光源

可以看到现在节点实在是太多了,我们可以使用之前学的子图sub来简化,把特定的功能封装进子图只暴露输入输出接口

包括前面的position节点也要包含在内,不然编辑器会报错空引用

子图添加light ID float属性,将输出值改为vector3类型的lightColor

然后在主图里需要复制四个子图并赋值给Light ID为1

但是这种方法相比你也发现了,如果场景里超过四盏灯就不行了,第五个灯光将不会被检测,而且需要添加一大堆节点

hlsl
void AllAdditionalLights_float(float3 WorldPos, float3 WorldNormal, float2 CutoffThresholds, out float3 LightColor)
{
    LightColor = 0.0f;

#ifndef SHADERGRAPH_PREVIEW
    int lightCount = GetAdditionalLightsCount();

    for(int i = 0; i < lightCount; ++i)
    {
        Light light = GetAdditionalLight(i, WorldPos);

        float3 color = dot(light.direction, WorldNormal);
        color = smoothstep(CutoffThresholds.x, CutoffThresholds.y, color);
        color *= light.color;
        color *= light.distanceAttenuation;

        LightColor += color;
    } 
#endif
}

void AllAdditionalLights_half(half3 WorldPos, half3 WorldNormal, half2 CutoffThresholds, out half3 LightColor)
{
    LightColor = 0.0f;

#ifndef SHADERGRAPH_PREVIEW
    int lightCount = GetAdditionalLightsCount();

    for(int i = 0; i < lightCount; ++i)
    {
        Light light = GetAdditionalLight(i, WorldPos);
        
        float3 color = dot(light.direction, WorldNormal);
        color = smoothstep(CutoffThresholds.x, CutoffThresholds.y, color);
        color *= light.color;
        color *= light.distanceAttenuation;

        LightColor += color;
    } 
#endif
}

我们使用一个新的自定义函数节点,此时只需要一个节点便可以解决,但是仍然只能处理8个光源

如图,我们的圈出来的这个红色光源没有渲染出来,是因为这是小球材质上的第9个光源

这个是因为unity默认每个物体最多可以接收8个除了主光源以外的额外光源的光来节约性能,因为光源太多会加重GPU的负担

所以我们明白了一件事就是节点不是万能的,有的时候需要自己写HLSL

初见UE

Sun, 07 Jun 2026 19:43:58 GMT

今天来看看Unreal Engine,也就是虚幻引擎,还从来没用过

居然还有这么人性化的教程

这个大概和Unity差不多,类似scene game hierarchy inspector 和asset窗口

这样调整一下布局感觉看懂了

但是虚幻引擎非常的吃电脑配置,我的电脑是办公本,不适合UE这种,运行游戏场景时非常的卡,不过unity的还可以

UnityShaderGraph---场景相交检测

Sun, 31 May 2026 14:27:37 GMT

今天我们来学习场景相交检测

现实中的物体如果发生相交就会在两者的接触面会有阴影,例如你的手机放在桌面上可以看到手机和桌面的黑色阴影接触线,这个在unity中同样也是可以实现的

当着色器运行时它只能直接访问当前正在渲染的像素信息包括其在世界空间中的位置,我们想将该位置与在这个物体后面渲染的对象的位置进行比较,如果两点之间的距离小于我们指定的阈值,就检测到了一个交点

unity仅在之后将深度缓冲区的状态保存到深度纹理中,会先渲染所有不透明物体,再渲染所有透明物体,而着色器无法检测到任意两个透明物体之间的交叉

之前我们讲深度纹理的时候,提到过这个游戏场景是怎么渲染到摄像机的,也就是裁剪空间

unity随后通过根据相机的参数将一些裁剪空间坐标转换为屏幕空间坐标

而这个向量第四个分量等于相机与被渲染顶点之间的距离

然后就是其次坐标的概念(我也没看懂这个东西,这玩意就是大一的时候没学明白的线性代数的知识)

其次坐标

一句话定义

齐次坐标 = 用 N+1 个分量来表示 N 维空间中的点/向量

维度	普通坐标	齐次坐标
2D	`(x, y)`	`(x, y, w)`
3D	`(x, y, z)`	`(x, y, z, w)`
4D	`(x, y, z, w)`	`(x, y, z, w, v)`

为什么要多一个 w？

核心目的：用矩阵乘法统一表示平移、旋转、缩放

普通 3×3 矩阵只能做旋转和缩放，无法做平移：

\begin{bmatrix} a & b & c \\ d & e & f \\ g & h & i \end{bmatrix} \begin{bmatrix} x \\ y \\ z \end{bmatrix} = \text{旋转/缩放后的结果}

但平移是加法：newPos = pos + offset，矩阵乘法只有乘法没有加法。

齐次坐标的解决方案

把 3D 点变成 4D，w=1：

\begin{bmatrix} R_{11} & R_{12} & R_{13} & T_x \\ R_{21} & R_{22} & R_{23} & T_y \\ R_{31} & R_{32} & R_{33} & T_z \\ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix} = \begin{bmatrix} R \cdot \vec{p} + \vec{T} \\ 1 \end{bmatrix}

最后一列就是平移量！ 一个 4×4 矩阵同时搞定了旋转、缩放、平移。

w 的两个关键作用

w = 1 → 点（Point）

可以平移：

text

[x, y, z, 1]  ×  矩阵  =  [x', y', z', 1]

w = 0 → 向量（Vector）

不能平移（方向不变）：

text

[x, y, z, 0]  ×  矩阵  =  [x', y', z', 0]

向量代表方向，平移没有意义。w=0 时矩阵的平移分量会被消掉。

投影变换：w 的第三个作用

透视投影需要除法，但 GPU 的顶点着色器输出的是 4D 齐次坐标。w 在这里存储了透视除法的分母：

text

12345

裁剪空间输出: (x, y, z, w)
↓
透视除法: (x/w, y/w, z/w)
↓
NDC 空间: (-1~1, -1~1, 0~1)

w 越大（物体越远），除完后坐标越小，实现近大远小的透视效果。

在 Unity Shader Graph 中的体现

节点	含义
Position (Object)	`(x, y, z, 1)` — 模型空间点
Position (World)	经过 Model 矩阵变换后的点
Position (Clip)	经过 MVP 矩阵后的齐次坐标 `(x, y, z, w)`
Screen Position	经过透视除法后的 `(x/w, y/w)`

一句话总结

齐次坐标用多一个 w 分量，把"平移"塞进矩阵乘法里，同时让透视投影的除法有地方存分母。 是 3D 图形管线能高效运行的数学基础。

我们添加一个scene depth节点来获取相机和物体之间的距离,并设置为eye模式来获取精确值,

Scene Depth 从深度纹理中读取当前屏幕位置记录的深度值,表示：

沿着当前像素对应的视线方向，场景中已经写入深度缓冲区的表面距离摄像机有多远

参数	全称含义	数值范围	核心特点
Eye	Eye-space depth	非线性，近处密集、远处稀疏	相机空间的真实深度值，非线性分布
Linear01	Linear 0-1 depth	[0, 1]	线性映射到 [0,1]，0=近裁剪面，1=远裁剪面
Raw	Raw depth buffer value	[0, 1] 或平台相关	深度纹理的原始存储值，通常是反向Z的非线性值

然后添加screen position节点并设置为Raw模式,

Screen Position 返回当前着色器像素在屏幕上的位置，以多种坐标系形式输出，返回当前像素的屏幕空间位置 (x,y,z,w)

对于 Raw 模式下的 Screen Position，w 可以用于获得当前像素相对于摄像机的深度信息（Eye Depth）。

用于：

采样屏幕纹理（如 Scene Color、Scene Depth）
制作基于屏幕坐标的特效（扫描线、故障艺术、径向模糊中心点）
实现与分辨率无关的 2D 效果

模式	坐标系	返回值	范围	核心特点
Default	屏幕左下角原点	归一化 UV (x, y, z, w)	x,y: [0, 1]	最常用，采样屏幕纹理的标准 UV
Raw	裁剪空间	齐次坐标 (x, y, z, w)	未归一化，含透视除数 w	手动做透视除法，极少用
Center	屏幕中心原点	归一化坐标 (x, y, z, w)	x,y: [-1, 1]	径向特效、对称遮罩
Tiled	平铺模式	自动平铺的 UV (x, y, z, w)	重复平铺，范围无限制	网格、重复图案
Pixel	屏幕像素坐标	实际像素位置 (x, y, z, w)	x,y: [0, 屏幕宽高]	像素级精确控制

然后用split节点分出第四个分量w

还记得之前的这个图吗

mermaid
graph LR

Camera["📷 Camera"]

Sphere["🔵 当前正在绘制的物体"]
Floor["⬜ 地面(已经渲染到Depth Buffer)"]

Camera -->|"Current Depth = 8"| Sphere
Camera -->|"Scene Depth = 10"| Floor

Sphere -->|"Depth Difference = 10 - 8 = 2"| Result["Intersection Depth"]

SceneDepth = 后面的表面距离摄像机多远

ScreenPosition.w = 当前表面距离摄像机多远

不过刚才的那几个节点我们要重复使用,我们可以使用子图来实现,类似于一个函数,只暴露输入口和输出口

子图

我们可以使用子图,这里理解一下子图的概念

Unity Shader Graph 的子图（Sub Graph）是一种模块化的着色器构建方式，允许你将一组节点封装成可复用的资产，然后在主 Shader Graph 或其他子图中调用它。这类似于编程中的函数或类，能显著提升复杂着色器的可维护性和复用性

子图是一个独立的 .shadersubgraph 资产，包含：

输入端口（Input）：定义外部传入的数据（如颜色、向量、纹理采样结果）+
内部节点网络：实现特定功能（如边缘光、顶点动画、噪声混合）
输出端口（Output）：返回处理后的结果

创建方式

在asset窗口里右键 Create → Shader Graph → Sub Graph
或在 Shader Graph 编辑器中选中一组节点 → 右键 Convert to Sub-graph

我们选中这些节点然后将这几个合并为子图,放在项目的任意位置

如图我们已经创建成功

添加控制器

双击就可以进入子图

由于这个子图没有输入,但是必须输出,所以我们可以创建一个浮点输出类型取名为out

然后我们将模式设置transparent透明,然后将子图连接到基础色上

将其运用到小球上,可以注意到交界处有黑色阴影

此时说明已经可以检测交叉处状态了,但是我们需要当球体远离交叉处时阴影逐渐降低

我们添加One minus节点(这个我们之前用过)来实现远离时值的降低,但是由于远离的时候的值会变成负数,所以我们需要这个Saturate节点来将负数值设置为0,超过1的值设为1

然后我们需要控制这个渐变值首先添加一个intersection power的float类型用来控制,然后将其变成默认值为1 范围0.01~25的slider滑块,0会完全遮挡,但是25的遮挡效果非常微弱

为了更方便的调整遮挡效果的明暗度,我们添加一个Occlusion strength值来控制明暗度,这样要控制明暗度就可以直接控制这个occlusion就可以了

然后用lerp 节点线性插值来控制颜色和强度,T槽导入颜色的强度,A槽为设置的基础色的颜色,B槽添加一个float节点设置为0代表黑色,这样就可以让颜色混合更自然

这里温习一下这几个节点

① One Minus 节点就是1 减去输入值，即：

plain

输出 = 1 - 输入

数学本质

输入	输出
0	1
0.25	0.75
0.5	0.5
0.75	0.25
1	0

效果：将数值"翻转"——黑的变白，白的变黑，0 变 1，1 变 0。

② Lerp 节点就是线性插值（Linear Interpolation），在 Shader Graph 中用于在两个值之间按百分比混合。

数学公式

plain

Lerp(A, B, T) = A + (B - A) × T
              = A × (1 - T) + B × T

T 值	结果
0	完全 A
0.25	75% A + 25% B
0.5	A 和 B 各一半
0.75	25% A + 75% B
1	完全 B

三个端口

端口	名称	作用
A	起始值	T=0 时的输出
B	结束值	T=1 时的输出
T	插值因子	控制混合比例，范围通常 0~1

③ Saturate 节点就是把输入值限制在 [0, 1] 范围内，超出的部分被截断。

数学公式

plain

12345

Saturate(x) = clamp(x, 0, 1)

x < 0  → 输出 0
0 ≤ x ≤ 1 → 输出 x（不变）
x > 1  → 输出 1

输入输出对照

输入	输出
-0.5	0
0	0
0.3	0.3
0.5	0.5
0.8	0.8
1	1
1.5	1
2	1

这里是**普通材质(左)和我们场景相交材质(右)**的区别,可以看到右侧的融合的更自然,而且很有原神这些二游那味

比如我们的小球现在只漏出来一点点

然后露出来很多

这样就很直观了

海水波浪泡沫效果

还记得之前我们做过一个波浪图吗?

这里我们需要复制一个来复用

我们可以为这些属性分组

上一篇我们知道这个场景相交必须是透明transparent材质,所以我们设置为透明材质

之前的节点都保持不变

我们先把上一篇我们做的DepthIntersection节点插入(还记得这个是干什么的吗? 这个是用来计算相交的阴影逻辑的),

我们用这个深度交叉值使用divide除法节点除以我们自定义的float类型的Form distance(泡沫距离)参数,这个参数设置为默认值为1范围0~5的slider,

然后我们用之前的step阶梯函数节点做一个限制,将edge值(x)设置为1(也就是当深度值低于某个阈值时,这组节点才会输出1)

然后再添加一个color节点来控制泡沫颜色,当然还是要和基础色相加来控制海浪的颜色,此时Basecolor组用split 来分出alpha阿尔法值进行控制透明度

这里复习一下之前学的Step节点

Step 节点就是阶梯函数/阶跃函数，根据阈值把输入分成两部分：0 或 1。

数学公式

plain

1234

Step(Edge, In) = In >= Edge ? 1 : 0

输入 ≥ 阈值 → 输出 1
输入 < 阈值 → 输出 0

两个端口

端口	名称	作用
Edge	阈值/边缘	分界点，默认 0.5
In	输入值	要被判断的数值

很好,我们已经看到其他模型和水材质接触的时候有白色的交叉面了

但是,我们也不希望我们的游戏里的水面效果如此简单吧(我记得以前玩的很多小游戏水面效果就是这样,当然也不是不能玩)

所以至少要真实一点点就像这样

不过由于我们没有高精度水面模型况且是在URP下操作的,所以水面波浪就这样吧

噪波效果

在 Unity Shader Graph 的 Simple Noise 节点中，Deterministic 和 Legacy Sine 是 Hash Type（哈希类型） 下拉菜单中的两个选项，它们决定了节点生成伪随机值（即噪声）时使用的哈希函数

Scale 值	效果
较小（如 1~5）	噪声图案更大、更稀疏，单个噪声"斑点"尺寸大，过渡平缓
较大（如 50~100）	噪声图案更细小、更密集，高频细节丰富，纹理更细碎
非常大（如 500+）	可能开始出现重复或伪影（因为哈希精度限制），图案趋于混乱

选项	说明	适用场景
Deterministic	使用一个跨平台一致的哈希函数，确保在不同 GPU 和平台上生成完全相同的噪声结果。这是 Unity 2021.2 之后的默认选项。	需要跨平台一致性、可复现结果的项目
Legacy Sine	使用基于 `sin()` 函数的传统哈希函数。这个方式在不同 GPU 上可能产生差异，某些集成显卡甚至会出现明显的块状伪影或完全错误的结果。	旧项目兼容

噪波可以让原本不自然的效果变得逼真自然,很多游戏的地图的生成也是用波函数坍缩实现的,在这个simple noise节点中有两个输入,UV用于噪声的坐标,不过我们可以使用任意的vector2的类型,另一个scale是比例尺用于控制噪声大小,这里添加一个Foam scale浮点类型默认值为500

为实现动态噪点,我们可以添加一个Foam velocity的vector 2值,然后和时间相乘

然后在step中接入

然后我们复习一下这几个节点

① Time 节点提供时间值，让材质动起来

输出端口	说明	典型用途
Time	自场景加载以来的总时间（秒），持续递增	持续循环的动画，如流动的水、飘动的云
Sine Time	`sin(Time)`，范围 -1 ~ 1，周期性波动	平滑的往复运动，如呼吸灯、摆动
Cosine Time	`cos(Time)`，范围 -1 ~ 1，与 Sine 相位差 90°	与 Sine 配合做圆周运动或交替效果
Delta Time	上一帧的耗时（秒），每帧不同	帧率无关的动画、物理模拟、平滑插值
Smooth Time	经过平滑处理的时间，变化更柔和	需要缓动效果的时间驱动动画

② Tiling And Offset 节点控制纹理的平铺次数和位置偏移

输入	作用
UV	原始 UV 坐标（通常直接连 UV 节点）
Tiling	平铺次数，默认 (1,1)。比如 (2,2) 就是 2×2 重复
Offset	偏移量，默认 (0,0)。比如 (0.5, 0) 让纹理横向移动一半

我们把材质运用上

可以看到此时的泡沫就很真实了

但是可以注意到边缘没有泡沫,这不符合逻辑

这里是因为子图的逻辑是用物体的遮挡背后的地面来渲染出来阴影也就是泡沫,但是没有物体遮挡的地方就没有影子,所以我们需要修改一下子图的节点

我们之前的子图里的scene depth节点的左侧有一个默认的小节点default,

这个等同于默认模式下(default)的屏幕位置节点(screen position),但是我们没有办法控制偏移量

所以我们添加一个vector2类型的偏移量offset,默认值保持为0不变, 然后和default模式下的screen position节点相加,这样就可以控制了

然后我们在为这个噪波效果添加偏移量

我们添加一个浮点类型的depth sample offset的默认范围(0~0.1)的slider滑块,这个赋值之所以比较低是因为这个代表的是整个屏幕的比例,偏移量超过屏幕10%会显得很难看

然后和噪声节点相乘并将输出值导入深度相交子节点为offset节点赋值

此时我们已经可以看到这个在边缘有泡沫了,但是目前的效果看起来很别扭

这是因为我们原先的是经过step节点将小于0的转换为0,大于1的转换为1,但是我们刚才增加的操作是在这个处理之前的,而水面以上的像素点深度交集为负值,导致这部分像素通过step时都会输出1产生泡沫

所以还需要改动

我们将divide的输出的负值值用negate取反乘以-1,然后接入另一个step节点来判断

然后将噪声节点再接入这个step节点来判断,并将两个step节点的输出值相乘,并重新和泡沫颜色节点相乘

现在看起来就自然多了,泡沫会随着波浪的滚动方向飘

但是想必你也发现了,咱们的节点已经快变成蜘蛛网了,说明之前的操作必须要简化了,这里我们直接在devide和step节点之间添加一个absolute绝对值节点,顾名思义,就是我们初中学的那个化负为正的绝对值

仔细思考一下,刚才绕一圈子是为了什么? 就是因为有负值的出现导致边缘出现了大面积的泡沫,我们之前的操作相当于: 一个盒子里有很多红色(非负值)和蓝色(负值)的小球,我们只要红色的,于是我们用筛子分别筛出两种小球,然后把蓝色的小球染成红色,然后再把两种颜色的小球倒在一起,但是我们其实可以直接把所有小球都直接染成红色,也就是对所有值取绝对值

这样效果仍然是一样的

物体边缘发光效果

这个其实可以拓展为物体边缘的黑边或者白边这些效果,很多游戏都喜欢给角色或者物体添加一个描边

像之前那样添加材质和基础色

我们首先添加UV节点,UV节点用于网格的每个顶点的坐标,用于定义材质纹理贴图的位置,在unity中默认立方体的UV映射使立方体的每个面都能完整显示纹理 ,

text

12345678910

(0,1) ────── (1,1)
  ↑            ↑
  │            │
左边         右边
  │            │
(0,0) ────── (1,0)

UV的范围为: 
x: 0 → 1
y: 0 → 1

我们需要检测在x或y方向上接近0的UV坐标,(也就是x轴对应的u轴,以及y轴对应的v轴),这里分为两步

① 上半部分的smoothstep

所以我们添加一个名为edge threshold 默认值为 0.1 范围为0-0.5 的slider的浮点类型的节点来控制,0表示无发光效果,0.5表示从物体两侧各覆盖一半的长度

然后我们用Smoothstep 节点,将UV输入in插槽,将默认值为0的float节点和edge threshold节点的值设置为上下限即 smoothstep(0, edge, uv.x)

UV节点输出的是四维向量(x,y,z,w),一般情况下只用x和y

从上方的 Smoothstep 节点的颜色可以看出检测的位置是左侧和底部的边缘,当UV值超过edge值的时候会输出为1,我们需要用One minus 节点来反转为0 ,因为原本的是左边下面黑,中间白,转换为左边下面白,中间黑

这里我们只用x和y分量,我们用split节点将x和y分离,然后用add相加

② 下半部分的smoothstep

然后我们同样的用UV连接另一个Smoothstep节点 in输入口, 我们添加一个x值为1的float节点,然后让flaot和edge threshold节点用subtract节点相减,即 smoothstep(1-edge, 1, uv.x)

此时内部为黑,右侧和上侧为白,不需要反色

我这样解释可能更直观

这里之所以要用split分离出来R和G 然后相加,是因为R和G通道输入分别输出的是红色和绿色,我们将二者相加变成1,那么其他区域就是0,也就是只剩下黑白色

这里复习一下几个节点的作用

① Smoothstep 节点-----平滑

端口	作用
Edge1	下限阈值（较小值）
Edge2	上限阈值（较大值）
In	当前输入值

输出规则

plain

123

In ≤ Edge1    →  输出 0
In ≥ Edge2    →  输出 1
Edge1 < In < Edge2  →  输出 0~1 之间的平滑过渡值

直观理解

想象一个渐变条：

plain

123

0                    0.5                    1
|←──── 黑色 ────→|←──── 灰色过渡 ────→|←──── 白色 ────→|
      Edge1                          Edge2

Edge1 左边：纯黑（0）
Edge2 右边：纯白（1）
中间：平滑的灰度过渡（S 形曲线，不是直线）

② One minus ------反向

Unity 的 One Minus 节点就是1 减去输入值：

plain

输出 = 1 - 输入

端口	作用
In	输入值（0~1 范围）
Out	`1 - In`

没有 Edge，没有阈值，就是简单的反向。

直观理解

plain

123

输入 0  →  输出 1    (全黑变全白)
输入 0.5 →  输出 0.5  (中间不变)
输入 1  →  输出 0    (全白变全黑)

常见用法

场景	说明
反相颜色	白变黑，黑变白
反向遮罩	原来显示的地方隐藏，隐藏的地方显示
补数运算	配合其他节点做 `1-x` 的数学操作
反向透明度	不透明变透明

③ Subtract ------相减

Unity 的 Subtract 节点 是 Shader Graph（着色器图）中的一个数学运算节点，用于执行减法运算

属性	说明
输入 A	被减数（Minuend）
输入 B	减数（Subtrahend）
输出	A - B 的结果

④ Saturate -----限制范围(0-1)

属性	说明
输入	任意数值（标量或向量）
输出	将输入值钳制到 [0, 1] 范围

数学表达：output = clamp(input, 0, 1)

即：

小于 0 的值 → 变为 0
大于 1 的值 → 变为 1
0 ~ 1 之间的值 → 保持不变

然后我们将左下角和右上角的值相加,因为角落会出现像素的总和大于一(这里我们打个比方,比如我们将两张纸条叠在一块,那么他们重叠的区域的纸条厚度一定大于一张纸条),为了避免交叉处的亮度和其他位置不一致,所以我们需要用saturate节点来限制值在(0,1)范围

然后我们需要控制边框的颜色,这里添加一个Glowcolor颜色节点,设置为HDR,然后我们先用add节点预留一个接口,然后和glowcolor节点相乘并与基础色和纹理相加

然后将这个材质附加到物体上

我们调整edge threshold的值就可以看到发光效果了

刚才我们并没有添加与地面交叉的效果

这里我们复用之前的负责交叉逻辑的子图,用one minus取反(因为原本的是黑色阴影,这里变成白色),然后用saturate节点避免低于0的交集值,为了控制强度依旧添加power节点并连接浮点类型默认值为1 范围0.01-25的slider值 intersection power

然后还记得吗,这个交叉效果必须是透明材质,否则无法显示出来

而且要注意的是这个效果只对不透明物体有效,对透明物体无效

例如对普通不透明平面是这样

对透明水体是这样,此时水体和箱子都无法互相检测,因为都是透明材质

UnityShaderGraph---自定义光照

Sat, 30 May 2026 10:20:50 GMT

今天我们来学习unity中的自定义光照

Unity 中的菲涅尔效应

核心原理

菲涅尔效应描述的是：物体表面的反射率随观察角度变化。

正对观察（视线与法线夹角小）→ 反射弱，漫反射/折射强
掠射观察（视线与法线夹角大，接近平行表面）→ 反射强

典型例子：看一池水，垂直往下看能看到水底；远处水面像镜子一样反射天空。

在 Unity 中的实现方式

方式	说明
菲涅尔方程（物理准确）	基于折射率计算，用于 PBR（基于物理的渲染）材质
Schlick 近似	最常用的简化公式：`F = F0 + (1 - F0) * (1 - cosθ)^5`
内置 Shader	Standard/URP/HDRP 的金属度/光滑度工作流程已自动包含

实际应用场景

边缘光（Rim Light）：角色轮廓发光
玻璃/水面：边缘反射更强
全息/护盾效果：视角相关的透明度变化
卡通渲染：描边或边缘染色

简而言之就是物体在你观察时变得更易反射的原理

我们有的时候从unity商店下载的资源会显示不出来,这个是因为渲染管不适配导致的,有的材质之前是用Built in渲染管,而我们使用的是URP渲染管

我们只需要选中这个material然后改成URP渲染即可

这样就可以使用我们的材质了

事实上shadergraph已经内置了菲涅尔反射的支持

比如我们将光滑度smoothness改成0,此时的材质就是一张不反光的普通贴图

但是如果我们将其数值调大就可以看到明显的反光

我们可以自己创建一个material

首先像之前那样创建基础色和基础纹理,选择无光照unlit着色器

然后创建菲涅尔节点和浮点类型的Fresnelpower节点控制fresnel的强度

强度默认为1 改为slider滑块,范围0~20

然后用FresnelColor控制颜色,使用HDR

我们改动强度值就可以看到这个材质的反光了

漫反射光

我们可以知道漫反射就是法向量夹角成反比

漫反射的光简化为 n · l

随着角度的增大,随着角度的增大,点积逐渐减少

核心公式

漫反射光照强度 ∝ n · l

其中：

n = 表面法向量（垂直于表面的单位向量）
l = 指向光源的单位向量
· = 点积（dot product）

点积的几何定义是：

n⋅l=∣n∣∣l∣cosθ=cosθ

（因为都是单位向量，长度为1）

夹角 θ	cosθ	漫反射强度
0°（正对光源）	1.0	最强
30°	0.87	较强
45°	0.71	中等
60°	0.50	较弱
90°（切线方向）	0	无光
>90°	负值	0（背面无光照）

直观理解

想象一束光照射到地面：

正午（太阳在头顶）：光线垂直地面，单位面积接收的光最多 → 最亮
傍晚（太阳斜射）：同样的光束"铺开"在更大的面积上，单位面积能量减少 → 变暗

这就是"与法向量夹角成反比"的本质——夹角越大，有效光照面积越大，单位面积能量越分散，所以看起来越暗。

我们像之前那样创建颜色和纹理节点

实现卡通渲染效果

然后我们实现光源的计算, 这里需要介绍几个节点

Main Light Direction 是 Unity Shader Graph 中的一个内置节点（Shader Graph 13+ / Unity 2022+ 引入），用于获取场景中**主方向光（Main Directional Light）**的方向

属性	说明
输出	Direction (Vector3) — 世界空间中主方向光的归一化方向
主光源定义	投射阴影的方向光；如果没有，则回退到第一个不投射阴影的方向光

关键注意点：方向是反的

这是最容易踩坑的地方。Unity 官方讨论中确认：

Main Light Direction 节点输出的方向是 从光源指向表面 的向量（即 GetMainLight().direction 被取反了）。

但在光照计算中，我们需要的是 从表面指向光源 的向量（即 l），所以：

plain

实际光照方向 l = -MainLightDirection

这个节点经典用法就是这样

text

123

[Main Light Direction] → [Negate] ───┐
                                    						   ├──→ [Dot Product]
[Normal Vector] (World)  ─────────┘

而其他的几个就是

Main Light Direction 获取光源方向
Negate 取反，得到从表面指向光源的向量 l
Normal Vector（世界空间）获取表面法线 n
Dot Product 计算 n · l

这里简单说一下

1. [Normal Vector]（世界空间）

属性	说明
输入	无（自动从模型顶点法线获取）
输出	`Vector3` — 世界空间中的表面法线 `n`
作用	告诉你"表面朝哪个方向"

法线是什么？ 想象一个球体，每个点的法线就是从球心指向该点的方向。平面的话，法线就是垂直于平面的向量。

注意：必须选择 World 空间（而非 Object/Tangent），因为光照方向也是在世界空间中定义的，两者要在同一坐标系下才能做点积。

2. [Main Light Direction]

属性	说明
输出	`Vector3` — 主方向光的归一化方向
方向含义	从光源指向表面（光传播的方向）

plain

1234

如果太阳在上方，输出大概是 (0, -1, 0)
            ↑ 太阳
            │
            ↓ 光往下走

3. [Negate]（取反）

输入	输出
`(x, y, z)`	`(-x, -y, -z)`

为什么要取反？

因为光照公式 n · l 中的 l 必须是 从表面指向光源：

plain

Main Light Direction:  光源 ──→ 表面   = (0, -1, 0)
Negate 后:            表面 ──→ 光源   = (0, 1, 0)  ← 这才是 l

4. [Dot Product]（点积）

这是核心运算。数学上：

n⋅l=∣n∣∣l∣cosθ=cosθ

（因为都是单位向量，长度为1）

它把"角度关系"转换成"亮度数值"：

夹角 θ	点积结果	含义
0°（正对光源）	1.0	最亮
45°	0.707	较亮
60°	0.5	中等
90°（切线）	0	无光
120°（背面）	-0.5	理论上负值，但光照不能为负

为了满足这个n⋅l=∣n∣∣l∣ 我们需要这些节点

main light direction表示从光源到物体的方向,所以用negate节点取反获得从物体表面到光源的方向,接着计算nagate输出的反向向量与normal vector输出的法线向量的点积

以上我们已经完成了光照的计算,有两种实现方式来实现渲染

如图,我们有两个节点,分别为step节点和smoothstep节点,由图像你就可以很清楚的看出二者的区别

Step 节点

功能

硬阈值切换 — 输入大于阈值输出1，小于等于阈值输出0。

plain

Step(Edge, In) = In > Edge ? 1 : 0

输入 In	Edge=0.5	结果
0.2	0.5	0
0.5	0.5	0（或1，取决于实现，通常是0）
0.8	0.5	1

图形表示

plain

12345

输出
 1 │      ┌────────
 0 │──────┘
   └────┬────┬────→ 输入
       0.5（Edge）

完全硬边，没有过渡。

典型用法

制作硬边遮罩（如卡通渲染的明暗分界）
将连续的灰度图转成纯黑白

Smoothstep 节点

功能

平滑阈值过渡 — 在 Edge1 和 Edge2 之间做平滑的 Hermite 插值。

plain

1234

Smoothstep(Edge1, Edge2, In):
    如果 In ≤ Edge1:  输出 0
    如果 In ≥ Edge2:  输出 1
    如果 Edge1 < In < Edge2: 输出平滑的 0→1 曲线

图形表示

plain

123456

输出
 1 │           ┌──────
   │        ╱
 0 │──────╱
   └────┬────┬────→ 输入
      Edge1 Edge2

有过渡带，边缘柔和

和 Step 的对比

	Step	Smoothstep
参数	1个阈值 (Edge)	2个阈值 (Edge1, Edge2)
过渡	硬切，无过渡	平滑曲线过渡
用途	硬边、二值化	软边、抗锯齿、柔和遮罩

这两个最明显的区别就是step当in输入值小于edge阈值的时候节点输出0,0是黑色,1是白色,我们可以通过控制阈值实现,不过这个明暗过度非常生硬

所以smoothstep可以实现平滑过渡,这个函数具有缓冲区域输出值在此区间内会从0平滑过渡到1,所以这个拥有两个边界值,

当 in输入值< edge1输出为0 ,

当in输入值 > edge2输出为1,

如果in输入值位于 edge1和edge2之间,那么输出将会是介于0~1之间的某个值

我们添加一个vector2的值cutoff thresholds用split分割出x和y来控制两个阈值,分别设置为-0.05和0

不过为了更直观添加一个ambient light strength的浮点节点来控制环境光强度,我们将其设置为(0~1)的slider滑块

Lerp（Linear Interpolation，线性插值）是 Shader Graph 中最常用、最核心的混合节点，它的作用很简单：

在两个值之间，按一个百分比取中间值。

数学公式

Lerp(A,B,T)=A+(B−A)×T=A×(1−T)+B×T

参数	含义
A	起始值（T=0 时的结果）
B	目标值（T=1 时的结果）
T	混合因子（0~1），也叫"权重"

直观理解

想象一条从 A 到 B 的线段，T 就是你走到的位置：

然后将我们smoothstep的输出值放入T槽,将ambient light strength值放入A槽,B槽保持默认的1,这样我们只需要改动A槽就可以了

我们将这个材质添加到物体上,但是你可以看到阴影面黑的离谱,这个只需要调整环境光强度即可

这样就正常多了,这个可以自己调整x y 还有光照强度尝试一下

UnityShaderGraph---光照基础

Fri, 29 May 2026 13:58:47 GMT

本篇来了解一下unity中的光照

光照分为漫反射光和全反射光

场景光源主要分为两类:手动添加的实际光源平行光或点光源还有环境光照,后者包括物体间的的间接光反射和天空盒光照

我们选择光照渲染 lit shader graph

Unity 的 Lit Shader（光照着色器）是 URP（Universal Render Pipeline，通用渲染管线）和 HDRP（High Definition Render Pipeline，高清渲染管线）中的核心光照材质系统。它定义了物体表面如何与光源交互，决定了渲染的真实感程度

Unity的Lit着色器采用PBR(Physically Based Rendering,基于物理的渲染)技术,简称为PBR(基于物理渲染),其核心是向Unity描述物体的物理特性

Base Color (3) — 基础颜色

类型：Vector3（RGB）
含义：物体表面的固有色（Albedo）
关键细节：
- 对于非金属（Metallic = 0），这就是你看到的颜色，比如红色塑料、绿色草地
- 对于纯金属（Metallic = 1），Base Color 应接近黑色或深灰色，因为金属的"颜色"实际上来自反射，而非漫反射
常见错误：把金属材质做成鲜艳的 Base Color，会导致能量不守恒，看起来"假"

Normal (Tangent Space) (3) — 法线（切线空间）

类型：Vector3（RGB）
含义：定义表面微观朝向，模拟凹凸细节而不增加多边形
为什么是 Tangent Space？
- 切线空间法线贴图以每个像素自身的表面为参考，模型旋转/变形时法线方向依然正确
- 与之对应的是 Object Space（物体空间），较少使用
RGB 通道对应：
- R（红）= 切线方向左右偏移
- G（绿）= 副切线方向上下偏移
- B（蓝）= 法线方向（通常接近 1，表示朝外）
注意：Unity 默认使用 OpenGL 标准（Y+ 向上），如果法线贴图看起来"凹凸反了"，可能需要翻转绿通道

Metallic (1) — 金属度

类型：Float（0~1）
含义：区分材质是金属还是非金属
取值规则：
- 0：绝缘体 — 塑料、石头、木头、混凝土、泥土等。只有漫反射，无金属反射
- 1：导体 — 铁、铜、金、铝等。几乎没有漫反射，反射率高且带颜色
- 0~1 之间：过渡值，实际物理世界中很少有"半金属"，通常用 0 或 1
图中数值 0：表示这是一个非金属材质

Smoothness (1) — 光滑度

类型：Float（0~1）
含义：控制表面的光滑/粗糙程度，直接决定高光的锐利度和反射的清晰度
取值效果：
- 1：镜面般光滑，反射清晰（镜子、抛光金属、水面）
- 0：完全粗糙，反射模糊，无清晰高光（磨砂混凝土、天鹅绒）
图中数值 0.5：中等光滑度，有可见但不锐利的高光
与 Roughness 的关系：Smoothness = 1 - Roughness（Unreal 使用 Roughness，Unity 使用 Smoothness）

Emission (3) — 自发光

类型：Vector3（RGB），支持 HDR
含义：材质自身发出的光，不受场景光照影响
特性：
- 只有颜色值，不直接照亮周围物体（除非开启全局光照烘焙或实时光照）
- HDR（高动态范围）：允许值超过 1（如 2、5、10），产生泛光（Bloom）效果
常见用途：霓虹灯、屏幕、魔法特效、炽热金属、生物发光
图中是黑色（HDR）：表示当前不自发光

Ambient Occlusion (1) — 环境光遮蔽

类型：Float（0~1）
含义：模拟光线难以到达的缝隙、角落、褶皱处的阴影
效果：
- 1（白色）：无遮蔽，完全接收环境光
- 0（黑色）：完全遮蔽，环境光被完全阻挡
作用域：AO 只影响间接光照（环境光、反射探针），不影响直接光源（太阳光、点光源）
图中数值 1：表示无额外遮蔽，使用默认环境光接收

unity会自动计算物体表面的漫反射和镜面反射强度,base color输出代表物体的反照率颜色(即表面基础反射色),其运行机制与无光照unlit 着色器中的表现完全一致

然后我们了解一下这个黑白贴图的类型

名称	存储内容	用途
Metallic Map（金属度贴图）	黑=非金属，白=金属	控制 Metallic 参数
Smoothness Map（光滑度贴图）	黑=粗糙，白=光滑	控制 Smoothness 参数
Roughness Map（粗糙度贴图）	黑=光滑，白=粗糙	Unreal 等引擎使用，Unity 需反转
Ambient Occlusion Map（AO 贴图 / 环境光遮蔽贴图）	黑=遮蔽，白=无遮蔽	控制 Ambient Occlusion
Opacity Map（不透明度贴图）	黑=透明，白=不透明	控制 Alpha 裁剪或透明度
Height Map（高度贴图）	黑=低，白=高	用于 Parallax（视差）或 Displacement（置换）
Mask Map（遮罩贴图）	通道分别存不同数据	HDRP 常用，RGBA 各存 Metallic、AO、Detail Mask、Smoothness

高度贴图

然后添加纹理节点并添加纹理

不过这个只是在视觉效果上改变,不会改变实际的模型

然后再添加一个HeightMap Texture的纹理节点,然后再和Parallax mapping(视差贴图)节点相连,这个节点会结合高度图和特定算法参数来动态调整基底贴图的UV坐标,然后通过高度图和特定算法参数动态调整UV坐标

左侧输入参数

参数	类型	含义
Heightmap	Texture2D	高度图贴图，灰度图，白=高，黑=低
Heightmap Sampler	Sampler State	高度图的采样器状态，控制过滤/寻址模式
Amplitude	Float	深度强度，值越大凹凸越明显，通常 0~0.1
UV	Vector2	原始 UV 坐标，输入基础纹理坐标
Heightmap Sample Channel	Vector4 / 下拉选项	指定从高度图的哪个通道读取高度值

右侧输出

参数	类型	含义
Parallax UVs	Vector2	偏移后的 UV 坐标，用于后续所有贴图采样

关键参数详解:

Heightmap Sample Channel

高度图可能是单通道灰度（R=G=B），也可能是把高度存在某个特定通道的 RGBA 贴图里。这个参数告诉节点读哪个通道：

通道选择	对应值
R	(1, 0, 0, 0)
G	(0, 1, 0, 0)
B	(0, 0, 1, 0)
A	(0, 0, 0, 1)

法线贴图

法线贴图的效果看起来和位移贴图差不多,不过存在很多区别:

① 位移贴图通过模拟在Z轴上的位移来制造深度假象

② 法线贴图是改变每个像素的表面法线方向,相当于告诉渲染引擎这个像素的实际朝向与模型几何表面不一致

法线贴图和位移贴图配合使用可以产生逼真的渲染效果

然后我们添加一个叫做normal texture的2d纹理并选择normalmap模式

此时我们可以看到这个变成了一种淡淡的紫色

然后我们把之间用位移贴图处理过的UV贴图坐标和这个sample texture2d的UV相连,并将type类型设置为normal 法线贴图,并将输出结果连到法线图的主输出端口Normal (Tangent Space)

我们可以了解一下这个workflow mode工作流模式

	Metallic（金属度）	Specular（高光）
核心思路	"这材质含多少金属？"	"这材质反射什么颜色？"
输入参数	Base Color + Metallic + Smoothness	Diffuse + Specular + Smoothness
Base Color 含义	非金属的固有色 / 金属的反射色调	仅漫反射颜色
金属反射色	由 Base Color × Metallic 自动推导	由 Specular 贴图直接指定
物理正确性	强制遵守：金属无漫反射，非金属反射弱	容易设置错误（如非金属给强反射）
贴图数量	少（Metallic 存 R 或 Alpha）	多（Specular 需 RGB 颜色）
直观程度	更符合直觉	美术师传统习惯
主流程度	现代 PBR 标准，强烈推荐	兼容旧项目/传统管线

高光模式允许直接调节反射高光的色彩属性

我们添加一个浮点类型的metallic并设置为滑块模式(这个是在inspector窗口调节的)

粗糙度贴图

粗糙度贴图中黑色表示表面极度光滑,白色表示材质表面极度粗糙,不过unity中白色表示完美平滑

为了消除这个差异我们需要反转

我们需要添加一个Roughness texture节点,并选择红色通道输出,因为这是单通道灰度贴图,可以随便选择一个通道,不限于红色通道 R

然后连接反转节点 one minus进行黑白颜色反转,然后将处理后的值连接到smoothness平滑度通道

One Minus 节点就是数学上的 1 - x，对每个通道单独做减法。

功能

plain

输出 = 1 - 输入

例如

输入	输出
0	1
0.25	0.75
0.5	0.5
0.75	0.25
1	0

本质上就是反转数值——黑的变白，白的变黑，中间灰互相颠倒

虽然我们得到的材质跟十几年的老游戏画质一样,不过问题不大

自发光贴图

现在我们需要添加自发光颜色属性

先添加一个颜色节点,然后将模式设置为HDR

然后就可以使用超高强度的颜色值

可以看到小球发光了,但是由于这个是我们在创建URP项目的时候自动添加的功能-----global volume

如果没有的话可以点击这里添加

就是这个东西

Unity 的 Global Volume（全局体积） 是 URP/HDRP 中用于控制后处理效果（Post-processing）和视觉环境设置的核心系统。它不同于 Local Volume（局部体积，只在特定区域生效），Global Volume 一旦激活就影响整个场景

核心概念

Volume 系统基于层叠覆盖机制：

plain
plain
12
Global Volume（全局）→ 始终生效，作为基础
Local Volume（局部） → 进入触发区域后，按优先级覆盖或混合
多个 Volume 可以同时存在，通过 Priority（优先级） 和 Blend Distance（混合距离） 决定谁说了算。

Global Volume 的关键组件

1. Volume 组件本身

参数作用
Is Global 勾选 = 全局生效，不依赖碰撞体范围
Priority 优先级，数值大的覆盖数值小的
Blend Distance 与局部体积混合时的过渡距离（全局通常 irrelevant）
Weight 整体权重 0~1，用于淡入淡出整个 Volume 效果
Profile 挂载的 Volume Profile 资产，存实际效果数据

2. Volume Profile（配置文件）

这是一个独立的 .asset 文件，里面可以添加多种 Override（覆盖） 效果。同一个 Profile 可以被多个 Volume 复用。

常见 Override 效果（URP）

效果作用常用场景
Bloom 泛光，亮部溢出霓虹灯、强光、梦幻氛围
Tonemapping 色调映射，压缩 HDR 到 LDR 几乎所有场景，防止过曝
Color Adjustments 曝光、对比度、饱和度、色温整体调色
White Balance 白平衡偏移修正色温，冷暖调
Lift Gamma Gain 暗部/中间调/亮部分开调色电影级调色
Shadows Midtones Highlights 阴影/中间调/高光独立控制精细调色
Vignette 暗角聚焦中心、复古感
Chromatic Aberration 色差，边缘 RGB 分离镜头畸变、风格化
Depth of Field 景深特写虚化、引导视线
Motion Blur 运动模糊高速运动、镜头感
Film Grain 胶片颗粒复古、电影质感
Panini Projection 透视校正宽屏镜头畸变修正

HDRP 特有的高级效果

效果作用
Ambient Occlusion 屏幕空间环境光遮蔽
Screen Space Reflection 屏幕空间反射
Volumetric Fog 体积雾
Volumetric Lighting 体积光（上帝光）
Exposure 自动曝光、眼适应
Indirect Lighting Controller 间接光强度控制

参数	作用
Is Global	勾选 = 全局生效，不依赖碰撞体范围
Priority	优先级，数值大的覆盖数值小的
Blend Distance	与局部体积混合时的过渡距离（全局通常 irrelevant）
Weight	整体权重 0~1，用于淡入淡出整个 Volume 效果
Profile	挂载的 Volume Profile 资产，存实际效果数据

效果	作用	常用场景
Bloom	泛光，亮部溢出	霓虹灯、强光、梦幻氛围
Tonemapping	色调映射，压缩 HDR 到 LDR	几乎所有场景，防止过曝
Color Adjustments	曝光、对比度、饱和度、色温	整体调色
White Balance	白平衡偏移	修正色温，冷暖调
Lift Gamma Gain	暗部/中间调/亮部分开调色	电影级调色
Shadows Midtones Highlights	阴影/中间调/高光独立控制	精细调色
Vignette	暗角	聚焦中心、复古感
Chromatic Aberration	色差，边缘 RGB 分离	镜头畸变、风格化
Depth of Field	景深	特写虚化、引导视线
Motion Blur	运动模糊	高速运动、镜头感
Film Grain	胶片颗粒	复古、电影质感
Panini Projection	透视校正	宽屏镜头畸变修正

效果	作用
Ambient Occlusion	屏幕空间环境光遮蔽
Screen Space Reflection	屏幕空间反射
Volumetric Fog	体积雾
Volumetric Lighting	体积光（上帝光）
Exposure	自动曝光、眼适应
Indirect Lighting Controller	间接光强度控制

相比你也看到了inspector里面有很多属性,比如Bloom,Vignette什么的

每个volume都是单个profile文件配置的,例如我们现在使用的就是这个默认的SamepleSceneProfile

当然我们还可以选择自己创建一个

可以在这里找到

创建完了之后并使用发现没有任何属性,小球也不发光了

我们可以通过add override添加子属性

我们可以调节强度大小intensity,默认为0 不发光,数值越高发光越亮

环境光遮蔽贴图

比如某些模型上面会出现孔洞什么的,在现实中,对于那些小坑会显示出黑影,月球就是一个最好的例子,比如月亮上的黑斑就是陨石砸的坑

在unity中就是使用环境光遮蔽贴图可以标识物体表面各部位受环境光遮蔽的效果的程度即被环境光遮挡的情况

我们需要和之前一样的操作,用材质连接环境光遮蔽通道

去掉自发光节点恢复成普通不发光的材质,现在来看是不是很真实呢(说实话,这个让我想起了玩早期GTA的时候的那个粗糙的建模了狗头狗头)

Typora主题推荐

Sat, 23 May 2026 21:20:47 GMT

Typora主题市场有很多主题

但是很多都是花里胡哨的,之前一直用的是默认的Night主题,而且对眼睛很不好,如果说美观+简洁+护眼的话我推荐这个主题

这个文件放到你的typora主题文件夹并重启typora即可

d42ker-github.css

css
:root {
  --side-bar-bg-color: #212121;
  --control-text-color: #aaa;
  --active-file-bg-color: #383838;
  --control-text-hover-color: #ddd;
  --item-hover-bg-color: #404040;
  --text-color: #c0c0c0;
  --blur-text-color: #80808080;
  --bg-color: #191919;
  --select-text-bg-color: #663f3f !important;
  --monospace: "IBM Plex Mono", "Fira Code", "微软雅黑", monospace !important;
  --window-border: 1px solid #404040;
  --rawblock-edit-panel-bd: #212121;
  --mermaid-theme: dark;
  --mermaid-font-family: "IBM Plex Mono", "Fira Code", "微软雅黑", monospace !important;
  --mermaid-sequence-numbers: off; /* or "on", see https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequencenumbers*/
  --mermaid-flowchart-curve: basis
    /* or "basis", see https://github.com/typora/typora-issues/issues/1632*/;
  --mermaid--gantt-left-padding: 100; /* see https://github.com/typora/typora-issues/issues/1665*/
  --heading-char-color: #aaa;
  --meta-content-color: #6794bc;
  --primary-color: #d86666;
}

::-webkit-scrollbar-thumb {
  background: #42424280 !important;
}

.menu-item-container a.menu-style-btn {
  background: #424242;
}

html {
  font-size: 16px;
}

body {
  font-family: "IBM Plex Sans","Microsoft YaHei", "微软雅黑", "Open Sans", "Clear Sans", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  color: #d0d0d0;
  background-color: var(--bg-color);
  line-height: 1.75;
  scroll-behavior: smooth;
}

#typora-quick-open {
  border: none !important;
  background-color: #212121 !important;
}

#write {
  max-width: 860px;
  margin: 0 auto;
  padding: 30px;
  padding-bottom: 100px;
}
#write > ul:first-child,
#write > ol:first-child {
  margin-top: 30px;
}

#recent-file-panel tbody tr:nth-child(2n-1) {
  background-color: #242424;
}

/*table,
input {
  border: 1px solid #aaa !important;
}*/

#write a {
  color: #d86666;
  text-decoration: none !important;
  border-bottom: 1px solid #d8666680;
}

.md-comment {
  color: var(--text-color);
  opacity: 0.5;
  font-family: var(--monospace);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: bold;
  line-height: 1.4;
  cursor: text;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
  text-decoration: none;
}
h1 tt,
h1 code {
  font-size: inherit;
}
h2 tt,
h2 code {
  font-size: inherit;
}
h3 tt,
h3 code {
  font-size: inherit;
}
h4 tt,
h4 code {
  font-size: inherit;
}
h5 tt,
h5 code {
  font-size: inherit;
}
h6 tt,
h6 code {
  font-size: inherit;
}
h1 {
  padding-bottom: 0.3em;
  font-size: 2.25em;
  line-height: 1.2;
  border-bottom: 1px solid #202020;
}
h2 {
  padding-bottom: 0.3em;
  font-size: 1.75em;
  line-height: 1.225;
  border-bottom: 1px solid #202020;
}
h3 {
  font-size: 1.5em;
  line-height: 1.43;
}
h4 {
  font-size: 1.25em;
}
h5 {
  font-size: 1em;
}
h6 {
  font-size: 1em;
  color: #777;
}
p,
blockquote,
ul,
ol,
dl,
table {
  margin: 0.8em 0;
  text-align: left;
}
li > ol,
li > ul {
  margin: 0 0;
}
hr {
  height: 2px;
  padding: 0;
  margin: 32px 0;
  background-color: #212121;
  border: 0 none;
  overflow: hidden;
  box-sizing: content-box;
}

li p.first {
  display: inline-block;
}
ul,
ol {
  padding-left: 30px;
}
ul:first-child,
ol:first-child {
  margin-top: 0;
}
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}
blockquote {
  border-left: 4px solid #aaaaaa80;
  margin-left: 2px;
  padding: 0 15px;
  color: #aaa;
}
blockquote blockquote {
  padding-right: 0;
}
table {
  padding: 0;
  word-break: initial;
  background-color: var(--bg-color);
}
table tr {
  border-top: 1px solid #212121;
  margin: 0;
  padding: 0;
}
table tr:nth-child(2n),
thead {
  background-color: #212121;
}
table tr th {
  font-weight: bold;
  border: 1px solid #383838;
  border-bottom: 0;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}
table tr td {
  border: 1px solid #383838;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}
table tr th:first-child,
table tr td:first-child {
  margin-top: 0;
}
table tr th:last-child,
table tr td:last-child {
  margin-bottom: 0;
}

strong,
b {
  color: #f0f0f0;
}

.CodeMirror-lines {
  padding-left: 4px;
}

.code-tooltip {
  box-shadow: 0 1px 1px 0 rgba(26, 26, 26, 0.3);
  border-top: 1px solid #202020;
}

.md-fences,
code,
tt {
  border: 1px solid #424242;
  background-color: #42424280;
  border-radius: 3px;
  padding: 2px 4px 1px 4px;
  font-size: 0.85em;
}

.md-fences {
  margin-bottom: 15px;
  margin-top: 15px;
  padding: 0.2em 1em;
  padding-top: 8px;
  padding-bottom: 6px;
}

.md-task-list-item > input {
  margin-left: -1.3em;
}

@media print {
  html {
    font-size: 13px;
  }
  table,
  pre {
    page-break-inside: avoid;
  }
  pre {
    word-wrap: break-word;
  }
}

.md-fences {
  background-color: #212121;
}
#write pre.md-meta-block {
  padding: 1rem;
  font-size: 85%;
  line-height: 1.45;
  background-color: #212121;
  border: 0;
  border-radius: 3px;
  color: #aaa;
  margin-top: 0 !important;
}

.mathjax-block > .code-tooltip {
  bottom: 0.375rem;
}

.md-mathjax-midline {
  background: #fafafa;
}

#write > h3.md-focus:before {
  left: -1.5625rem;
  top: 0.375rem;
}
#write > h4.md-focus:before {
  left: -1.5625rem;
  top: 0.285714286rem;
}
#write > h5.md-focus:before {
  left: -1.5625rem;
  top: 0.285714286rem;
}
#write > h6.md-focus:before {
  left: -1.5625rem;
  top: 0.285714286rem;
}
.md-image > .md-meta {
  border-radius: 3px;
  padding: 2px 0px 0px 4px;
  font-size: 0.9em;
  color: inherit;
}

.md-tag {
  color: #a7a7a7;
  opacity: .5;
}

.md-toc {
  margin-top: 20px;
  padding-bottom: 20px;
}

.sidebar-tabs {
  border-bottom: none;
}

#typora-quick-open {
  border: 1px solid #dddddd;
  background-color: #f8f8f8;
}

#typora-quick-open-item {
  background-color: #fafafa;
  border-color: #fefefe #e5e5e5 #e5e5e5 #eee;
  border-style: solid;
  border-width: 1px;
}

footer.ty-footer {
  height: 25px !important;
  border-top: 1px solid #292a2d;
  background: #292a2d !important;
}

.footer-item {
  line-height: 25px !important;
}

#outline-btn {
  margin-top: -2px !important;
}

.typora-sourceview-on #toggle-sourceview-btn {
  background: #484848 !important;
}

.sidebar-content-content {
  font-family: "IBM Plex Sans","Microsoft YaHei", "微软雅黑", "Open Sans", "Clear Sans", "Helvetica Neue",
    Helvetica, Arial, sans-serif !important;
}

.outline-content {
  padding: 3px 10px !important;
  text-align: left !important;
}

.outline-item.outline-item-active {
  margin-left: -28px;
  margin-right: -28px;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  background-color: #424242;
  background-color: #424242;
  border-color: #424242;
  background-color: #424242;
}

.sidebar-footer {
  height: 25px;
  border-top: 1px solid #292a2d;
  background: #292a2d;
}

.sidebar-footer-item {
  line-height: 25px;
  padding-top: 0px !important;
}

.file-node-icon {
  margin-right: 6px;
}

.file-node-open-state {
  margin-right: 6px;
}

.dropdown-menu {
  background-color: #2a2a2a !important;
}

.dropdown-menu .divider {
  border-color: #424242 !important;
}

/* focus mode */
.on-focus-mode blockquote {
  border-left-color: rgba(85, 85, 85, 0.12);
}

.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) img {
  opacity: 20%;
}
.on-focus-mode .task-list-item:not(.md-focus-container) > input {
  opacity: 20%;
}
.on-focus-mode
  .md-fences.md-focus
  .CodeMirror-code
  > *:not(.CodeMirror-activeline)
  *,
.on-focus-mode .CodeMirror.cm-s-inner:not(.CodeMirror-focused) * {
  color: #80808080 !important;
}
.on-focus-mode li[cid]:not(.md-focus-container) {
  color: #80808080 !important;
}
/*.on-focus-mode #typora-source .CodeMirror-code>*:not(.CodeMirror-activeline) * {
  color: #80808080!important;
}*/
.on-focus-mode .md-focus,
.on-focus-mode .md-focus-container {
  color: #d0d0d0;
}
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) code,
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) tt {
  border: 1px solid #212121;
  background-color: #212121;
}

/* focus mode end */

header,
.context-menu,
.megamenu-content,
footer {
  font-family: "IBM Plex Sans","Microsoft YaHei", "微软雅黑", "Open Sans", "Clear Sans", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
}

.megamenu-content {
  background: #242424 !important;
}

.megamenu-opened header {
  background-color: #242424;
  background-image: none;
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state {
  visibility: visible;
}

span.file-list-item-file-name-part {
  color: #f0f0f0;
}

.file-list-item-summary {
    height: 3rem;
    overflow: hidden;
    font-size: 13px;
    line-height: 16px;
    opacity: .7 !important;
}

.mac-seamless-mode #typora-sidebar {
  background-color: #fafafa;
  background-color: var(--side-bar-bg-color);
}

.md-lang {
  color: #b4654d;
}

.html-for-mac .context-menu {
  --item-hover-bg-color: #e6f0fe;
}

#md-notification .btn {
  border: 0;
}

.dropdown-menu .divider {
  border-color: #e5e5e5;
}

/* code mirror */

.CodeMirror-gutter-filler,
.CodeMirror-scrollbar-filler {
  background-color: #212121;
}
.CodeMirror-gutters {
  border-right: 1px solid #484848;
}
.CodeMirror-linenumber {
  color: #808080;
}
.cm-s-inner .cm-keyword {
  color: rgb(189, 97, 201);
}
.cm-s-inner .cm-atom,
.cm-s-inner.cm-atom {
  color: rgb(131, 115, 236);
}
.cm-s-inner .cm-number {
  color: rgb(73, 190, 143);
}
.cm-s-inner .cm-def {
  color: rgb(123, 123, 255);
}
.cm-s-inner .cm-variable {
  color: rgb(199, 199, 199);
}
.cm-s-inner .cm-variable-2 {
  color: rgb(131, 166, 201);
}
.cm-s-inner .cm-variable-3 {
  color: rgb(153, 197, 181);
}
.cm-s-inner .cm-string {
  color: rgb(194, 104, 104);
}
.cm-s-inner .cm-property {
  color: rgb(199, 199, 199);
}
.cm-s-inner .cm-operator {
  color: #b67e7e;
}
.cm-s-inner .cm-comment,
.cm-s-inner.cm-comment {
  color: rgb(216, 158, 99);
}
.cm-s-inner .cm-string-2 {
  color: rgb(223, 152, 116);
}
.cm-s-inner .cm-meta {
  color: rgb(158, 158, 158);
}
.cm-s-inner .cm-qualifier {
  color: rgb(145, 145, 145);
}
.cm-s-inner .cm-builtin {
  color: rgb(169, 145, 226);
}
.cm-s-inner .cm-bracket {
  color: rgb(214, 214, 166);
}
.cm-s-inner .cm-tag {
  color: rgb(162, 207, 154);
}
.cm-s-inner .cm-attribute {
  color: rgb(169, 169, 216);
}
.cm-s-inner .cm-header,
.cm-s-inner.cm-header {
  color: rgb(161, 161, 255);
}
.cm-s-inner .cm-quote,
.cm-s-inner.cm-quote {
  color: rgb(90, 158, 90);
}
.cm-s-inner .cm-hr,
.cm-s-inner.cm-hr {
  color: rgb(184, 184, 184);
}
.cm-s-inner .cm-link,
.cm-s-inner.cm-link {
  color: rgb(134, 134, 197);
}
.cm-negative {
  color: rgb(218, 126, 126);
}
.cm-positive {
  color: rgb(118, 189, 118);
}
.cm-header,
.cm-strong {
  font-weight: 700;
}
.cm-del {
  text-decoration: line-through;
}
.cm-em {
  font-style: italic;
}
.cm-link {
  text-decoration: underline;
}
.cm-error {
  color: rgb(255, 75, 75);
}
.cm-invalidchar {
  color: rgb(255, 75, 75);
}
.cm-constant {
  color: #50a5e2;
}
.cm-defined {
  color: #eccb66;
}
div.CodeMirror span.CodeMirror-matchingbracket {
  color: rgb(139, 230, 139);
}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: rgb(241, 99, 99);
}
.cm-searching {
  background: #ffa;
  background: rgba(255, 255, 0, 0.4);
}
.cm-tw-syntaxerror {
  color: rgb(199, 199, 199);
  background-color: #900;
}
.CodeMirror div.CodeMirror-cursor {
  border-left: 3px solid #e4629a;
}
#typora-source .CodeMirror-gutter-wrapper {
  font-family: var(--monospace) !important;
}
.cm-s-typora-default .CodeMirror-activeline-background {
  left: -99999px;
  right: -99999px;
  background: #80808020;
}
.cm-s-typora-default .cm-code, .cm-s-typora-default .cm-comment {
  color: #8997d4;
  font-family: monospace;
  font-family: var(--monospace);
}
.cm-s-typora-default .cm-string {
  color: #84a97e;
}
.cm-s-typora-default .cm-tag {
  color: #c36260;
}

/* unibody */

.megamenu-opened header {
  background-color: var(--bg-color) !important;
}

.megamenu-menu {
  background-color: var(--side-bar-bg-color) !important;
}

#megamenu-back-btn {
  border-color: transparent;
  color: #a94442;
}

.megamenu-content {
  background: var(--bg-color) !important;
}

.long-btn {
  border: 1px solid #9292928f;
}

table/*,
input */{
  border: 1px solid #9292928f !important;
}

#recent-file-panel-action-btn {
  background-color: var(--bg-color) !important;
  border: 1px solid #9292928f !important;
}

#top-titlebar .toolbar-icon.btn.hover, #top-titlebar .toolbar-icon.btn:hover {
  background-color: #212121;
}

#top-titlebar {
  font-family: var(--monospace);
}

TexturePacker破解文件

Sat, 23 May 2026 20:35:23 GMT

TexturePacker可以用于精灵图的拆分

这样我们用ai生成精灵图或者其他下载的资源就可以快速拆分

https://www.codeandweb.com/texturepacker

将这个写到txt文件,重命名为TexturePacker_Trial_Reset.reg,然后双击文件即可,软件更新后依旧可用

这个原作者为https://github.com/pakholam/TexturePackerCrack

text

12345678910111213141516171819202122232425262728

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\code-and-web.de\TexturePacker]
@=""
"firstStart"="false"
"autoUpdateCheck"="false"
"autoUpdatesEnabled"="false"
"sendStatisticsEnabled"="false"

[HKEY_CURRENT_USER\Software\code-and-web.de\TexturePacker\licensing]
"agreementsAccepted"="true"
"trialExpired"="false"

[HKEY_CURRENT_USER\Software\code-and-web.de\TexturePacker\licensing\data]
"licenseType"="single"
"licenseKeyPlain"="TP-1234-1234-1234-1234"
"activatedComputers"=dword:00000001
"email"="country@boy.com"
"expiryDate"="2199-01-01"
"product"="TexturePacker"
"street"="country lane"
"freeUpdatesUntil"="2199-01-01"
"cloudLicense"="false"
"licensee"="countryboy"
"numActivations"=dword:00000001
"company"="countryboy"
"city"="countryville"
"maxActivations"=dword:00000001

Hexo的bat便捷脚本

Fri, 22 May 2026 21:06:03 GMT

deploy.bat

这个就是用来部署的,不带压缩功能,也没啥用了

bash
@echo off
chcp 65001 >nul
cd /d "D:\Blog\huyangpahuo"

echo ===== 1. clean =====
call hexo clean
if errorlevel 1 pause & goto :eof
echo ✨ [Clean] Done! Old files cleared.


echo ===== 2. generate =====
call hexo generate
if errorlevel 1 pause & goto :eof
echo 🛠️  [Generate] Done! Site files are ready.


echo ===== 3. deploy =====
echo Deploying to GitHub Pages...
call hexo deploy
if errorlevel 1 pause & goto :eof
echo 🥳 [Deploy] Done! Everything pushed to the cloud.

echo ===== Finished! =====
echo 👑 [Success] Original assets deployed perfectly!
echo Your site should be live soon at https://funingna-wakawaka.github.io
pause

preview.bat

本地预览,这个目前还在用

bash
@echo off
chcp 65001 >nul
cd /d "D:\Blog\huyangpahuo"

echo ===== 1. clean =====
call hexo clean
if errorlevel 1 pause & goto :eof
echo ✨ [Clean] Done! Old files cleared.

echo ===== 2. generate =====
call hexo generate
if errorlevel 1 pause & goto :eof
echo 🛠️  [Generate] Done! Site files are ready.

echo ===== 3. server =====
echo 🔔 [Reminder]: If you see the message 'Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.', just refresh your browser at that URL to preview your website!
start http://localhost:4000/
echo 🌐 [Server] Local server is running...
call hexo server

IDM_downloader破解

Fri, 22 May 2026 20:35:23 GMT

IDM downloader破解

写入txt文件重命名为IAS_v1.2_Chs.cmd,在IDM启动的时候双击启用然后选择自己的破解项

期间会出现检测到虚假序列号要求续费的情况,无需理会关掉提示即可(不过总是跳出来很烦人是这样的)

这个原作者为https://github.com/WindowsAddict/IDM-Activation-Script

此软件在IDM更新后依旧可用

cmd

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942

@set iasver=1.2
@setlocal DisableDelayedExpansion
@echo off



::============================================================================
::
::   IDM Activation Script (IAS)
::
::   Homepages: https://github.com/WindowsAddict/IDM-Activation-Script
::              https://massgrave.dev/idm-activation-script
::
::       Email: windowsaddict@protonmail.com
::
::============================================================================



::  To activate, run the script with "/act" parameter or change 0 to 1 in below line
set _activate=0

::  To Freeze the 30 days trial period, run the script with "/frz" parameter or change 0 to 1 in below line
set _freeze=0

::  To reset the activation and trial, run the script with "/res" parameter or change 0 to 1 in below line
set _reset=0

::  If value is changed in above lines or parameter is used then script will run in unattended mode

::========================================================================================================================================

::  Set Path variable, it helps if it is misconfigured in the system

set "PATH=%SystemRoot%\System32;%SystemRoot%\System32\wbem;%SystemRoot%\System32\WindowsPowerShell\v1.0\"
if exist "%SystemRoot%\Sysnative\reg.exe" (
set "PATH=%SystemRoot%\Sysnative;%SystemRoot%\Sysnative\wbem;%SystemRoot%\Sysnative\WindowsPowerShell\v1.0\;%PATH%"
)

:: Re-launch the script with x64 process if it was initiated by x86 process on x64 bit Windows
:: or with ARM64 process if it was initiated by x86/ARM32 process on ARM64 Windows

set "_cmdf=%~f0"
for %%# in (%*) do (
if /i "%%#"=="r1" set r1=1
if /i "%%#"=="r2" set r2=1
)

if exist %SystemRoot%\Sysnative\cmd.exe if not defined r1 (
setlocal EnableDelayedExpansion
start %SystemRoot%\Sysnative\cmd.exe /c ""!_cmdf!" %* r1"
exit /b
)

:: Re-launch the script with ARM32 process if it was initiated by x64 process on ARM64 Windows

if exist %SystemRoot%\SysArm32\cmd.exe if %PROCESSOR_ARCHITECTURE%==AMD64 if not defined r2 (
setlocal EnableDelayedExpansion
start %SystemRoot%\SysArm32\cmd.exe /c ""!_cmdf!" %* r2"
exit /b
)

::========================================================================================================================================

set "blank="
set "mas=ht%blank%tps%blank%://mass%blank%grave.dev/"

::  Check if Null service is working, it's important for the batch script

sc query Null | find /i "RUNNING"
if %errorlevel% NEQ 0 (
echo:
echo Null service is not running, script may crash...
echo:
echo:
echo Help - %mas%idm-activation-script.html#Troubleshoot
echo:
echo:
ping 127.0.0.1 -n 10
)
cls

::  Check LF line ending

pushd "%~dp0"
>nul findstr /v "$" "%~nx0" && (
echo:
echo Error: Script either has LF line ending issue or an empty line at the end of the script is missing.
echo:
ping 127.0.0.1 -n 6 >nul
popd
exit /b
)
popd

::========================================================================================================================================

cls
color 07
title  IDM Activation Script %iasver%

set _args=
set _elev=
set _unattended=0

set _args=%*
if defined _args set _args=%_args:"=%
if defined _args (
for %%A in (%_args%) do (
if /i "%%A"=="-el"  set _elev=1
if /i "%%A"=="/res" set _reset=1
if /i "%%A"=="/frz" set _freeze=1
if /i "%%A"=="/act" set _activate=1
)
)

for %%A in (%_activate% %_freeze% %_reset%) do (if "%%A"=="1" set _unattended=1)

::========================================================================================================================================

set "nul1=1>nul"
set "nul2=2>nul"
set "nul6=2^>nul"
set "nul=>nul 2>&1"

set psc=powershell.exe
set winbuild=1
for /f "tokens=6 delims=[]. " %%G in ('ver') do set winbuild=%%G

set _NCS=1
if %winbuild% LSS 10586 set _NCS=0
if %winbuild% GEQ 10586 reg query "HKCU\Console" /v ForceV2 %nul2% | find /i "0x0" %nul1% && (set _NCS=0)

if %_NCS% EQU 1 (
for /F %%a in ('echo prompt $E ^| cmd') do set "esc=%%a"
set     "Red="41;97m""
set    "Gray="100;97m""
set   "Green="42;97m""
set    "Blue="44;97m""
set  "_White="40;37m""
set  "_Green="40;92m""
set "_Yellow="40;93m""
) else (
set     "Red="Red" "white""
set    "Gray="Darkgray" "white""
set   "Green="DarkGreen" "white""
set    "Blue="Blue" "white""
set  "_White="Black" "Gray""
set  "_Green="Black" "Green""
set "_Yellow="Black" "Yellow""
)

set "nceline=echo: &echo ==== ERROR ==== &echo:"
set "eline=echo: &call :_color %Red% "==== ERROR ====" &echo:"
set "line=___________________________________________________________________________________________________"
set "_buf={$W=$Host.UI.RawUI.WindowSize;$B=$Host.UI.RawUI.BufferSize;$W.Height=34;$B.Height=300;$Host.UI.RawUI.WindowSize=$W;$Host.UI.RawUI.BufferSize=$B;}"

::========================================================================================================================================

if %winbuild% LSS 7600 (
%nceline%
echo Unsupported OS version Detected [%winbuild%].
echo Project is supported only for Windows 7/8/8.1/10/11 and their Server equivalent.
goto done2
)

for %%# in (powershell.exe) do @if "%%~$PATH:#"=="" (
%nceline%
echo Unable to find powershell.exe in the system.
goto done2
)

::========================================================================================================================================

::  Fix for the special characters limitation in path name

set "_work=%~dp0"
if "%_work:~-1%"=="\" set "_work=%_work:~0,-1%"

set "_batf=%~f0"
set "_batp=%_batf:'=''%"

set _PSarg="""%~f0""" -el %_args%
set _PSarg=%_PSarg:'=''%

set "_appdata=%appdata%"
set "_ttemp=%userprofile%\AppData\Local\Temp"

setlocal EnableDelayedExpansion

::========================================================================================================================================

echo "!_batf!" | find /i "!_ttemp!" %nul1% && (
if /i not "!_work!"=="!_ttemp!" (
%eline%
echo Script is launched from the temp folder,
echo Most likely you are running the script directly from the archive file.
echo:
echo Extract the archive file and launch the script from the extracted folder.
goto done2
)
)

::========================================================================================================================================

::  Check PowerShell

REM :PowerShellTest: $ExecutionContext.SessionState.LanguageMode :PowerShellTest:

%psc% "$f=[io.file]::ReadAllText('!_batp!') -split ':PowerShellTest:\s*';iex ($f[1])" | find /i "FullLanguage" %nul1% || (
%eline%
%psc% $ExecutionContext.SessionState.LanguageMode
echo:
echo PowerShell is not working. Aborting...
echo If you have applied restrictions on Powershell then undo those changes.
echo:
echo Check this page for help. %mas%idm-activation-script.html#Troubleshoot
goto done2
)

::========================================================================================================================================

::  Elevate script as admin and pass arguments and preventing loop

%nul1% fltmc || (
if not defined _elev %psc% "start cmd.exe -arg '/c \"!_PSarg!\"' -verb runas" && exit /b
%eline%
echo This script requires admin privileges.
echo To do so, right click on this script and select 'Run as administrator'.
goto done2
)

::========================================================================================================================================

::  Disable QuickEdit and launch from conhost.exe to avoid Terminal app

set quedit=
set terminal=

if %_unattended%==1 (
set quedit=1
set terminal=1
)

for %%# in (%_args%) do (if /i "%%#"=="-qedit" set quedit=1)

if %winbuild% LSS 10586 (
reg query HKCU\Console /v QuickEdit %nul2% | find /i "0x0" %nul1% && set quedit=1
)

if %winbuild% GEQ 17763 (
set "launchcmd=start conhost.exe %psc%"
) else (
set "launchcmd=%psc%"
)

set "d1=$t=[AppDomain]::CurrentDomain.DefineDynamicAssembly(4, 1).DefineDynamicModule(2, $False).DefineType(0);"
set "d2=$t.DefinePInvokeMethod('GetStdHandle', 'kernel32.dll', 22, 1, [IntPtr], @([Int32]), 1, 3).SetImplementationFlags(128);"
set "d3=$t.DefinePInvokeMethod('SetConsoleMode', 'kernel32.dll', 22, 1, [Boolean], @([IntPtr], [Int32]), 1, 3).SetImplementationFlags(128);"
set "d4=$k=$t.CreateType(); $b=$k::SetConsoleMode($k::GetStdHandle(-10), 0x0080);"

if defined quedit goto :skipQE
%launchcmd% "%d1% %d2% %d3% %d4% & cmd.exe '/c' '!_PSarg! -qedit'" &exit /b
:skipQE

::========================================================================================================================================

::  Check for updates

set -=
set old=

for /f "delims=[] tokens=2" %%# in ('ping -4 -n 1 iasupdatecheck.mass%-%grave.dev') do (
if not [%%#]==[] (echo "%%#" | find "127.69" %nul1% && (echo "%%#" | find "127.69.%iasver%" %nul1% || set old=1))
)

if defined old (
echo ________________________________________________
%eline%
echo You are running outdated version IAS %iasver%
echo ________________________________________________
echo:
if not %_unattended%==1 (
echo [1] Get Latest IAS
echo [0] Continue Anyway
echo:
call :_color %_Green% "Enter a menu option in the Keyboard [1,0] :"
choice /C:10 /N
if !errorlevel!==2 rem
if !errorlevel!==1 (start https://github.com/WindowsAddict/IDM-Activation-Script & start %mas%/idm-activation-script & exit /b)
)
)

::========================================================================================================================================

cls
title  IDM Activation Script %iasver%

echo:
echo Initializing...

::  Check WMI

%psc% "Get-WmiObject -Class Win32_ComputerSystem | Select-Object -Property CreationClassName" %nul2% | find /i "computersystem" %nul1% || (
%eline%
%psc% "Get-WmiObject -Class Win32_ComputerSystem | Select-Object -Property CreationClassName"
echo:
echo WMI is not working. Aborting...
echo:
echo Check this page for help. %mas%idm-activation-script.html#Troubleshoot
goto done2
)

::  Check user account SID

set _sid=
for /f "delims=" %%a in ('%psc% "([System.Security.Principal.NTAccount](Get-WmiObject -Class Win32_ComputerSystem).UserName).Translate([System.Security.Principal.SecurityIdentifier]).Value" %nul6%') do (set _sid=%%a)
 
reg query HKU\%_sid%\Software %nul% || (
for /f "delims=" %%a in ('%psc% "$explorerProc = Get-Process -Name explorer | Where-Object {$_.SessionId -eq (Get-Process -Id $pid).SessionId} | Select-Object -First 1; $sid = (gwmi -Query ('Select * From Win32_Process Where ProcessID=' + $explorerProc.Id)).GetOwnerSid().Sid; $sid" %nul6%') do (set _sid=%%a)
)

reg query HKU\%_sid%\Software %nul% || (
%eline%
echo:
echo [%_sid%]
echo User Account SID not found. Aborting...
echo:
echo Check this page for help. %mas%idm-activation-script.html#Troubleshoot
goto done2
)

::========================================================================================================================================

::  Check if the current user SID is syncing with the HKCU entries

%nul% reg delete HKCU\IAS_TEST /f
%nul% reg delete HKU\%_sid%\IAS_TEST /f

set HKCUsync=$null
%nul% reg add HKCU\IAS_TEST
%nul% reg query HKU\%_sid%\IAS_TEST && (
set HKCUsync=1
)

%nul% reg delete HKCU\IAS_TEST /f
%nul% reg delete HKU\%_sid%\IAS_TEST /f

::  Below code also works for ARM64 Windows 10 (including x64 bit emulation)

for /f "skip=2 tokens=2*" %%a in ('reg query "HKLM\SYSTEM\CurrentControlSet\Control\Session Manager\Environment" /v PROCESSOR_ARCHITECTURE') do set arch=%%b
if /i not "%arch%"=="x86" set arch=x64

if "%arch%"=="x86" (
set "CLSID=HKCU\Software\Classes\CLSID"
set "CLSID2=HKU\%_sid%\Software\Classes\CLSID"
set "HKLM=HKLM\Software\Internet Download Manager"
) else (
set "CLSID=HKCU\Software\Classes\Wow6432Node\CLSID"
set "CLSID2=HKU\%_sid%\Software\Classes\Wow6432Node\CLSID"
set "HKLM=HKLM\SOFTWARE\Wow6432Node\Internet Download Manager"
)

for /f "tokens=2*" %%a in ('reg query "HKU\%_sid%\Software\DownloadManager" /v ExePath %nul6%') do call set "IDMan=%%b"

if not exist "%IDMan%" (
if %arch%==x64 set "IDMan=%ProgramFiles(x86)%\Internet Download Manager\IDMan.exe"
if %arch%==x86 set "IDMan=%ProgramFiles%\Internet Download Manager\IDMan.exe"
)

if not exist %SystemRoot%\Temp md %SystemRoot%\Temp
set "idmcheck=tasklist /fi "imagename eq idman.exe" | findstr /i "idman.exe" %nul1%"

::  Check CLSID registry access

%nul% reg add %CLSID2%\IAS_TEST
%nul% reg query %CLSID2%\IAS_TEST || (
%eline%
echo Failed to write in %CLSID2%
echo:
echo Check this page for help. %mas%idm-activation-script.html#Troubleshoot
goto done2
)

%nul% reg delete %CLSID2%\IAS_TEST /f

::========================================================================================================================================

if %_reset%==1 goto :_reset
if %_activate%==1 (set frz=0&goto :_activate)
if %_freeze%==1 (set frz=1&goto :_activate)

:MainMenu

cls
title  IDM Activation Script %iasver%
if not defined terminal mode 75, 28

echo:
echo:
echo:
echo:
echo:
echo:                This script is NOT working with latest IDM.     
echo:            ___________________________________________________ 
echo:                                                               
echo:               [1] Freeze Trial
echo:               [2] Activate
echo:               [3] Reset Activation / Trial
echo:               _____________________________________________   
echo:                                                               
echo:               [4] Download IDM
echo:               [5] Help
echo:               [0] Exit
echo:            ___________________________________________________
echo:         
call :_color2 %_White% "             " %_Green% "Enter a menu option in the Keyboard [1,2,3,4,5,0]"
choice /C:123450 /N
set _erl=%errorlevel%

if %_erl%==6 exit /b
if %_erl%==5 start https://github.com/WindowsAddict/IDM-Activation-Script & start https://massgrave.dev/idm-activation-script & goto MainMenu
if %_erl%==4 start https://www.internetdownloadmanager.com/download.html & goto MainMenu
if %_erl%==3 goto _reset
if %_erl%==2 (set frz=0&goto :_activate)
if %_erl%==1 (set frz=1&goto :_activate)
goto :MainMenu

::========================================================================================================================================

:_reset

cls
if not %HKCUsync%==1 (
if not defined terminal mode 153, 35
) else (
if not defined terminal mode 113, 35
)
if not defined terminal %psc% "&%_buf%" %nul%

echo:
%idmcheck% && taskkill /f /im idman.exe

set _time=
for /f %%a in ('%psc% "(Get-Date).ToString('yyyyMMdd-HHmmssfff')"') do set _time=%%a

echo:
echo Creating backup of CLSID registry keys in %SystemRoot%\Temp

reg export %CLSID% "%SystemRoot%\Temp\_Backup_HKCU_CLSID_%_time%.reg"
if not %HKCUsync%==1 reg export %CLSID2% "%SystemRoot%\Temp\_Backup_HKU-%_sid%_CLSID_%_time%.reg"

call :delete_queue
%psc% "$sid = '%_sid%'; $HKCUsync = %HKCUsync%; $lockKey = $null; $deleteKey = 1; $f=[io.file]::ReadAllText('!_batp!') -split ':regscan\:.*';iex ($f[1])"

call :add_key

echo:
echo %line%
echo:
call :_color %Green% "The IDM reset process has been completed."

goto done

:delete_queue

echo:
echo Deleting IDM registry keys...
echo:

for %%# in (
""HKCU\Software\DownloadManager" "/v" "FName""
""HKCU\Software\DownloadManager" "/v" "LName""
""HKCU\Software\DownloadManager" "/v" "Email""
""HKCU\Software\DownloadManager" "/v" "Serial""
""HKCU\Software\DownloadManager" "/v" "scansk""
""HKCU\Software\DownloadManager" "/v" "tvfrdt""
""HKCU\Software\DownloadManager" "/v" "radxcnt""
""HKCU\Software\DownloadManager" "/v" "LstCheck""
""HKCU\Software\DownloadManager" "/v" "ptrk_scdt""
""HKCU\Software\DownloadManager" "/v" "LastCheckQU""
"%HKLM%"
) do for /f "tokens=* delims=" %%A in ("%%~#") do (
set "reg="%%~A"" &reg query !reg! %nul% && call :del
)

if not %HKCUsync%==1 for %%# in (
""HKU\%_sid%\Software\DownloadManager" "/v" "FName""
""HKU\%_sid%\Software\DownloadManager" "/v" "LName""
""HKU\%_sid%\Software\DownloadManager" "/v" "Email""
""HKU\%_sid%\Software\DownloadManager" "/v" "Serial""
""HKU\%_sid%\Software\DownloadManager" "/v" "scansk""
""HKU\%_sid%\Software\DownloadManager" "/v" "tvfrdt""
""HKU\%_sid%\Software\DownloadManager" "/v" "radxcnt""
""HKU\%_sid%\Software\DownloadManager" "/v" "LstCheck""
""HKU\%_sid%\Software\DownloadManager" "/v" "ptrk_scdt""
""HKU\%_sid%\Software\DownloadManager" "/v" "LastCheckQU""
) do for /f "tokens=* delims=" %%A in ("%%~#") do (
set "reg="%%~A"" &reg query !reg! %nul% && call :del
)

exit /b

:del

reg delete %reg% /f %nul%

if "%errorlevel%"=="0" (
set "reg=%reg:"=%"
echo Deleted - !reg!
) else (
set "reg=%reg:"=%"
call :_color2 %Red% "Failed - !reg!"
)

exit /b

::========================================================================================================================================

:_activate

cls
if not %HKCUsync%==1 (
if not defined terminal mode 153, 35
) else (
if not defined terminal mode 113, 35
)
if not defined terminal %psc% "&%_buf%" %nul%

if %frz%==0 if %_unattended%==0 (
echo:
echo %line%
echo:
echo      Activation is not working for some users and IDM may show fake serial nag screen.
echo:
call :_color2 %_White% "     " %_Green% "Its recommended to use Freeze Trial option instead."
echo %line%
echo:
choice /C:19 /N /M ">    [1] Go Back [9] Activate : "
if !errorlevel!==1 goto :MainMenu
cls
)

echo:
if not exist "%IDMan%" (
call :_color %Red% "IDM [Internet Download Manager] is not Installed."
echo You can download it from  https://www.internetdownloadmanager.com/download.html
goto done
)

:: Internet check with internetdownloadmanager.com ping and port 80 test

set _int=
for /f "delims=[] tokens=2" %%# in ('ping -n 1 internetdownloadmanager.com') do (if not [%%#]==[] set _int=1)

if not defined _int (
%psc% "$t = New-Object Net.Sockets.TcpClient;try{$t.Connect("""internetdownloadmanager.com""", 80)}catch{};$t.Connected" | findstr /i "true" %nul1% || (
call :_color %Red% "Unable to connect internetdownloadmanager.com, aborting..."
goto done
)
call :_color %Gray% "Ping command failed for internetdownloadmanager.com"
echo:
)

for /f "skip=2 tokens=2*" %%a in ('reg query "HKLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion" /v ProductName 2^>nul') do set "regwinos=%%b"
for /f "skip=2 tokens=2*" %%a in ('reg query "HKLM\SYSTEM\CurrentControlSet\Control\Session Manager\Environment" /v PROCESSOR_ARCHITECTURE') do set "regarch=%%b"
for /f "tokens=6-7 delims=[]. " %%i in ('ver') do if "%%j"=="" (set fullbuild=%%i) else (set fullbuild=%%i.%%j)
for /f "tokens=2*" %%a in ('reg query "HKU\%_sid%\Software\DownloadManager" /v idmvers %nul6%') do set "IDMver=%%b"

echo Checking Info - [%regwinos% ^| %fullbuild% ^| %regarch% ^| IDM: %IDMver%]

%idmcheck% && (echo: & taskkill /f /im idman.exe)

set _time=
for /f %%a in ('%psc% "(Get-Date).ToString('yyyyMMdd-HHmmssfff')"') do set _time=%%a

echo:
echo Creating backup of CLSID registry keys in %SystemRoot%\Temp

reg export %CLSID% "%SystemRoot%\Temp\_Backup_HKCU_CLSID_%_time%.reg"
if not %HKCUsync%==1 reg export %CLSID2% "%SystemRoot%\Temp\_Backup_HKU-%_sid%_CLSID_%_time%.reg"

call :delete_queue
call :add_key

%psc% "$sid = '%_sid%'; $HKCUsync = %HKCUsync%; $lockKey = 1; $deleteKey = $null; $toggle = 1; $f=[io.file]::ReadAllText('!_batp!') -split ':regscan\:.*';iex ($f[1])"

if %frz%==0 call :register_IDM

call :download_files
if not defined _fileexist (
%eline%
echo Error: Unable to download files with IDM.
echo:
echo Help: %mas%idm-activation-script.html#Troubleshoot
goto :done
)

%psc% "$sid = '%_sid%'; $HKCUsync = %HKCUsync%; $lockKey = 1; $deleteKey = $null; $f=[io.file]::ReadAllText('!_batp!') -split ':regscan\:.*';iex ($f[1])"

echo:
echo %line%
echo:
if %frz%==0 (
call :_color %Green% "The IDM Activation process has been completed."
echo:
call :_color %Gray% "If the fake serial screen appears, use the Freeze Trial option instead."
) else (
call :_color %Green% "The IDM 30 days trial period is successfully freezed for Lifetime."
echo:
call :_color %Gray% "If IDM is showing a popup to register, reinstall IDM."
)

::========================================================================================================================================

:done

echo %line%
echo:
echo:
if %_unattended%==1 timeout /t 2 & exit /b

if defined terminal (
call :_color %_Yellow% "Press 0 key to return..."
choice /c 0 /n
) else (
call :_color %_Yellow% "Press any key to return..."
pause %nul1%
)
goto MainMenu

:done2

if %_unattended%==1 timeout /t 2 & exit /b

if defined terminal (
echo Press 0 key to exit...
choice /c 0 /n
) else (
echo Press any key to exit...
pause %nul1%
)
exit /b

::========================================================================================================================================

:_rcont

reg add %reg% %nul%
call :add
exit /b

:register_IDM

echo:
echo Applying registration details...
echo:

set /a fname = %random% %% 9999 + 1000
set /a lname = %random% %% 9999 + 1000
set email=%fname%.%lname%@tonec.com

for /f "delims=" %%a in ('%psc% "$key = -join ((Get-Random -Count  20 -InputObject ([char[]]('ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'))));$key = ($key.Substring(0,  5) + '-' + $key.Substring(5,  5) + '-' + $key.Substring(10,  5) + '-' + $key.Substring(15,  5) + $key.Substring(20));Write-Output $key" %nul6%') do (set key=%%a)

set "reg=HKCU\SOFTWARE\DownloadManager /v FName /t REG_SZ /d "%fname%"" & call :_rcont
set "reg=HKCU\SOFTWARE\DownloadManager /v LName /t REG_SZ /d "%lname%"" & call :_rcont
set "reg=HKCU\SOFTWARE\DownloadManager /v Email /t REG_SZ /d "%email%"" & call :_rcont
set "reg=HKCU\SOFTWARE\DownloadManager /v Serial /t REG_SZ /d "%key%"" & call :_rcont

if not %HKCUsync%==1 (
set "reg=HKU\%_sid%\SOFTWARE\DownloadManager /v FName /t REG_SZ /d "%fname%"" & call :_rcont
set "reg=HKU\%_sid%\SOFTWARE\DownloadManager /v LName /t REG_SZ /d "%lname%"" & call :_rcont
set "reg=HKU\%_sid%\SOFTWARE\DownloadManager /v Email /t REG_SZ /d "%email%"" & call :_rcont
set "reg=HKU\%_sid%\SOFTWARE\DownloadManager /v Serial /t REG_SZ /d "%key%"" & call :_rcont
)
exit /b

:download_files

echo:
echo Triggering a few downloads to create certain registry keys, please wait...
echo:

set "file=%SystemRoot%\Temp\temp.png"
set _fileexist=

set link=https://www.internetdownloadmanager.com/images/idm_box_min.png
call :download
set link=https://www.internetdownloadmanager.com/register/IDMlib/images/idman_logos.png
call :download
set link=https://www.internetdownloadmanager.com/pictures/idm_about.png
call :download

echo:
timeout /t 3 %nul1%
%idmcheck% && taskkill /f /im idman.exe
if exist "%file%" del /f /q "%file%"
exit /b

:download

set /a attempt=0
if exist "%file%" del /f /q "%file%"
start "" /B "%IDMan%" /n /d "%link%" /p "%SystemRoot%\Temp" /f temp.png

:check_file

timeout /t 1 %nul1%
set /a attempt+=1
if exist "%file%" set _fileexist=1&exit /b
if %attempt% GEQ 20 exit /b
goto :Check_file

::========================================================================================================================================

:add_key

echo:
echo Adding registry key...
echo:

set "reg="%HKLM%" /v "AdvIntDriverEnabled2""

reg add %reg% /t REG_DWORD /d "1" /f %nul%

:add

if "%errorlevel%"=="0" (
set "reg=%reg:"=%"
echo Added - !reg!
) else (
set "reg=%reg:"=%"
call :_color2 %Red% "Failed - !reg!"
)
exit /b

::========================================================================================================================================

:regscan:
$finalValues = @()

$arch = (Get-ItemProperty -Path 'HKLM:\SYSTEM\CurrentControlSet\Control\Session Manager\Environment').PROCESSOR_ARCHITECTURE
if ($arch -eq "x86") {
  $regPaths = @("HKCU:\Software\Classes\CLSID", "Registry::HKEY_USERS\$sid\Software\Classes\CLSID")
} else {
  $regPaths = @("HKCU:\Software\Classes\WOW6432Node\CLSID", "Registry::HKEY_USERS\$sid\Software\Classes\Wow6432Node\CLSID")
}

foreach ($regPath in $regPaths) {
    if (($regPath -match "HKEY_USERS") -and ($HKCUsync -ne $null)) {
        continue
    }
	
	Write-Host
	Write-Host "Searching IDM CLSID Registry Keys in $regPath"
	Write-Host
	
    $subKeys = Get-ChildItem -Path $regPath -ErrorAction SilentlyContinue -ErrorVariable lockedKeys | Where-Object { $_.PSChildName -match '^\{[A-F0-9]{8}-[A-F0-9]{4}-[A-F0-9]{4}-[A-F0-9]{4}-[A-F0-9]{12}\}$' }

    foreach ($lockedKey in $lockedKeys) {
        $leafValue = Split-Path -Path $lockedKey.TargetObject -Leaf
        $finalValues += $leafValue
        Write-Output "$leafValue - Found Locked Key"
    }

    if ($subKeys -eq $null) {
	continue
	}
	
	$subKeysToExclude = "LocalServer32", "InProcServer32", "InProcHandler32"

    $filteredKeys = $subKeys | Where-Object { !($_.GetSubKeyNames() | Where-Object { $subKeysToExclude -contains $_ }) }

    foreach ($key in $filteredKeys) {
        $fullPath = $key.PSPath
        $keyValues = Get-ItemProperty -Path $fullPath -ErrorAction SilentlyContinue
        $defaultValue = $keyValues.PSObject.Properties | Where-Object { $_.Name -eq '(default)' } | Select-Object -ExpandProperty Value

        if (($defaultValue -match "^\d+$") -and ($key.SubKeyCount -eq 0)) {
            $finalValues += $($key.PSChildName)
            Write-Output "$($key.PSChildName) - Found Digit In Default and No Subkeys"
            continue
        }
        if (($defaultValue -match "\+|=") -and ($key.SubKeyCount -eq 0)) {
            $finalValues += $($key.PSChildName)
            Write-Output "$($key.PSChildName) - Found + or = In Default and No Subkeys"
            continue
        }
        $versionValue = Get-ItemProperty -Path "$fullPath\Version" -ErrorAction SilentlyContinue | Select-Object -ExpandProperty '(default)' -ErrorAction SilentlyContinue
        if (($versionValue -match "^\d+$") -and ($key.SubKeyCount -eq 1)) {
            $finalValues += $($key.PSChildName)
            Write-Output "$($key.PSChildName) - Found Digit In \Version and No Other Subkeys"
            continue
        }
        $keyValues.PSObject.Properties | ForEach-Object {
            if ($_.Name -match "MData|Model|scansk|Therad") {
                $finalValues += $($key.PSChildName)
                Write-Output "$($key.PSChildName) - Found MData Model scansk Therad"
                continue
            }
        }
        if (($key.ValueCount -eq 0) -and ($key.SubKeyCount -eq 0)) {
            $finalValues += $($key.PSChildName)
            Write-Output "$($key.PSChildName) - Found Empty Key"
            continue
        }
    }
}

$finalValues = @($finalValues | Select-Object -Unique)

if ($finalValues -ne $null) {
    Write-Host
    if ($lockKey -ne $null) {
        Write-Host "Locking IDM CLSID Registry Keys..."
    }
    if ($deleteKey -ne $null) {
        Write-Host "Deleting IDM CLSID Registry Keys..."
    }
    Write-Host
} else {
    Write-Host "IDM CLSID Registry Keys are not found."
	Exit
}

if (($finalValues.Count -gt 20) -and ($toggle -ne $null)) {
	$lockKey = $null
	$deleteKey = 1
    Write-Host "The IDM keys count is more than 20. Deleting them now instead of locking..."
	Write-Host
}

function Take-Permissions {
    param($rootKey, $regKey)
    $AssemblyBuilder = [AppDomain]::CurrentDomain.DefineDynamicAssembly(4, 1)
    $ModuleBuilder = $AssemblyBuilder.DefineDynamicModule(2, $False)
    $TypeBuilder = $ModuleBuilder.DefineType(0)

    $TypeBuilder.DefinePInvokeMethod('RtlAdjustPrivilege', 'ntdll.dll', 'Public, Static', 1, [int], @([int], [bool], [bool], [bool].MakeByRefType()), 1, 3) | Out-Null
    9,17,18 | ForEach-Object { $TypeBuilder.CreateType()::RtlAdjustPrivilege($_, $true, $false, [ref]$false) | Out-Null }

    $SID = New-Object System.Security.Principal.SecurityIdentifier('S-1-5-32-544')
    $IDN = ($SID.Translate([System.Security.Principal.NTAccount])).Value
    $Admin = New-Object System.Security.Principal.NTAccount($IDN)

    $everyone = New-Object System.Security.Principal.SecurityIdentifier('S-1-1-0')
    $none = New-Object System.Security.Principal.SecurityIdentifier('S-1-0-0')

    $key = [Microsoft.Win32.Registry]::$rootKey.OpenSubKey($regkey, 'ReadWriteSubTree', 'TakeOwnership')

    $acl = New-Object System.Security.AccessControl.RegistrySecurity
    $acl.SetOwner($Admin)
    $key.SetAccessControl($acl)

    $key = $key.OpenSubKey('', 'ReadWriteSubTree', 'ChangePermissions')
    $rule = New-Object System.Security.AccessControl.RegistryAccessRule($everyone, 'FullControl', 'ContainerInherit', 'None', 'Allow')
    $acl.ResetAccessRule($rule)
    $key.SetAccessControl($acl)

    if ($lockKey -ne $null) {
        $acl = New-Object System.Security.AccessControl.RegistrySecurity
        $acl.SetOwner($none)
        $key.SetAccessControl($acl)

        $key = $key.OpenSubKey('', 'ReadWriteSubTree', 'ChangePermissions')
        $rule = New-Object System.Security.AccessControl.RegistryAccessRule($everyone, 'FullControl', 'Deny')
        $acl.ResetAccessRule($rule)
        $key.SetAccessControl($acl)
    }
}

foreach ($regPath in $regPaths) {
    if (($regPath -match "HKEY_USERS") -and ($HKCUsync -ne $null)) {
        continue
    }
    foreach ($finalValue in $finalValues) {
        $fullPath = Join-Path -Path $regPath -ChildPath $finalValue
        if ($fullPath -match 'HKCU:') {
            $rootKey = 'CurrentUser'
        } else {
            $rootKey = 'Users'
        }

        $position = $fullPath.IndexOf("\")
        $regKey = $fullPath.Substring($position + 1)

        if ($lockKey -ne $null) {
            if (-not (Test-Path -Path $fullPath -ErrorAction SilentlyContinue)) { New-Item -Path $fullPath -Force -ErrorAction SilentlyContinue | Out-Null }
            Take-Permissions $rootKey $regKey
            try {
                Remove-Item -Path $fullPath -Force -Recurse -ErrorAction Stop
                Write-Host -back 'DarkRed' -fore 'white' "Failed - $fullPath"
            }
            catch {
                Write-Host "Locked - $fullPath"
            }
        }

        if ($deleteKey -ne $null) {
            if (Test-Path -Path $fullPath) {
                Remove-Item -Path $fullPath -Force -Recurse -ErrorAction SilentlyContinue
                if (Test-Path -Path $fullPath) {
                    Take-Permissions $rootKey $regKey
                    try {
                        Remove-Item -Path $fullPath -Force -Recurse -ErrorAction Stop
                        Write-Host "Deleted - $fullPath"
                    }
                    catch {
                        Write-Host -back 'DarkRed' -fore 'white' "Failed - $fullPath"
                    }
                }
                else {
                    Write-Host "Deleted - $fullPath"
                }
            }
        }
    }
}
:regscan:

::========================================================================================================================================

:_color

if %_NCS% EQU 1 (
echo %esc%[%~1%~2%esc%[0m
) else (
%psc% write-host -back '%1' -fore '%2' '%3'
)
exit /b

:_color2

if %_NCS% EQU 1 (
echo %esc%[%~1%~2%esc%[%~3%~4%esc%[0m
) else (
%psc% write-host -back '%1' -fore '%2' '%3' -NoNewline; write-host -back '%4' -fore '%5' '%6'
)
exit /b

::========================================================================================================================================
:: Leave empty line below

UnityShaderGraph---深度缓冲区和顶点着色器

Fri, 22 May 2026 17:58:10 GMT

深度缓冲区

为了实现渲染管线判定物体的空间层级关系,由于系统无法仅凭色彩数据判断是否覆盖已有像素,深度缓冲(Depth Buffer)作为辅助缓冲区,又称之为Z缓存(z-buffer)

这个用于作为第二存储位图,尺寸和帧缓冲区完全一致,但存储的是物体像素到摄像机的空间距离

深度缓冲采用非线性映射存储0-1区间的数值,通过为近景物体分配更多数据位来实现高精度渲染

在渲染物体时会绘制物体的深度值然后与深度缓冲区中的值进行比对这个过程就是深度测试(depth test),当绘制物体的深度值小于或等于缓冲区值时,新物体就会覆盖原有的物体,若绘制的是不透明物体还会更新缓冲区中的值,透明物体一般情况下不会写入深度数据

然而这些不需要了解,因为这些比对操作由shadergraph自动完成

这里我们需要关注这里面的这两个东西-----depth write(深度写入)和depth test(深度测试)

深度写入功能决定在深度测试通过时,是否更新深度缓冲区数值,默认是auto模式,该模式会自动处理不透明物体并跳过透明物体

而深度测试功能就是自定义新像素写入时的深度比较方式,系统默认采用L Equal模式也就是当前深度 ≤ 缓冲区深度

一、Depth Write（深度写入）— 3 个选项

控制是否将当前像素的深度值写入 Depth Buffer（深度缓冲区 / Z-Buffer）

选项	说明	典型应用
Auto（自动）	根据渲染队列（Render Queue）自动决定	默认设置，不透明物体开启，透明物体关闭
Force Enabled（强制开启）	强制写入深度，无视队列类型	特殊透明物体需要参与深度测试、粒子软粒子
Force Disabled（强制关闭）	强制不写入深度	纯透明物体、UI、特效、后处理

二、Depth Test（深度测试）— 8 个比较模式

控制当前像素的深度值如何与 Depth Buffer 中已有的深度值 进行比较，决定是否通过测试、是否渲染该像素

模式	数学含义	效果	典型应用
Less	当前深度 < 缓冲区深度	比已有物体更近才渲染	标准不透明物体（默认）
Greater	当前深度 > 缓冲区深度	比已有物体更远才渲染	特殊效果，如"只显示被遮挡部分"
LEqual(默认)	当前深度 ≤ 缓冲区深度	更近或相等时渲染	透明物体、避免 Z-Fighting
GEqual	当前深度 ≥ 缓冲区深度	更远或相等时渲染	天空盒、远处背景
Equal	当前深度 = 缓冲区深度	仅相等时渲染	特殊遮罩、Stencil 配合
NotEqual	当前深度 ≠ 缓冲区深度	不相等时渲染	排除特定深度区域
Always	永远通过	无视深度，总是渲染	UI、全屏特效、Debug 显示
Never	永远不通过	永远丢弃，不渲染	占位、调试、特殊剔除

当然也可以启用材质覆盖 Allow material override这样就可以在inspector窗口里对单个材质进行设置

而unity会在绘制完所有不透明物体后将整个深度纹理状态复制到相机深度纹理这样着色器就可以访问这个纹理了,不过这个深度纹理仅对透明着色器有意义,对于不透明着色器读取深度纹理时这个纹理会显示为灰色,因为深度纹理不记录透明物体的深度信息

在URP中使用深度纹理

如果要在URP中使用深度纹理则需要启用这些文件里的Depth Texture(深度纹理)

然后我们新建一个无光照的shadergraph

将surface type改为transparent 也就是透明,然后添加两个颜色节点------ForegroundColor(前景色)和BackgroundColor

然后我们添加SceneDepth节点,这个默认会使用当前渲染像素的屏幕坐标来采样深度纹理,无需手动输入任何参数

Unity Shader Graph 的 Scene Depth 节点提供三种 Sampling（采样模式），用于以不同方式解释深度缓冲区的值：

采样模式	说明
Linear 01	返回线性深度值，范围 0 到 1。0 对应相机的近裁剪面，1 对应远裁剪面。
Raw	返回深度缓冲区的原始非线性深度值，范围同样为 0 到 1，但分布不是线性的（通常在近处精度高，远处精度低）。
Eye	将深度值转换为 Eye（视图/相机）空间距离，单位为米，表示从相机到该像素对应场景点的实际距离。

在 Scene Depth 节点的上下文中，"线性关系"指的是 深度值与相机到物体的实际距离（Z 值）之间是否成正比

线性和非线性的区别

线性 = 深度值翻倍，实际距离也翻倍（成正比）
非线性 = 深度值翻倍，实际距离不是翻倍（不成正比）

模式	数学关系	直观理解
Raw	非线性（1/z 关系）	近处精度极高，远处精度极低。同样的深度值变化，在近处代表的实际距离变化很小，在远处代表的实际距离变化很大。
Linear 01	线性（归一化到 0-1）	深度值与实际距离成正比，但被压缩到 0（近裁剪面）到 1（远裁剪面）之间。0.5 正好对应远近裁剪面中间的距离。
Eye	线性（世界单位）	直接输出实际距离（米），0.5 就是 0.5 米，100 就是 100 米，没有任何归一化。

而做物体轮廓描边效果可以使用Linear01

然后我们添加Lerp节点

Lerp是线性插值(Linear Interpolation)的简称,指的是在两个数值之间做平滑过渡

左侧的A 和B两个输入端口分别接收要混合的数值,T输入则控制混合权重,决定结果偏向A还是B,取值范围0-1

例如T=0.25时输出结果就是75%的A加上25%的B

我们将前景色ForegroundColor设置为绿色,BackgroundColor后景色设置为白色

此时的材质显示的是白色

然后我们让视角被这个白色方块遮挡这三个物体

我们可以看到①和②号显示为前景色,而③号为白色,说明深度纹理有效

调整透明度会影响绿色的明暗度,除了这个③号,这里有一个关键的决定性因素------surface type

若设置为Opaque就表明这个是不透明材质,若设置为Transparent就是透明材质

我们的③号就是用的Transparency的材质

不透明材质的物品全部显示为前景色,例如我们将背景色设置为黄色就可以更明显的看出

但是我们若将背景物体扩大就很难分辨出来这几个方块的存在

尤其是在游戏窗口完全是一片绿色

此时我们可以调整主摄像机的Clipping Planes

在 Unity 中，Clipping Planes（裁剪平面） 的两个值是：

值	名称	含义
Near	近裁剪面	相机能看到的最近距离。小于这个距离的物体不会被渲染
Far	远裁剪面	相机能看到的最远距离。大于这个距离的物体不会被渲染

如果我们将far改为25就可以看的更清楚了

顶点着色器

网格是由一个个顶点构成的,这些顶点就是网格各个角落的点,点与点形成了面,每一帧画面Unity都要读取顶点数据,计算这些顶点在屏幕上应该显示的具体位置,然后这些顶点最终呈现在屏幕上(感觉和老电视的示波器差不多),这个过程是通过一系列坐标变换实现的

首先是从抽象的网格数据开始,这时顶点位置是相对于网格自身的原点来定义的,这个坐标系称之为对象空间(Object Space)

根据物体的变化位置顶点被转换到世界空间,这时他们的位置是相对于场景的世界原点,然后根据摄像机的位置和参数设置,顶点会被转换到裁剪空间(clip space),此时的物体的坐标就是相对于屏幕的坐标(说人话就是跟皮影戏一样,要想看到皮影戏就必须确保屏幕上为皮影的图形分配位置)

然而不需要了解这种东西,shadergraph会帮我们自动运算处理(虽然要是写shader的话需要手搓)

完成顶点着色器处理后网格数据会进行光栅化转化也就是把这些图形转换为一个一个的像素而片段着色器会对所有像素进行着色处理并最终呈现物体图像

回到Unity创建无光照shadergraph

之前我们都是直接用,这里讲讲这里的两个默认节点

对于Vertex（顶点阶段）

这是 Shader 的顶点着色器部分，负责处理模型的每个顶点：

输出端口	含义	默认空间
Position	顶点在 3D 空间中的坐标	Object Space（模型本地空间）
Normal	顶点法线方向，用于光照计算	Object Space
Tangent	顶点切线方向，用于法线贴图等	Object Space

Object Space（对象/模型空间）：以模型自身原点为基准的坐标系。比如一个球体，球心就是 (0,0,0)，不管这个球在世界中放在哪里

对于Fragment（片元/像素阶段)

这是 Shader 的片元着色器部分，负责计算最终屏幕上每个像素的颜色。默认只暴露了一个：

输入端口	含义
Base Color	材质的基础颜色/漫反射颜色

Shader Graph 自动帮你做了：

顶点位置变换：把 Object Space 的 Position 自动转换到 Clip Space（裁剪空间），这样模型才能正确显示在屏幕上
法线和切线：保留在 Object Space，供后续光照计算使用（如果你需要 World Space 的法线，要自己加 Transform 节点转换）

创建波浪效果

我们需要两个浮点数节点--wavespeed(波速,控制每个顶点上下移动的距离)还有wavestrength(波强度,控制顶点移动的距离

我们需要使用顶点的世界位置作为偏移值,此时需要position位置节点来实现

在 Unity Shader Graph 的 Position 节点中，Space（空间）下拉菜单有 5 种设置：

选项	中文含义	说明
Object	对象/模型空间	以模型自身原点为基准，模型移动时坐标不变
World	世界空间	以场景世界原点为基准，模型移动时坐标变化
View	视图/观察空间	以摄像机为基准，Z轴指向摄像机正前方
Absolute World	绝对世界空间	类似 World，但不受 GPU Instancing 等变换影响（用于大规模地形等）
Tangential	切线空间	以顶点切线、副切线、法线构建的局部坐标系，常用于法线贴图

这里我们采用world就可以实现波浪网格在世界坐标系的无缝衔接

现在添加计时功能,使用time时间节点并乘以波浪速度参数,我们把wavespeed放到multiply的B点,这里是用来设置波浪滚动方向的步骤

在 Unity Shader Graph 中，Position 节点用 Split 节点分离后的四个输出是：

输出	含义
R	X 坐标（红色通道）
G	Y 坐标（绿色通道）
B	Z 坐标（蓝色通道）
A	W 分量（齐次坐标，通常为 1）

然后用split分离节点分离position坐标的各个分量,如果只把x坐标分量叠加到时间参数上,波浪就会产生水平移动效果,如果使用z坐标分量波浪会往另一个方向水平移动也就是垂直之前的方向

这里若要实现对角线移动效果.需要将x和z坐标分量通过add节点相加,然后加上刚才相乘的值

Unity Shader Graph 中的 Sine 节点 是一个基础的数学三角函数节点，用于生成正弦波形。以下是它的核心要点：

基本功能

输入：接受一个浮点值（通常理解为弧度 radians）
输出：返回该弧度的正弦值，范围在 [-1, 1] 之间
数学公式：output = sin(input)

常见用途

场景	说明
周期性动画	让颜色、位置、UV 等随时间波动（如闪烁、呼吸效果）
波形生成	创建波浪形位移、水面波纹
遮罩/过渡	利用 `[-1, 1]` 的范围做软边缘或渐变控制
配合 Time 节点	`Time → Sine` 是最经典的自动动画组合

然后把计算结果输入正弦函数节点得到y轴偏移量,也就是这样

然后再用波浪强度wavestrength参数调节偏移量大小,然后将sine输出值和wavestrength相乘

然后新建一个Vector3节点,保持x和z分量为0,在y轴设置偏移值就得到了偏移向量

并添加一个position节点,选择object 对象空间坐标系,并用add节点加上我们刚才的y轴的偏移量,然后将结果连接到位置图形的输出端口

考虑到节点比较多移动起来比较困难,我们可以给节点分组,先用左键选中要分组的节点然后右键点击

然后取个名字就实现分组了

然后我们像之前那样添加基础色color节点和纹理texture节点来控制纹理和颜色

这么看可能不是很明显,我将这个plane对象旋转90度就可以看的更清了

实现更精细的波浪

我们旋转前三角形的边缘是与波浪运动方向保持一致,所以看起来不是太明显,不过仍然是有瑕疵的

为避免这种情况可以使用高精度网格模型,就是那种好几千个面的模型,这个相当于是将面切成大量的三角形使运动的时候的棱角感不是太明显,但是太吃配置了,如果场景里有大量这样的模型会消耗大量的GPU资源

还有一种方法是采用曲面细分技术,但是URP没有曲面细分,只有HDRP才有

因为这个是另一种渲染管,所以我们简单提一下吧

我们需要在这个面板找到HDRP特有的Tesseilation曲面细分功能

Tessellation（曲面细分）在 HDRP（High Definition Render Pipeline）中是一种几何层面的细节增强技术，它允许在 GPU 上动态细分三角形网格，从而在近距离观察时呈现更平滑、更精细的表面，而无需增加原始模型的多边形数量

启用这个

此时Vertex会新增加两个接口

Tessellation Factor（细分因子）

作用：控制细分程度——每个原始三角形被切成多少个小三角形

值	效果
`1`	不细分，保持原始网格
`2~5`	轻度细分，适合中距离
`10+`	重度细分，极近距离特写
`0`	理论上不渲染（实际应避免）

Tessellation Displacement（细分置换）

作用：控制细分后顶点的位移量——基于高度图把顶点沿着法线方向"推出去"或"拉进来"

输入	说明
高度图（Height Map）	最常用，灰度图，白色凸起、黑色凹陷
位移强度	通常先对高度图做 Remap/Scale，再接入
无输入	只做平滑细分（Phong Tessellation），不位移

然后我们将最开始的这个位置节点设置从世界坐标(world)切换为绝对世界坐标(absolute world),这个是专门用来生成地形什么的用的

然后我们删除掉这个add和position节点,直接用y轴偏移量连接Tessellation Displacement细分置换

此时的Tessellation Factor 曲面因子值默认为1,也就是正常情况,当我们增大x的值就会通过增加顶点来细分网格

我们可以增加这个x的数值使网格的面数增加,细分系数最高可达硬件上限64

UnityShaderGraph---了解ShaderGraph-纹理和UV以及Alpha相关

Thu, 21 May 2026 17:52:23 GMT

shadergraph是unity提供的shader可视化

若你学过blender的渲染,可能学起来会更轻松

旧版本unity使用的是BuiltIn渲染管,新版本普遍使用URP(Universal Render Pipeline，通用渲染管线),因为这个支持多设备,当然要是制作纯PC端也可以使用HDRP

URP Shader Graph 的 7 种模板类型

1. Lit Shader Graph（光照着色器图）

用途：标准 PBR 材质，最常用的 3D 着色器
特点：完整的光照响应，支持主光源、附加光源、阴影、环境光
Master Stack 输出：Base Color、Normal、Metallic、Smoothness、Ambient Occlusion、Emission、Alpha
典型应用：角色、道具、建筑、绝大多数 3D 场景物体
性能：中等，适合大多数平台

2. Unlit Shader Graph（无光照着色器图）

用途：不受任何光照影响的基础着色
特点：性能开销最低，颜色完全由 shader 决定，不受场景灯光影响
Master Stack 输出：Base Color、Alpha
典型应用：
- UI 元素和界面
- 粒子特效（火焰、魔法效果）
- 全息投影、扫描线效果
- 天空盒、背景
- 2D 游戏中的不受光物体
性能：最低，移动平台首选

3. Sprite Custom Lit Shader Graph（精灵自定义光照着色器图）

用途：2D Sprite 的自定义光照着色器
特点：
- 基于 Sprite Lit，但提供更多自定义控制
- 可以自定义光照计算方式，不完全遵循 URP 2D 灯光系统
- 支持更灵活的光照交互
Master Stack 输出：Base Color、Normal、Alpha，以及自定义光照相关输出
典型应用：
- 需要特殊光照效果的 2D 游戏
- 风格化 2D 渲染（如手绘风格、水彩风格）
- 需要自定义阴影或光照模型的 2D 项目
注意：需要配合 2D Renderer 使用

4. Sprite Unlit Shader Graph（精灵无光照着色器图）

用途：不受光照的 2D Sprite
特点：
- 专为 SpriteRenderer 优化
- 不响应任何 2D 或 3D 灯光
- 支持 Sprite 的 Sorting Layer 和 Order in Layer
Master Stack 输出：Base Color、Alpha
典型应用：
- UI 图片和图标
- 2D 游戏背景
- 不受光影响的 2D 角色或物体
- 像素艺术游戏
性能：2D 渲染中最低开销

5. Sprite Lit Shader Graph（精灵光照着色器图）

用途：受 URP 2D 灯光系统影响的 Sprite
特点：
- 响应 URP 的 2D Lights（Point Light 2D、Global Light 2D 等）
- 支持法线贴图产生凹凸感
- 支持 2D 阴影
Master Stack 输出：Base Color、Normal、Alpha
典型应用：
- 需要光影的 2D 平台游戏
- 俯视角 2D 游戏（如《哈迪斯》风格）
- 2.5D 游戏
- 任何需要动态光照的 2D 项目
要求：URP Asset 必须使用 2D Renderer

6. Decal Shader Graph（贴花着色器图）

用途：在现有几何体表面投影纹理
特点：
- 使用投影渲染，不创建新几何体
- 可以贴合任意表面形状
- 支持法线贴花（改变表面法线）
- 支持基于深度的贴花（Decal Projector）
Master Stack 输出：Base Color、Normal、Metallic、Smoothness、Ambient Occlusion、Emission、Alpha
典型应用：
- 弹孔和弹痕
- 血迹、泥渍
- 路面标记和涂鸦
- 墙面海报
- 环境细节增强（如角落积尘）
要求：需要 Decal Renderer Feature 或在 URP Asset 中启用 Decal 支持

7. Fullscreen Shader Graph（全屏着色器图）

用途：全屏后处理效果
特点：
- 渲染覆盖整个屏幕的四边形
- 可以访问场景颜色、深度、法线等纹理
- 用于后处理效果（Post-Processing）
- 在 URP 中通常配合 Fullscreen Pass Renderer Feature 使用
Master Stack 输出：
- Base Color（输出到屏幕）
- 可以采样 _BlitTexture（场景颜色）、_CameraDepthTexture 等
典型应用：
- 全屏特效（故障艺术 Glitch、老电影效果）
- 边缘检测、描边效果
- 颜色分级、色调映射自定义
- 水面反射扭曲
- 热扭曲效果
- 屏幕空间雾效
注意：这是 URP 12+（Unity 2021.2+）引入的，用于替代之前的后处理方式

保存资源并将材质添加到3d物体上

这里我们可以在colorexample里制作颜色节点

将这个与刚才的fragment相连并调整颜色并exposed暴露给inspector窗口

然后我们可以在这个shadergraph上创建材质的副本也就是Material

在inspector里设置

纹理和UV坐标

Texture纹理本质上是图片,所以我们可以去itch或者unity资源商店下载

而UV就是 Texture Coordinates（纹理坐标），用于告诉引擎如何把 2D 图片贴到 3D 模型表面

因为 3D 模型已经有 X、Y、Z 表示三维空间位置了，所以纹理坐标用 U、V 来区分：

U → 对应 2D 图片的 水平方向（X）
V → 对应 2D 图片的 垂直方向（Y）

简单说：UV 就是 3D 模型的"皮肤展开图"坐标

unity不允许直接将纹理节点连到BaseColor输出,因为要求必须明确指定用于纹理采样的UV坐标

这里需要使用到SampleTexture2D采样节点,往节点图中添加节点有两种方式:

①直接右键菜单选择节点并输入sampletexture2d找到并回车

② 按空格键调出节点创建面板并输入sampletexture2d找到并回车

然后得到这个东西

左侧接口用于接收纹理输入

对于图片模糊的可以设置为point no filter并apply

此时就非常清晰了

Unity 中 Texture 的 Filter Mode（过滤模式） 决定了当纹理被放大或缩小时，引擎如何采样像素颜色。三种模式如下：

三种 Filter Mode

1. Point（点过滤 / 最近邻）

原理：直接取最近的像素颜色，不做任何插值
效果：边缘锐利，出现明显的像素块（Pixelated）
性能：最快，计算量最小
典型应用：
- 像素艺术游戏（Pixel Art）
- 复古风格渲染
- UI 中需要清晰像素边界的图标
- 低分辨率纹理刻意保留块状感
- 数据纹理（如 ID 贴图、索引贴图，不能插值）

2. Bilinear（双线性过滤）

原理：在纹理的 u、v 两个方向 各做一次线性插值，综合 4 个相邻像素
效果：过渡平滑，但近距离看仍有些模糊
性能：中等
典型应用：
- 大多数 3D 游戏的基础纹理
- 需要平滑过渡但不需要极致清晰的场景
- 移动端性能与质量的平衡选择

3. Trilinear（三线性过滤）

原理：在 Bilinear 基础上增加 Mipmap 层级之间的插值
- 先对相邻两个 Mipmap 层级分别做 Bilinear
- 再对两个层级的结果做线性插值
效果：Mipmap 切换时过渡最平滑，无突兀跳变
性能：最高，比 Bilinear 多一次插值计算
典型应用：
- 高质量 3D 渲染
- 第一/第三人称视角中纹理远近变化明显的场景
- 需要消除 Mipmap 边界闪烁的情况

而左侧的UV坐标 unity会自动提供一个UV0,通常不需要手动指定UV坐标

右侧的最上面的RGBA是RGBA输出全通道,包含纹理的全部色彩信息

其余的R,G,B,A分别指的是红色,绿色,蓝色,和阿尔法透明通道

将纹理和基础色相混合

这个可以使用乘法节点器

这个会将左侧的两个红色通道的值相乘

大概这个样子

然后你就会看到我们的箱子实现了,这就是所谓的游戏贴图

控制滚动方向

拖入刚才创建的vector2节点,将默认值改为(1,0),并加入Time节点

time节点在着色器动画制作中很实用,可以提供多个不同的时间参数,最常用的就是Time参数,该数值表示场景加载后经过的秒数

将滚动速度scrollvelocity和时间Time相乘后最终会得到一个随时间推移持续朝同一方向增长的向量,初始滚动速度越大,其增长速度就越快

这个偏移向量将被应用于网格的默认UV坐标

我们需要添加一个叫做Tiling And Offset(平铺与偏移)来实现偏移向量的应用

此时就会实现贴图的滚动,此时启动游戏就可以看到材质的滚动了

透明度和Alpha通道

透明物体的渲染逻辑和不透明物体存在本质差异

出于渲染性能unity在渲染不透明物体时,通常采用从近到远的绘制顺序,近物遮挡机制可以有效提升提升渲染效率

对于透明物体需要根据Alpha值与背景物体进行颜色混合即Alpha混合透明机制,首先必须完成所有不透明物体的渲染才能进行后续的颜色计算,对于shader需要手动设置渲染优先级,数值越小渲染优先级越高,而shadergraph会自动处理顺序,采用从远到近的渲染顺序,距离最远的物体会优先绘制,而靠近摄像机的物体则后绘制

由于节点图采用的是不透明渲染模式,我们需要做一些调整

将Fragment的surface type表面类型改为transparent透明

由于输出的有multiply输出的有四个值,光学三原色和阿尔法透明值,我们的base color只接受了三原色,此时需要split组件将输出结果分离并提取出来alpha值

我们然后创建材质并修改阿尔法值

Alpha裁剪

这里首先换一张类似的贴图,然后打开alpha clipping阿尔法裁剪

然后制作material,修改阿尔法值并附加到cube上得到

然后添加一个浮点类型节点

Dither抖动纹理

添加dither节点,因为如果我们直接用脚本控制一个物体逐渐消失会出现色块不均匀消失的情况

Unity Shader Graph 的 Dither（抖动）节点 用于在屏幕空间应用有序抖动（Ordered Dithering），核心作用是通过引入可控噪声来随机化量化误差，从而避免色带（Color Banding）等大面积图案问题

端口	方向	类型	说明
In	输入	动态矢量	输入值（通常连接 Alpha 或颜色值）
Screen Position	输入	Vector 4	屏幕坐标，用于确定抖动图案的平铺位置。默认绑定屏幕空间坐标，也可连接 UV 等自定义坐标
Out	输出	动态矢量	抖动后的输出值

这样我们改变透明度的时候就会有那种点状消失的效果

这个不太明显,换一个纹理就很直观了

Unity-Splines工具

Tue, 19 May 2026 12:35:10 GMT

尝试splines制作卡牌游戏

安装Splines

Unity 的 Splines 工具 是一套用于创建、编辑和使用平滑曲线的内置系统，主要用于路径动画、物体运动轨迹、程序化生成等场景

选取三个点,并设成对称位置,像使用PS的钢笔工具一样拉成一条曲线

然后使用移动工具,点击中间的那个点并点击splines工具,选择Bezier(贝塞尔曲线)里的Mirrored

1. Bezier 切线模式（Tangent Modes）

当 Knot 的 Tangent Mode 设为 Bezier 后，可以进一步选择三种 Bezier 子模式

模式	行为	适用场景
Mirrored	In/Out 切线方向相反、长度相等。移动一侧切线，另一侧同步镜像变化。Knot 自身始终朝向 Out 切线方向。	需要平滑对称曲线（如道路、管道）
Continuous	In/Out 切线方向相反、长度独立。方向保持 180° 对齐，但可以分别调整两侧长度。	需要一侧曲率强、一侧曲率弱的过渡
Broken	In/Out 切线完全独立，方向和长度均可自由调整，互不影响。	需要尖锐转角或不对称形状

关键细节

Knot 朝向：在 Mirrored 和 Continuous 模式下，Knot 的旋转始终指向其 Out 切线方向。如果你旋转 Knot，切线会跟着旋转；如果你移动切线，Knot 会自动调整朝向以指向 Out 切线

。
设置时的对齐基准：通过 API SetTangentMode(int index, TangentMode mode, BezierTangent main = BezierTangent.Out) 设置时，第三个参数 main 决定以哪一侧切线为基准进行对齐。默认以 Out 为准，也可以指定为 In

。

2. In / Out 切线

每个 Knot 有两条切线

In Tangent：定义进入该 Knot 的线段的曲率
Out Tangent：定义离开该 Knot 的线段的曲率

在 Element Inspector 中可以直接调整：

Magnitude（长度）：影响切线对曲线的影响力，值越大曲线越"被拉扯"
Direction（方向）：切线从 Knot 指出的方向

3. Reverse Spline Flow（反转曲线流向）

这个功能会整体反转 Spline 的方向，产生以下效果

变化项	说明
Knot 索引反转	第一个 Knot 变成最后一个，最后一个变成第一个
In/Out 切线互换	对于 Bezier 模式的 Knot，原来的 In 切线变成 Out 切线，反之亦然
视觉箭头反向	Scene 视图上的流向箭头全部反向

沿X轴拖动这个黄色的圈改变曲线形状直到形成一个好看的弧度,然后搭载相关脚本

然后将其移动到界面的底部充当手牌区域,启动游戏,按下空格键生成卡牌

然后实现自定义ScriptableObject 对象

[CreateAssetMenu(menuName = "Data/CardData")]

flutter---网络请求

Sun, 17 May 2026 14:09:42 GMT

今天来学学flutter的网络请求

Dio插件的使用

dio 是 Flutter 里最常用的 HTTP 网络请求库之一，很多项目都会用它替代原生的 http 包，因为它功能更完整

(话说看到这个Dio我就想起了某个埃及艳妇狗头狗头狗头)

OK回归正题

首先根目录执行

text

flutter pub add dio

打开你的pubspec.yaml文件

可以看到这个

yaml
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.8
  dio: ^5.9.2     #dio下载完成

基本使用

Dio().get(地址).then().catchError()

dart
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {
  runApp(MaterialApp(home: HomePage()));
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String text = "点击获取数据";

  void getData() async {
    Response response = await Dio().get('https://genshin.hoyoverse.com/en/');

    setState(() {
      text = response.data.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("原神网页"), centerTitle: true),

      body: Center(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: getData,
                  child: Text("获取网页", style: TextStyle(fontSize: 18)),
                ),

                SizedBox(height: 20),

                Text(text, textAlign: TextAlign.center),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getData,
        child: Icon(Icons.refresh),
      ),
    );
  }
}

封装Dio工具

建立连接 → 发送数据 → 等待服务器返回
↑ ↑ ↑
connect send receive

dart
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {}

class DioUtils {
  final Dio _dio = Dio(); // 创建Dio实例
  DioUtils() {
    _dio.options.baseUrl = 'https://github.com/'; // 基础地址
    _dio.options.connectTimeout = Duration(seconds: 5); // 连接超时,类型为Duration
    _dio.options.sendTimeout = Duration(seconds: 5); // 发送超时,类型为Duration
    _dio.options.receiveTimeout = Duration(seconds: 5); // 响应超时,类型为Duration
  }
}

我们可以创建Dio工具类和实例对象,但是这种写法较为繁琐

使用“..”级操作符

作用是对同一个对象连续调用多个属性或方法时，不需要反复写对象名

dart
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {}

class DioUtils {
  final Dio _dio = Dio(); // 创建Dio实例
  DioUtils() {
   
    _dio.options
      ..baseUrl =
          'https://github.com/' // 基础地址
      ..connectTimeout =
          Duration(seconds: 5) // 连接超时,类型为Duration
      ..sendTimeout =
          Duration(seconds: 5) // 发送超时,类型为Duration
      ..receiveTimeout = Duration(seconds: 5); // 响应超时,类型为Duration
  }
}

dart
// ❌ 不用级联：重复写对象名
var buffer = StringBuffer();
buffer.write('Hello');
buffer.write(' ');
buffer.write('World');
var result = buffer.toString();

// ✅ 用级联：链式调用，更简洁
var result = (StringBuffer()
  ..write('Hello')
  ..write(' ')
  ..write('World'))
  .toString();

使用BaseOptions

flutter 的 BaseOptions 是 Dio 网络库中的核心配置类，用于定义全局请求的基础参数。它本身不是 Flutter SDK 的一部分，而是来自 dio 包

BaseOptions 封装了所有 HTTP 请求的默认配置，创建 Dio 实例时传入，后续所有请求都会继承这些基础参数

dart
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {}

class DioUtils {
  final Dio _dio = Dio(
    BaseOptions(
      baseUrl: 'https://github.com/',
      connectTimeout: Duration(seconds: 5),
      sendTimeout: Duration(seconds: 5),
      receiveTimeout: Duration(seconds: 5),
    ),
  );
}

Dio拦截器(Interceptors)

拦截器是 Dio 的核心机制，允许你在请求发出前和响应返回后插入自定义逻辑，实现统一的日志、鉴权、错误处理、缓存等

Flutter 里的 Dio 拦截器（Interceptors）主要用于统一处理请求、响应、错误，比如：

自动添加 Token
打印网络日志
刷新 Token
统一错误处理
请求加密/解密
Loading 状态管理

Dio 的拦截器语法核心是继承 Interceptor，然后重写三个方法：

text

123

onRequest()
onResponse()
onError()

三个阶段执行顺序

一次请求：

text

12345678910111213

dio.get()
    |
    ↓
onRequest()
    |
    ↓
服务器
    |
    ↓
onResponse()
    |
    ↓
业务代码

如果失败：

text

12345678910

dio.get()
    |
    ↓
onRequest()
    |
    ↓
服务器
    |
    ↓
onError()

基本结构

先导入：

dart
import 'package:dio/dio.dart';

创建 Dio：

dart
final dio = Dio();

添加拦截器：

dart
dio.interceptors.add(
  MyInterceptor(),
);

定义拦截器：

dart
class MyInterceptor extends Interceptor {  

  @override
  void onRequest(
      RequestOptions options,
      RequestInterceptorHandler handler,
  ) {

    print("请求地址: ${options.uri}");

    handler.next(options);
  }


  @override
  void onResponse(
      Response response,
      ResponseInterceptorHandler handler,
  ) {

    print("响应数据: ${response.data}");

    handler.next(response);
  }


  @override
  void onError(
      DioException err,
      ErrorInterceptorHandler handler,
  ) {

    print("请求失败: ${err.message}");

    handler.next(err);
  }
}

handler 三种操作

Request

text

handler.next(options);

意思：处理完了，继续发送请求

Response

text

handler.next(response);

意思: 继续返回数据

Error

text

handler.next(err);

意思: 继续抛错误

我们先试一下在终端输出

其中onRequest() onResponse() onError()函数里的参数可以直接写参数名,无需声明类型

dart
import 'package:dio/dio.dart';

void main() async {
  Dio dio = Dio();

  dio.interceptors.add(
    InterceptorsWrapper(
      // 请求前
      onRequest: (options, handler) {
        print("===发送请求===");
        print("请求地址: ${options.uri}");

        handler.next(options);
      },

      // 成功返回
      onResponse: (response, handler) {
        print("===收到响应===");
        print(response.data);

        handler.next(response);
      },

      // 出错
      onError: (error, handler) {
        print("===发生错误===");
        print(error.message);

        handler.next(error);
      },
    ),
  );

  try {
    Response res = await dio.get(
      'https://jsonplaceholder.typicode.com/posts/1',
    );

    print("===最终结果===");
    print(res.data);
  } catch (e) {
    print(e);
  }
}

dart
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {}

class DioUtils {
  final Dio _dio = Dio(); // 创建Dio实例

  //设置基础地址和超时时间
  DioUtils() {
    _dio.options
      ..baseUrl =
          'https://jsonplaceholder.typicode.com' // 基础地址
      ..connectTimeout =
          Duration(seconds: 5) // 连接超时,类型为Duration
      ..sendTimeout =
          Duration(seconds: 5) // 发送超时,类型为Duration
      ..receiveTimeout = Duration(seconds: 5); // 响应超时,类型为Duration

    // 添加请求拦截器
    _addInterceptors();
  }

  // 添加拦截器
  void _addInterceptors() {
    _dio.interceptors.add(
      InterceptorsWrapper(
        // 请求拦截器
        onRequest: (context, handler) {
          handler.next(context);
        },
        // 响应拦截器
        onResponse: (context, handler) {
          //http状态码为2XX成功,3XX跳转,4XX错误,5XX服务器错误
          if (context.statusCode! >= 200 && context.statusCode! < 300) {
            handler.next(context);
            return;
          }
          // 其他状态码视为错误,抛出异常
          handler.reject(DioException(requestOptions: context.requestOptions));
        },
        // 错误拦截器
        onError: (context, handler) {
          handler.reject(context);
        },
      ),
    );
  }

  //向外暴露get方法,封装请求
  Future<Response> get(String url, {Map<String, dynamic>? params}) {
    return _dio.get(url, queryParameters: params);
  }
}

然后与MaterialApp结合

dart
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {
  runApp(const MaterialApp(home: DioDemoPage()));
}

class DioDemoPage extends StatefulWidget {
  const DioDemoPage({super.key});

  @override
  State<DioDemoPage> createState() => _DioDemoPageState();
}

class _DioDemoPageState extends State<DioDemoPage> {
  final Dio dio = Dio();

  String result = "点击按钮发送请求";

  @override
  void initState() {
    super.initState();

    dio.interceptors.add(
      InterceptorsWrapper(
        // 请求前
        onRequest: (options, handler) {
          print("===== 请求拦截器 =====");
          print("请求地址: ${options.uri}");

          handler.next(options);
        },

        // 请求成功
        onResponse: (response, handler) {
          print("===== 响应拦截器 =====");
          print("状态码: ${response.statusCode}");

          handler.next(response);
        },

        // 请求失败
        onError: (error, handler) {
          print("===== 错误拦截器 =====");
          print(error.message);

          handler.next(error);
        },
      ),
    );
  }

  Future<void> loadData() async {
    try {
      Response response = await dio.get(
        "https://jsonplaceholder.typicode.com/posts/1",
      );

      setState(() {
        result = response.data.toString();
      });
    } catch (e) {
      setState(() {
        result = e.toString();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Dio拦截器演示"), centerTitle: true),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Center(
          child: Column(
            children: [
              ElevatedButton(onPressed: loadData, child: const Text("发送请求")),
              const SizedBox(height: 20),
              Expanded(child: SingleChildScrollView(child: Text(result))),
            ],
          ),
        ),
      ),
    );
  }
}

初始化获取数据

我们使用测试网站https://jsonplaceholder.typicode.com/

我们可以使用如下后缀来测试数据

路径	数量
/posts	100 posts
/comments	500 comments
/albums	100 albums
/photos	5000 photos
/todos	200 todos
/users	10 users

这里我们使用/posts/1获得第一篇测试文章的数据

GET	/posts
GET	/posts/1
GET	/posts/1/comments
GET	/comments?postId=1
POST	/posts
PUT	/posts/1
PATCH	/posts/1
DELETE	/posts/1

对比一下网站内容,完全一致

dart
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MainPage()));
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  String result = '点击获取数据';
  //初始化
  void initState() {
    //使用initState()方法初始化
    super.initState();
  }

  void _getChannels() async {
    DioUtils util = DioUtils();

    try {
      // 获取数据
      Response<dynamic> response = await util.get('/posts/1');
      setState(() {
        result = response.data.toString();
      });
      print(response);
    } catch (e) {
      setState(() {
        result = e.toString();
      });
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dio')),

      body: Padding(
        padding: EdgeInsets.all(16),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(onPressed: _getChannels, child: Text("获取数据")),
              const SizedBox(height: 20),
              Expanded(child: SingleChildScrollView(child: Text(result))),
            ],
          ),
        ),
      ),
    );
  }
}

//Dio 工具类
class DioUtils {
  final Dio _dio = Dio(); // 创建Dio实例

  //设置基础地址和超时时间
  DioUtils() {
    _dio.options
      ..baseUrl =
          'https://jsonplaceholder.typicode.com' // 基础地址
      ..connectTimeout =
          Duration(seconds: 5) // 连接超时,类型为Duration
      // ..sendTimeout =
      //     Duration(seconds: 5) // 发送超时,类型为Duration
      ..receiveTimeout = Duration(seconds: 5); // 响应超时,类型为Duration

    // 添加请求拦截器
    _addInterceptors();
  }

  // 添加拦截器
  void _addInterceptors() {
    _dio.interceptors.add(
      InterceptorsWrapper(
        // 请求拦截器
        onRequest: (context, handler) {
          handler.next(context);
        },
        // 响应拦截器
        onResponse: (context, handler) {
          //http状态码为2XX成功,3XX跳转,4XX错误,5XX服务器错误
          if (context.statusCode! >= 200 && context.statusCode! < 300) {
            handler.next(context);
            return;
          }
          // 其他状态码视为错误,抛出异常
          handler.reject(DioException(requestOptions: context.requestOptions));
        },
        // 错误拦截器
        onError: (context, handler) {
          handler.reject(context);
        },
      ),
    );
  }

  //向外暴露get方法,封装请求
  Future<Response<dynamic>> get(String url, {Map<String, dynamic>? params}) {
    return _dio.get(url, queryParameters: params);
  }
}

web端跨域问题

默认情况下,flutter运行 web 端加载网络资源会报跨域可能提示错误,解决方法是:

首先在flutter/packages/flutter_tools/lib/src/web/chrome.dart里添加'--disable-web-security',

然后删除flutter/bin/cache/下的 flutter_tools.snaphot和flutter_tools.stamp缓存文件

最后执行 flutter doctor -v

然后重新运行项目

这个我们单独在一篇文章里解释

父传子实现

dart
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(debugShowCheckedModeBanner: false, home: MainPage()),
  );
}

// =========================
// 数据模型
// =========================

class PinData {
  final String title;
  final String imageUrl;

  PinData({required this.title, required this.imageUrl});
}

// =========================
// 父组件
// =========================

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  // 父组件保存数据
  List<PinData> pins = [];

  bool loading = false;

  // 获取数据
  Future<void> _getChannels() async {
    DioUtils util = DioUtils();

    setState(() {
      loading = true;
    });

    try {
      Response response = await util.get('/posts');

      List data = response.data;

      setState(() {
        pins = data.map((item) {
          return PinData(
            title: item['title'],

            // 暂时使用随机图片测试
            imageUrl: 'https://picsum.photos/300/${300 + item['id'] * 20}',
          );
        }).toList();

        loading = false;
      });
    } catch (e) {
      print(e);

      setState(() {
        loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Pinterest Demo')),

      body: loading
          ? const Center(child: CircularProgressIndicator())
          : pins.isEmpty
          ? Center(
              child: ElevatedButton(
                onPressed: _getChannels,
                child: const Text('获取数据'),
              ),
            )
          : PinGrid(
              // =========================
              // 父传子
              // =========================
              pins: pins,
            ),
    );
  }
}

// =========================
// 子组件：图片网格
// =========================

class PinGrid extends StatelessWidget {
  final List<PinData> pins;

  const PinGrid({super.key, required this.pins});

  @override
  Widget build(BuildContext context) {
    // 获取当前窗口宽度
    double width = MediaQuery.of(context).size.width;

    // 根据屏幕宽度决定列数
    int columns;

    if (width < 600) {
      columns = 2; // 手机
    } else if (width < 900) {
      columns = 3; // 平板
    } else if (width < 1200) {
      columns = 4; // 小电脑
    } else if (width < 1600) {
      columns = 5; // 普通电脑
    } else {
      columns = 6; // 大屏幕
    }

    return GridView.builder(
      padding: const EdgeInsets.all(16),

      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: columns,

        // 横向间距
        crossAxisSpacing: 16,

        // 纵向间距
        mainAxisSpacing: 16,

        // 卡片比例
        childAspectRatio: 0.7,
      ),

      itemCount: pins.length,

      itemBuilder: (context, index) {
        return PinCard(pin: pins[index]);
      },
    );
  }
}

// =========================
// 子组件：一张图片卡片
// =========================

class PinCard extends StatelessWidget {
  final PinData pin;

  const PinCard({super.key, required this.pin});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 图片
        Expanded(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: Image.network(
              pin.imageUrl,
              width: double.infinity,
              fit: BoxFit.cover,

              // 加载失败
              errorBuilder: (context, error, stackTrace) {
                return const Center(child: Icon(Icons.error));
              },
            ),
          ),
        ),

        const SizedBox(height: 6),

        // 标题
        Text(
          pin.title,
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
      ],
    );
  }
}

// =========================
// Dio 工具类
// =========================

class DioUtils {
  final Dio _dio = Dio();

  DioUtils() {
    _dio.options
      ..baseUrl = 'https://jsonplaceholder.typicode.com'
      ..connectTimeout = const Duration(seconds: 5)
      ..receiveTimeout = const Duration(seconds: 5);

    _addInterceptors();
  }

  void _addInterceptors() {
    _dio.interceptors.add(
      InterceptorsWrapper(
        onRequest: (context, handler) {
          handler.next(context);
        },

        onResponse: (context, handler) {
          if (context.statusCode! >= 200 && context.statusCode! < 300) {
            handler.next(context);
            return;
          }

          handler.reject(DioException(requestOptions: context.requestOptions));
        },

        onError: (context, handler) {
          handler.reject(context);
        },
      ),
    );
  }

  Future<Response<dynamic>> get(String url, {Map<String, dynamic>? params}) {
    return _dio.get(url, queryParameters: params);
  }
}

flutter---组件通信

Fri, 15 May 2026 20:11:21 GMT

今天来了解组件通信

构造函数传递(父传子)

子组件属性如果没有初始值，需要在构造函数中用required来接收属性

无状态组件子组件

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: [
              Text(
                "终末地AI群聊",
                style: TextStyle(fontSize: 20, color: Colors.red),
              ),
              Child(name: "终末地AI群聊"),
            ],
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50,
            child: Center(child: Text("Copyright © 2024 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

class Child extends StatelessWidget {
  final String name;
  const Child({super.key, required this.name}); //使用命名参数来传递name参数

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        name,
        style: TextStyle(fontSize: 20, color: Colors.cyanAccent),
      ),
    );
  }
}

有状态组件子组件

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: [
              Text(
                "终末地AI群聊",
                style: TextStyle(fontSize: 20, color: Colors.blueAccent),
              ),
              Child(message: "Hello World"), // 传递参数给子组件
            ],
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50,
            child: Center(child: Text("Copyright © 2024 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

class Child extends StatefulWidget {
  final String message; // 定义一个参数，用于接收父组件传递的数据
  const Child({super.key, required this.message}); // 通过构造函数接收父组件传递的参数

  @override
  State<Child> createState() => _ChildState();
}

class _ChildState extends State<Child> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        "子组件${widget.message}", // 通过 widget.message 获取父组件传递的参数
        style: TextStyle(fontSize: 20, color: Colors.red),
      ),
    );
  }
}

这里可以尝试用List来实现子组件的生成

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  List<String> _list = [
    //用List来列举数据
    "钻石剑",
    "下届合金剑",
    "木剑",
    "石剑",
    "铁剑",
    "金剑",
    "铜剑",
    "三叉戟",
    "弓箭",
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: GridView.count(
        padding: EdgeInsets.all(10), //内边距
        crossAxisCount: 2, //每行显示2个
        mainAxisSpacing: 10, //主轴间距
        crossAxisSpacing: 10, //交叉轴间距
        //生成List的长度个Child
        children: List.generate(_list.length, (int index) {
          return Child(weaponname: _list[index]);
        }),
      ),
    );
  }
}

class Child extends StatefulWidget {
  final String weaponname;
  const Child({super.key, required this.weaponname});

  @override
  State<Child> createState() => _ChildState();
}

class _ChildState extends State<Child> {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center, //子组件居中对齐
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 5),
        color: Colors.blueGrey,
        borderRadius: BorderRadius.all(Radius.circular(40)),
      ), //边框和背景颜色
      child: Text(
        widget.weaponname,
        style: TextStyle(
          fontSize: 20,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ), //子组件显示的文本
    );
  }
}

回调函数传递(子传父)

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  List<String> _list = [
    //用List来列举数据
    "钻石剑",
    "下届合金剑",
    "木剑",
    "石剑",
    "铁剑",
    "金剑",
    "铜剑",
    "三叉戟",
    "弓箭",
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: GridView.count(
        padding: EdgeInsets.all(10), //内边距
        crossAxisCount: 2, //每行显示2个
        mainAxisSpacing: 10, //主轴间距
        crossAxisSpacing: 10, //交叉轴间距
        //生成List的长度个Child
        children: List.generate(_list.length, (int index) {
          return Child(
            weaponname: _list[index],
            index: index,
            onDelete: (int i) {
              //删除回调函数
              setState(() {
                _list.removeAt(i);
              });
            },
          );
        }),
      ),
    );
  }
}

class Child extends StatefulWidget {
  final String weaponname;
  final int index;
  final Function(int) onDelete; //定义回调函数用于删除操作
  const Child({
    super.key,
    required this.weaponname,
    required this.index,
    required this.onDelete,
  });

  @override
  State<Child> createState() => _ChildState();
}

class _ChildState extends State<Child> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomRight,
      children: [
        Container(
          alignment: Alignment.center, //子组件居中对齐
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black, width: 5),
            color: Colors.blueGrey,
            borderRadius: BorderRadius.all(Radius.circular(40)),
          ), //边框和背景颜色
          child: Text(
            widget.weaponname,
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ), //子组件显示的文本
        ),
        IconButton(
          onPressed: () {
            widget.onDelete(widget.index); //调用回调函数删除当前子组件
          },
          icon: Icon(Icons.delete, color: Colors.cyanAccent, size: 30),
        ), //删除按钮,点击删除子组件
      ],
    );
  }
}

PotPlayer的配置

Thu, 07 May 2026 12:33:12 GMT

PotPlayer是一款专业的播放器,不过配置极其复杂

这也是很多人吐槽的点,但是再怎么说这玩意在播放器界也是无敌的存在

下载potplayer和完美解码

因为在视频和音频的解码这方面的配置很繁琐,这里就诞生了完美解码这个东西

点击前往下载完美解码

首先前往完美解码的设置

按照我的选就行了,然后点击应用, 这里我们的视频的播放就没有问题了,完美解码会自动帮我们配置解码器(例如madVR MPCVR和LAV Filters这三个外置的程序,如果自己配置的话很麻烦)

其中这个硬件加速设置为D3D11,不然4K视频播放非常卡

顺便提一下完美解码会替换掉我们potplayer的图标,不过没有什么影响

配置potplayer

然后打开potplayer来进行额外的配置

首先打开这里

你可以看到我下载了刺客伍六七的番,可以看到Potplayer支持弹幕和字幕

然后直接按照我的设置就行了,不需要知道为什么

其中这个不聊天时使用各种浏览器功能这个大家可选可不选,因为potplayer可以当做浏览器

这里我们只需要记住鼠标的三个快捷键,鼠标左键单击暂停,双击退出,中键单击全屏,右键单击打开设置

我们按下Tab键就可以查看视频的信息

然后还有方便截图的快捷键 D(上一帧画面) 和 F (下一帧画面)

以及 Ctrl + shift +左右方向键 的关键帧

以及X 减速播放 和 C 加速播放 还有 Z 倍率切换(回到原始1倍速)

还有[ 键和 ] 键将视频打上AB区间实现某一片段的循环播放,而{ 键和} 键则分别取消这两个点

还有按P 添加书签 和 H打开书签界面

Ctrl +C 复制画面到剪切板

按 K 键是打开截图设置,而截图是 Ctrl +E,自己提前设置好保存的文件夹

Alt +C 录制视频

还有这个,保持宽高比,调整窗口大小画面不变形

以及视频渲染器

声音关掉规格化防止忽大忽小

当然也可以自定义关联的文件,比如MP4 什么的

这样potplayer会在视频播放的时候自动寻找和视频相关文件比如字幕文件和弹幕文件这些

在线字幕搜索功能

同样的 potplayer也内置了在线字幕搜索功能(不过没什么用)

我们可以在这里导入插件,可以看到有一些内置的字幕平台,这个可以根据视频的名称来搜素视频相关的字幕(不过不好用,因为这个只适合那些美国大片和知名电影)

这个你们可以参考这个视频

Neovim的使用和配置

Sat, 02 May 2026 19:08:55 GMT

Neovim,Linux用户肯定老熟悉了,但是对Windows用户来说一点也不好用

不过这个还是提供了Windows版本的,我们就来学学怎么用吧

快捷键	功能
i	进入插入模式
Esc	回到普通模式
:w	保存
:q	退出
:wq	保存退出
dd	删除一行
yy	复制一行
p	粘贴
u	撤销
Ctrl+r	重做

下载地址

当然,这个和VScode一样,如果不装插件的话就是一个壳子没什么用

但是这玩意的插件全都装到了C盘和VScode Cursor还有Trae一样吃C盘配置

首先配置系统环境变量,保存位置你们自己调整

text

XDG_DATA_HOME=D:\Neovim\nvim-data

还有就是系统变量里关闭SSL检查不然插件下载地址被墙了根本下载不下来

text

CURL_SSL_NO_REVOKE=1

然后cmd输入看是否配置成功

text

echo %XDG_DATA_HOME%

在Neovim里输入并回车

text

:echo stdpath("data")

得到D:\Neovim\nvim-data\nvim-data就说明已经配置到D盘了

然后我们前往这个仓库下载大佬配置好的文件

在你的C:\Users\用户名\AppData\Local里将仓库里的整个nvim文件夹粘贴进去并重启Neovim就可以看到正在下载插件

然后等待全部下载完成重启Neovim

要输入命令的话使用“ : “键盘快捷键,按回车可以取消输入

按e键变成这样

按X键进入Lasy插件市场(这里说明一下,Lazy就是一个插件管理器,也是最好用的),可以挑选你想用的插件下载重启就行啦(注意,如果你下载了部分插件可能会导致冲突或者覆盖掉当前主题)

而使用nvim的方式比如在cmd或powershell输入

text

123

nvim .      //当前目录作为项目打开
或者
nvim D:\project\mygame     //打开指定文件夹

就可以打开文件了

ClaudeCode配置DeepSeek

Tue, 28 Apr 2026 16:36:35 GMT

今天尝试用claude code接Deepseek模型

通过CC-Switch

首先打开CC-Switch,然后点击加号

这里你可以看到我已经配置了几个其他的API给Claude

这里可以选择各种各样的供应商,比如OpenRouter Deepseek和Bailian(也就是阿里云百炼)

这里我用阿里云百炼的,模型全部选择deepseek-v4-pro

然后去下载Claudecode

text

npm install -g @anthropic-ai/claude-code

在如果你直接在终端输入 claude启动的话,会显示需要你登录,众所周知 A/不喜欢中国人所以伪装的门槛还是很高的

但是我们可以通过CC-switch来中转, 完成配置后在.claude文件夹找到

模型相关的配置会保存在settings.json文件

例如我的当前是这种

json
{
  "env": {
    "ANTHROPIC_BASE_URL": "https://dashscope.aliyuncs.com/apps/anthropic",
    "ANTHROPIC_AUTH_TOKEN": "sk-你的API key",
    "ANTHROPIC_MODEL": "deepseek-v4-pro",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "deepseek-v4-pro",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "deepseek-v4-pro",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "deepseek-v4-pro"
  }
}

此时就可以在里面使用了

VScode的Claude插件

在VScode的settings.json里将

json
"claudeCode.preferredLocation": "panel",
  "claudeCode.environmentVariables": [
  ],

改为

json
"claudeCode.preferredLocation": "panel",
  "claudeCode.environmentVariables": [
    { "name": "ANTHROPIC_BASE_URL", "value": "https://xxxx" },
    { "name": "ANTHROPIC_AUTH_TOKEN", "value": "xxxx" },
  ],

此时就可以自动使用我们在CC-switch里的设置了

flutter---常用的各种组件

Mon, 27 Apr 2026 10:26:20 GMT

今天来学学更多的flutter的组件

弹性布局-Flex

Expanded

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity, //宽度占满父组件
          height: double.infinity, //高度占满父组件
          decoration: BoxDecoration(color: Colors.tealAccent),
          child: Flex(
            direction: Axis.horizontal, //主轴水平
            //direction: Axis.vertical, //主轴垂直
            children: [
              //Expaned组件会占满剩余空间
              Expanded(
                flex: 1, //flex属性表示占剩余空间的比例,如果有多个Expanded组件，flex值越大占的空间越多
                child: Container(
                  color: Colors.redAccent,
                  height: 50,
                  width: 50,
                ),
              ),

              Expanded(
                flex: 2,
                child: Container(
                  color: Colors.blueAccent,
                  height: 50,
                  width: 50,
                ),
              ),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

Flexible

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity, //宽度占满父组件
          height: double.infinity, //高度占满父组件
          decoration: BoxDecoration(color: Colors.tealAccent),
          child: Flex(
            direction: Axis.horizontal, //主轴水平
            //direction: Axis.vertical, //主轴垂直
            children: [
              //Flexible组件不同于Expanded组件，Flexible组件可以设置flex属性来控制占用剩余空间的比例，而Expanded组件默认占用所有剩余空间
              Flexible(
                flex: 50, //flex属性表示占剩余空间的比例,如果有多个Flexible组件，flex值越大占的空间越多
                child: Container(
                  color: Colors.redAccent,
                  height: 100,
                  width: 100,
                ),
              ),

              Flexible(
                flex: 2,
                child: Container(
                  color: Colors.blueAccent,
                  height: 100,
                  width: 100,
                ),
              ),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

Flex布局受其父组件传递的约束影响。确保父组件提供了适当的布局约束

Expanded与Flexible的区别：

-------- Expanded强制子组件填满所有剩余空间，

-------- Flexible根据自身大小调整，不强制占满空间

我们来练习一下

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity, //宽度占满父组件
          height: double.infinity, //高度占满父组件
          decoration: BoxDecoration(color: Colors.tealAccent),
          child: Flex(
            direction: Axis.vertical, //主轴垂直
            children: [
              Container(color: Colors.redAccent, height: 100),
              Expanded(
                child: Container(
                  color: Colors.greenAccent,
                  width: double.infinity,
                  height: 100,
                ),
              ),
              Container(color: Colors.blueAccent, height: 100),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

流式布局-Wrap

当子组件内容是根据数据动态生成时，使用wrap可以确保布局始终适配

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  //使用Widgt类型的返回值，生成一个包含10个Container组件的列表
  List<Widget> getList() {
    //List.generate(count, generator)方法可以生成一个包含count个元素的列表，generator是一个函数，用于生成每个元素的值
    //这里用(){}匿名函数来生成每个元素的值，index是当前元素的索引，从0开始
    return List.generate(13, (index) {
      return Container(width: 100, height: 100, color: Colors.redAccent);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity, //宽度占满父组件
          height: double.infinity, //高度占满父组件
          decoration: BoxDecoration(color: Colors.tealAccent),
          child: Wrap(
            spacing: 10, //主轴上间距
            runSpacing: 10, //交叉轴上间距
            alignment: WrapAlignment.spaceAround, //主轴对齐方式为均分
            direction: Axis.horizontal, //主轴方向为水平方向
            children: getList(), //生成10个子组件
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

List.generate是一个构造器，用于快速创建长度固定且每个元素可以通过索引号确定的列表语法：

List.generate(int count, E generator(int index), {bool growable: false})

层叠布局-Stack/Positioned

可以看出这个是层叠式的,一层叠一层

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.lightBlueAccent,
          child: Stack(
            alignment: Alignment.center, //让每一个子组件都居中
            children: [
              Container(width: 300, height: 300, color: Colors.red),
              Container(width: 200, height: 200, color: Colors.green),
              Container(width: 100, height: 100, color: Colors.blue),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

Positioned

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.lightBlueAccent,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(width: 150, height: 150, color: Colors.red),
              Container(width: 100, height: 100, color: Colors.green),
              Container(width: 50, height: 50, color: Colors.blue),
              Positioned(
                //Positionzd组件用于确定子组件的位置
                right: 50,
                bottom: 50,
                child: Container(width: 50, height: 50, color: Colors.yellow),
              ),
              Positioned(
                left: 50,
                bottom: 50,
                child: Container(width: 50, height: 50, color: Colors.yellow),
              ),
              Positioned(
                right: 50,
                top: 50,
                child: Container(width: 50, height: 50, color: Colors.yellow),
              ),
              Positioned(
                left: 50,
                top: 50,
                child: Container(width: 50, height: 50, color: Colors.yellow),
              ),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

还有一个很奇葩的玩法就是,我们在之前学习的padding这里可以用positioned来代替效果

首先先了解positioned的一个特性,如果我们同时输入上下左右四个方向

text

1234567

Positioned(
    right: 50,
    top: 50,
    bottom: 50,
    left: 50,
    child: Container(width: 50, height: 50, color: Colors.yellow),
),

此时代码不会报错,而是子组件往四个方向延伸来覆盖容器

而且取值为0的时候甚至全部覆盖body

text

1234567

Positioned(
	right: 0,
	top: 0,
	bottom: 0,
	left: 0,
	child: Container(width: 50, height: 50, color: Colors.yellow),
),

同理,我们也可以制造单方向延伸的条

dart
Positioned(
	right: 0,
	bottom: 0,
	left: 0,
	child: Container(width: 50, height: 50, color: Colors.yellow),
),

文本组件-Text

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.lightBlueAccent,
          alignment: Alignment.center,
          child: Text(
            "终末地AI群聊",
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold, //fontWeight这里是加粗
              color: Colors.white, //color是字体颜色
              fontStyle: FontStyle.italic, //fontStyle这里是斜体
              shadows: [
                Shadow(
                  color: Colors.black45,
                  offset: Offset(2, 2),
                  blurRadius: 4,
                ),
              ], //shadows是阴影
              decoration: TextDecoration.underline, //decoration是下饰线
              decorationColor: Colors.white70, //decorationColor是下饰线的颜色
            ),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

我们普通的文字排列是默认的换行

但是我们也可以指定显示的行号

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.lightBlueAccent,
          alignment: Alignment.center,
          child: Text(
            "终末地AI群聊:欢迎管理员群主进入！本群的管理者有陈千语干员和佩丽卡总督等人,新成员为庄方宜天师和弥弗长官,请大家遵守群规，友好相处哦！",
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold, //fontWeight这里是加粗
              color: Colors.white, //color是字体颜色
              fontStyle: FontStyle.italic, //fontStyle这里是斜体
              shadows: [
                Shadow(
                  color: Colors.black45,
                  offset: Offset(2, 2),
                  blurRadius: 4,
                ),
              ], //shadows是阴影
              decoration: TextDecoration.underline, //decoration是下饰线
              decorationColor: Colors.white70, //decorationColor是下饰线的颜色
            ),
            maxLines: 1, //maxLines是文本的最大行数，这里是1行
            overflow: TextOverflow.ellipsis, //overflow是文本溢出时的处理方式，这里是用省略号表示溢出部分
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

TextSpan

如果需要在同一段本中显示不同样式，可用Text.rich构造函数配合TextSpan来实现

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.white,
          alignment: Alignment.center,
          child: Text.rich(
            // 使用 Text.rich 来创建富文本富文本就是可以在同一段文本中使用不同的样式
            TextSpan(
              text: "点击进入,打开你的拉电线之旅~~\n\n",
              children: [
                TextSpan(
                  text: "欢迎来到终末地AI群聊！\n\n",
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.cyanAccent,
                  ),
                ),
                TextSpan(
                  text: "在这里，你可以与各种AI角色进行有趣的对话\n\n",
                  style: TextStyle(fontSize: 16, color: Colors.indigoAccent),
                ),
                TextSpan(text: "梨花飘落你窗前~~\n\n", style: TextStyle(fontSize: 16)),
              ],
              style: TextStyle(
                fontSize: 18,
                color: Colors.deepOrangeAccent,
              ), // 这是默认的样式，如果子 TextSpan 没有指定样式，就会使用这个样式
            ),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

图片组件-image

image.asset(本地资源)

pubspec.yaml启用图片文件夹

将资源assets功能启用

text

123

assets:
    - images/a_dot_burr.jpeg
    - images/a_dot_ham.jpeg

这个需要一些配置

例如我们将图片放到这个images文件夹

然后在main.dart中启用资源,同时重新run执行

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.white,
          alignment: Alignment.center,
          child: Image.asset("lib/images/01.png"),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

当然也可以使用width和hight来控制图片的大小

dart
child: Image.asset("lib/images/01.png", width: 500, fit: BoxFit.contain),

fit属性

这里fit 用的是 BoxFit 这个枚举，一共有 7种，每一种控制图片如何在给定空间里缩放/裁剪

1. BoxFit.fill

text

fit: BoxFit.fill

👉 强行拉伸填满

会变形 ❗（宽高比被破坏）
很少用，除非你不在意比例

2. BoxFit.contain

text

fit: BoxFit.contain

👉 完整显示图片

不裁剪
保持比例
可能有空白（黑边）

📌 类似：图片“缩小装进盒子”

3. BoxFit.cover ⭐（最常用）

text

fit: BoxFit.cover

👉 铺满容器

保持比例
会裁剪超出的部分

📌 类似：背景图常用（推荐）

4. BoxFit.fitWidth

text

fit: BoxFit.fitWidth

👉 宽度填满

高度按比例缩放
可能上下裁剪

5. BoxFit.fitHeight

text

fit: BoxFit.fitHeight

👉 高度填满

宽度按比例缩放
可能左右裁剪

6. BoxFit.none

text

fit: BoxFit.none

👉 不缩放

原始大小显示
超出部分直接裁掉

7. BoxFit.scaleDown

text

fit: BoxFit.scaleDown

👉 只缩小，不放大

类似 contain
但如果图片本来就小，就不会放大

image.network(网络资源)

这个不需要在pubspec.yaml 直接使用就行了,把网址或者库粘贴进去

text

Image.network('https://example.com/image.png')

但是问题是,这个东西需要联网,否则图片会显示不出来, 除此之外, Android/HarmonyOS/iOS使用Image.network需要配置网络权限

而且如果图片的源头断了也不会显示出来

文本输入组件-TextField

这里我们可以写一个登录界面,使用有状态组件StatefulWidget(因为这个是动态刷新的)

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  TextEditingController _usernameController =
      TextEditingController(); // 实例化一个用户名输入控制器
  TextEditingController _passwordController =
      TextEditingController(); // 实例化一个密码输入控制器

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          padding: EdgeInsets.all(20),
          color: Colors.white,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, //界面元素垂直居中

            children: [
              TextField(
                controller: _usernameController, // 绑定用户名输入控制器
                onChanged: (value) => print("用户名输入: $value"), // 用户名输入时的回调
                onSubmitted: (value) => print("用户名提交: $value"), // 用户名提交时的回调
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(
                    left: 20,
                  ), // 输入框内容内边距,这里设置为左侧20像素
                  hintText: "请输入用户名", // 输入框提示文本
                  fillColor: const Color.fromARGB(255, 85, 242, 227), // 输入框背景颜色
                  filled: true, // 是否填充背景颜色
                  labelText: "用户名", // 输入框标签
                  border: OutlineInputBorder(
                    // 输入框边框样式,这里设置为无边框并且圆角
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(25),
                  ),
                ),
              ),
              SizedBox(height: 10), // 输入框之间的间距
              TextField(
                controller: _passwordController, // 绑定密码输入控制器
                obscureText: true, // 隐藏输入内容,适用于密码输入
                onChanged: (value) => print("密码输入: $value"), // 密码输入时的回调
                onSubmitted: (value) => print("密码提交: $value"), // 密码提交时的回调
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(
                    left: 20,
                  ), // 输入框内容内边距,这里设置为左侧20像素
                  hintText: "请输入密码", // 输入框提示文本
                  fillColor: const Color.fromARGB(255, 85, 242, 227), // 输入框背景颜色
                  filled: true, // 是否填充背景颜色
                  labelText: "密码", // 输入框标签
                  border: OutlineInputBorder(
                    // 输入框边框样式,这里设置为无边框并且圆角
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(25),
                  ),
                ),
              ),
              SizedBox(height: 10), // 输入框和按钮之间的间距
              Container(
                height: 50,
                width: double.infinity,
                decoration: BoxDecoration(
                  // 按钮的装饰,这里设置为黑色背景和圆角
                  color: Colors.black,
                  borderRadius: BorderRadius.circular(25),
                ),
                child: TextButton(
                  // 登录按钮,使用TextButton组件,并且设置按钮文本颜色为白色
                  onPressed: () {
                    print(
                      "用户名: ${_usernameController.text}, 密码: ${_passwordController.text}",
                    );
                  },
                  child: Text("登录", style: TextStyle(color: Colors.white)),
                ),
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

常用滚动组件

SingleChildScrollView

包裹个组件，让单个组件具备滚动能

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  TextEditingController _usernameController =
      TextEditingController(); // 用户名输入控制器
  TextEditingController _passwordController =
      TextEditingController(); // 密码输入控制器

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: SingleChildScrollView(
          child: Column(
            children: List.generate(100, (index) {
              return Container(
                margin: EdgeInsets.only(top: 10),
                width: double.infinity,
                color: Colors.lightBlueAccent,
                height: 100,
                child: Text(
                  "这是第${index + 1}条消息",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                alignment: Alignment.center,
              );
            }),
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

然后我们可以增加一个回到首页的按钮

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  ScrollController _scrollController = ScrollController(); //滚动控制器

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Stack(
          // 使用Stack布局，允许内容滚动
          children: [
            SingleChildScrollView(
              controller: _scrollController, //添加滚动控制器
              padding: EdgeInsets.all(20), // 添加内边距
              child: Column(
                children: List.generate(100, (index) {
                  return Container(
                    margin: EdgeInsets.only(top: 10),
                    width: double.infinity,
                    color: Colors.lightBlueAccent,
                    height: 100,
                    child: Text(
                      "这是第${index + 1}条消息",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    alignment: Alignment.center,
                  );
                }),
              ),
            ),
            Positioned(
              right: 10,
              bottom: 10,
              child: GestureDetector(
                onTap: () {
                  print("回到顶部按钮已被点击");
                  //_scrollController.jumpTo(0);
                  _scrollController.animateTo(
                    0,
                    duration: Duration(seconds: 1),
                    curve: Curves.ease,
                  );
                },
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: Colors.cyanAccent,
                  ),

                  width: 70,
                  height: 70,
                  alignment: Alignment.center,
                  child: Text(
                    "回到顶部",
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
            Positioned(
              right: 10,
              top: 10,
              child: GestureDetector(
                onTap: () {
                  print("回到底部按钮已被点击");
                  // _scrollController.jumpTo(
                  //   _scrollController.position.maxScrollExtent,
                  // );
                  _scrollController.animateTo(
                    _scrollController.position.maxScrollExtent,
                    duration: Duration(seconds: 1),
                    curve: Curves.ease,
                  );
                },
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: Colors.cyanAccent,
                  ),

                  width: 70,
                  height: 70,
                  alignment: Alignment.center,
                  child: Text(
                    "回到底部",
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),

        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

其中这里面涉及的两个方法---jumpTo和animateTo这里细说一下

jumpTo(直接跳转)

dart
_scrollController.jumpTo(0);

本质:瞬间跳转到指定滚动位置（没有动画）

参数只有一个

值	含义
`0`	顶部
`_scrollController.position.maxScrollExtent`	底部
任意数字	指定位置

特点

不会有任何过渡效果
立即生效
用户体验比较“生硬”
适合：
- 初始化位置
- 强制修正滚动位置
- 不关心动画的场景

举例

dart
_scrollController.jumpTo(
  _scrollController.position.maxScrollExtent,
);

效果就是：一点击直接“啪”一下到底，没有滚动过程

animateTo(动画平滑)

dart
animateTo(
  double offset, {
  required Duration duration,
  required Curve curve,
})

第一个参数offset(滚动位置)

值	含义
`0`	顶部
`_scrollController.position.maxScrollExtent`	底部
任意数字	指定位置

这个和jumpTo是一样的

第二个参数duration(动画时长)

text

Duration(seconds: 1)

即动画持续时间为1秒

你可以这样写：

text

Duration(milliseconds: 300)
Duration(seconds: 2)

效果：

时间越短 → 越快
时间越长 → 越慢

第三个参数curves(动画曲线)

text

Curves.bounceIn

控制动画“运动方式”（非常重要）

常见曲线：

曲线	效果
`Curves.linear`	匀速（最死板）
`Curves.ease`	平滑（推荐）
`Curves.easeIn`	先慢后快
`Curves.easeOut`	先快后慢
`Curves.easeInOut`	两头慢中间快
`Curves.bounceIn`	弹跳进入（你现在用的）
`Curves.elasticOut`	弹簧效果

ListView

children 模式

这个也是最普通的模式

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: ListView(
          children: List.generate(100, (index) {
            return Container(
              margin: EdgeInsets.only(top: 10),
              width: double.infinity,
              color: Colors.lightBlueAccent,
              height: 100,
              child: Text(
                "这是第${index + 1}条消息",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              alignment: Alignment.center,
            );
          }),
        ),

        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

builder模式

builder模式就是用来处理长列表或动态数据的首选和推荐方式

方式为接受一个itemBuilder回调函数来按需构建列表项,通过itemCount控制列表长度

特点是按需构建,不会在初始化时将所有列表项都创建,而是根据用户的滚动行为,动态的创建和销毁列表项

使用方式为ListView.builder(itemBuilder: ListView,itemCount: itemCount)

dart
itemBuilder: (context, index) {
  return Text("$index");
}

参数	意思
context	当前上下文
index	第几个

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: ListView.builder(
          itemCount: 100,//创建的数量
          itemBuilder: (BuildContext context, int index) { //在builder里必须要有itemBuilder和返回值
            return Container(
              margin: EdgeInsets.only(top: 10),
              width: double.infinity,
              color: Colors.lightBlueAccent,
              height: 100,
              child: Text(
                "这是第${index + 1}条消息",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              alignment: Alignment.center,
            );
          },
        ),

        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

separated模式

作用就是在ListView.builder的基础上,额外提供了构建分割线的能力

方式就是需要同时提供itemBuilder , separatorBuilder ,itemCount三个属性

使用方式为 ListView.separated(itemBuilder: itemBuilder, separatorBuilder: separatorBuilder, itemCount: itemCount)

三个参数分别为要构建的组件,组件之间的分割组件,和构建数量

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: ListView.separated(
          itemBuilder: (BuildContext context, int index) {
            return Container(
              margin: EdgeInsets.only(top: 10),
              width: double.infinity,
              color: Colors.lightBlueAccent,
              height: 100,
              child: Text(
                "这是第${index + 1}条消息",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              alignment: Alignment.center,
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return SizedBox(height: 5);//在每个生成的组件之间添加一个间隔,当然这里也可以用Container
          },
          itemCount: 100,
        ),

        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

GridView

GridView.count

作用: 使用GridView.count创建固定列数网络

使用方式为 GridView.count(crossAxisCount: crossAxisCount)

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: GridView.count(
          crossAxisCount: 3,
          padding: EdgeInsets.all(10.0),//边距20
          mainAxisSpacing: 10,//主轴间距
          crossAxisSpacing: 10,//交叉轴间距
          children: List.generate(100, (int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightBlueAccent,
              child: Text(
                "第${index + 1} 个Item",
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            );
          }),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

想想这个可以用来干什么? 没错! 可以制作相册!你打开你的手机相册看看是不是差不多的

还可以这么干

我们这个默认情况下是竖直向下滚动的也就是crollDirection: Axis.vertical

还可以这样实现横向滚动翻阅

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  ScrollController _scrollController = ScrollController(); //滚动控制器

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: GridView.count(
          scrollDirection: Axis.horizontal,//按住shify滚动鼠标滚轮实现横向滚动
          crossAxisCount: 3,
          padding: EdgeInsets.all(10.0),
          mainAxisSpacing: 10, //主轴间距
          crossAxisSpacing: 10, //交叉轴间距
          children: List.generate(100, (int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightBlueAccent,
              child: Text(
                "第${index + 1} 个Item",
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            );
          }),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

GridView.count以列数为优先。指定格多少列，Flutter动计算列的宽度，在空间内均匀排列

GridView.extent

这个很有意思,因为这个拖动改变窗口大小的时候,组件会自适应位置,就像模态窗口一样

依旧这个默认的是 scrollDirection: Axis.vertical模式

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: GridView.extent(
          maxCrossAxisExtent: 100, //最大交叉轴扩展
          mainAxisSpacing: 10, //主轴间距
          crossAxisSpacing: 10,
          scrollDirection: Axis.vertical,
          padding: EdgeInsets.all(10),

          children: List.generate(100, (int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightBlueAccent,
              child: Text(
                "第${index + 1} 个",
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            );
          }),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

GridView.extent通过maxCrossAxisExtent设置子项最大宽度/高度来计算横向或者纵向有多少列

GridView.builder

作用：使GridView.builder实现动态长网格-（懒加载，只渲染可见区域）

注意;接收gridDelegate布局委托,itemBuilder构造函数,itemCount构造数量

使用方式GridView.builder(gridDelegate: gridDelegate, itemBuilder: itemBuilder)

SliverGridDelegateWithFixedCrossAxisCount

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),

        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, //行数
            mainAxisSpacing: 10, //主轴间距
            crossAxisSpacing: 10, //交叉轴间距
          ),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightBlueAccent,
              child: Text(
                "第${index + 1} 个",
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            );
          },
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

SliverGridDelegateWithMaxCrossAxisExtent

同样的,刚才说了extent就是组件自适应窗口,这里也是

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  //ScrollController _scrollController = ScrollController(); //滚动控制器

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),

        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 100, //最大交叉轴扩展
            mainAxisSpacing: 10, //主轴间距
            crossAxisSpacing: 10, //交叉轴间距
          ),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightBlueAccent,
              child: Text(
                "第${index + 1} 个",
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            );
          },
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

对了,关于子组件怎么调整大小呢,可以使用这个childAspectRatio属性

你看右边的界面像不像pinterest的界面(Pinterest就是一个插画平台,上面不仅有画师分享的作品还有设计师)

CustomScrollView

CustomScrollView 的 slivers 属性只接受 Sliver 系列的组件。普通 Widget（如 Container、Column）不能直接放入，必须通过 SliverToBoxAdapter 包装转换。

普通 Widget	对应 Sliver	用途
`ListView`	`SliverList`	垂直列表
`GridView`	`SliverGrid`	网格布局
`AppBar`	`SliverAppBar`	可折叠吸顶栏
任意 Widget	`SliverToBoxAdapter`	包装单块非重复内容
自定义吸顶	`SliverPersistentHeader`	实现任意组件吸顶

通常像淘宝这样的就遵循这样的结构

dart
CustomScrollView(
  slivers: [
    SliverToBoxAdapter(...), // 轮播图
    SliverPersistentHeader(...), // 吸顶分类栏
    SliverList(...), // 列表
  ],
)

SliverToBoxAdapter轮播图的容器

作用：将普通 Widget（如 PageView 轮播图）转换为 Sliver，使其能融入 CustomScrollView 的滚动体系。

关键点：

只能包裹单个非重复内容
适合 Banner、间距、标题栏等"一次性"内容

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  //ScrollController _scrollController = ScrollController(); //滚动控制器

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),

        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: Container(
                color: Colors.tealAccent,
                alignment: Alignment.center,
                height: 260,
                child: Text(
                  "终末地AI群聊",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

SliverpersistentHeader粘性吸顶分类

作用：让任意 Widget 在滚动到顶部时吸顶固定，比 SliverAppBar 更灵活。常用于分类筛选栏、频道 Tab。

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  //ScrollController _scrollController = ScrollController(); //滚动控制器

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),

        body: CustomScrollView(
          slivers: [
              //顶部轮播图
            SliverToBoxAdapter(
              child: Container(
                color: Colors.tealAccent,
                alignment: Alignment.center,
                height: 260,
                child: Text(
                  "终末地AI群聊",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
              //粘性吸顶
            SliverPersistentHeader(delegate: _StickyCategory()),//自定义委托
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

注意,对于pinned参数:

pinned: true 表示到顶部后固定

pinned: false 表示向下滚动时会直接滑走

dart
SliverPersistentHeader(
              pinned:
                  true, //是否固定在顶部,如果设置为true则header会一直固定在顶部,直到下一个header出现时才会被替换掉,如果设置为false则header会随着滚动一起滚动,不会固定在顶部
              delegate: _StickyCategory(), //实现吸顶效果的delegate
            ),

必须自定义 SliverPersistentHeaderDelegate，核心参数：

minExtent：吸顶后的最小高度
maxExtent：展开时的最大高度
shrinkOffset：当前收缩偏移量（可用于做透明度/缩放动画）

dart
class _StickyCategory extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    // TODO: implement build
    //返回构建的widget对象
    throw UnimplementedError();
  }

  @override
  // TODO: implement maxExtent
  //最大展开高度
  double get maxExtent => throw UnimplementedError();

  @override
  // TODO: implement minExtent
  //最小折叠高度
  double get minExtent => throw UnimplementedError();

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    throw UnimplementedError();
  }
}

SliverList列表

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),

        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              //顶部内容
              child: Container(
                color: Colors.tealAccent,
                alignment: Alignment.center,
                height: 260,
                child: Text(
                  "终末地AI群聊",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            //之间的空白区域也需要用Sliver来实现,这里我们用一个SizedBox来占位,设置高度为10.
            SliverToBoxAdapter(child: SizedBox(height: 10.0)),
              
            SliverPersistentHeader(
              delegate: _StickyCategory(), //实现吸顶效果的delegate
            ),
              
            SliverToBoxAdapter(child: SizedBox(height: 10.0)),
              
            SliverList.separated(
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 100,
                  color: Colors.blueGrey,
                  alignment: Alignment.center,
                  child: Text(
                    "聊天消息 ${index + 1}",
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                );
              },
              separatorBuilder: (BuildContext content, int index) {
                return SizedBox(height: 20.0);
              },
            ),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

//这里必须要继承SliverPersistentHeaderDelegate来实现吸顶效果,
//并且需要重写build方法来构建header的内容,重写maxExtent和minExtent来设置header的最大和最小高度,
//以及重写shouldRebuild来决定是否需要重新构建header,一般为false以提高性能,因为header内容通常不需要根据滚动状态改变
class _StickyCategory extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    // TODO: implement build
    return Container(
      color: Colors.white, //分类背景颜色
      child: ListView.builder(
        itemCount: 30, //分类数量
        scrollDirection: Axis.horizontal, //水平滚动
        //itemBuilder的两个参数分别是上下文和索引,这里我们根据索引来构建每个分类的内容,比如显示分类名称等
        //用(){}回调函数的方式来构建每个分类的内容,这里我们简单地用一个Container来显示分类名称,并设置背景颜色和文本样式等
        itemBuilder: (BuildContext context, int index) {
          return Container(
            width: 100, //每个分类的宽度
            margin: EdgeInsets.symmetric(horizontal: 10.0), //每个分类之间的间距
            alignment: Alignment.center, //内容居中
            color: Colors.purple, //分类块颜色
            child: Text(
              "分类 ${index + 1}",
              style: TextStyle(color: Colors.white),
            ),
          );
        },
      ),
    );
  }

  @override
  // TODO: implement maxExtent
  //最大展开高度
  double get maxExtent => 80;

  @override
  // TODO: implement minExtent
  //最小折叠高度
  double get minExtent => 60;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    //这里shouldRebuild代表是否需要重新构建,如果返回true则每次滚动都会调用build方法重新构建header,如果返回false则只会在第一次构建时调用build方法,之后滚动时不会调用build方法
    //所以如果header内容不需要根据滚动状态改变则可以返回false以提高性能
    return false;
  }
}

SliverGrid宫格

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),

        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              //顶部内容
              child: Container(
                color: Colors.tealAccent,
                alignment: Alignment.center,
                height: 260,
                child: Text(
                  "终末地AI群聊",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            //之间的空白区域也需要用Sliver来实现,这里我们用一个SizedBox来占位,设置高度为10.
            SliverToBoxAdapter(child: SizedBox(height: 10.0)),
            SliverPersistentHeader(
              delegate: _StickyCategory(), //实现吸顶效果的delegate
            ),
            SliverToBoxAdapter(child: SizedBox(height: 10.0)),
            SliverGrid.count(
              crossAxisCount: 2,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              children: List.generate(100, (index) {
                return Container(
                  color: Colors.blueGrey,
                  alignment: Alignment.center,
                  child: Text(
                    "聊天消息 ${index + 1}",
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                );
              }),
            ),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

//这里必须要继承SliverPersistentHeaderDelegate来实现吸顶效果,
//并且需要重写build方法来构建header的内容,重写maxExtent和minExtent来设置header的最大和最小高度,
//以及重写shouldRebuild来决定是否需要重新构建header,一般为false以提高性能,因为header内容通常不需要根据滚动状态改变
class _StickyCategory extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    // TODO: implement build
    return Container(
      color: Colors.white, //分类背景颜色
      child: ListView.builder(
        itemCount: 30, //分类数量
        scrollDirection: Axis.horizontal, //水平滚动
        //itemBuilder的两个参数分别是上下文和索引,这里我们根据索引来构建每个分类的内容,比如显示分类名称等
        //用(){}回调函数的方式来构建每个分类的内容,这里我们简单地用一个Container来显示分类名称,并设置背景颜色和文本样式等
        itemBuilder: (BuildContext context, int index) {
          return Container(
            width: 100, //每个分类的宽度
            margin: EdgeInsets.symmetric(horizontal: 10.0), //每个分类之间的间距
            alignment: Alignment.center, //内容居中
            color: Colors.purple, //分类块颜色
            child: Text(
              "分类 ${index + 1}",
              style: TextStyle(color: Colors.white),
            ),
          );
        },
      ),
    );
  }

  @override
  // TODO: implement maxExtent
  //最大展开高度
  double get maxExtent => 80;

  @override
  // TODO: implement minExtent
  //最小折叠高度
  double get minExtent => 60;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    //这里shouldRebuild代表是否需要重新构建,如果返回true则每次滚动都会调用build方法重新构建header,如果返回false则只会在第一次构建时调用build方法,之后滚动时不会调用build方法
    //所以如果header内容不需要根据滚动状态改变则可以返回false以提高性能
    return false;
  }
}

PageView

PageView 是 Flutter 中实现横向/纵向翻页滑动的核心组件，常用于轮播图、引导页、Tab 内容切换等场景

作用: 用于实现分页滚动视图的核心组件

方式: 提供多种构建方式,默认构造范式,Pageview.builder等

构造函数	适用场景
`PageView()`	页面数量固定且少
`PageView.builder()`	页面数量多或动态数据（懒加载）
`PageView.custom()`	需要完全自定义子项控制

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),

        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              //顶部内容
              child: Container(
                color: Colors.tealAccent,
                alignment: Alignment.center,
                height: 260,
                child: PageView.builder(
                  //PageView轮播图
                  itemCount: 10,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      child: Text(
                        "轮播图 ${index + 1}",
                        style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
            //之间的空白区域也需要用Sliver来实现,这里我们用一个SizedBox来占位,设置高度为10.
            SliverToBoxAdapter(child: SizedBox(height: 10.0)),
            SliverPersistentHeader(
              pinned:
                  true, //是否固定在顶部,如果设置为true则header会一直固定在顶部,直到下一个header出现时才会被替换掉,如果设置为false则header会随着滚动一起滚动,不会固定在顶部
              delegate: _StickyCategory(), //实现吸顶效果的delegate
            ),
            SliverToBoxAdapter(child: SizedBox(height: 10.0)),
            SliverGrid.count(
              crossAxisCount: 2,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              children: List.generate(100, (index) {
                return Container(
                  color: Colors.blueGrey,
                  alignment: Alignment.center,
                  child: Text(
                    "聊天消息 ${index + 1}",
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                );
              }),
            ),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

//这里必须要继承SliverPersistentHeaderDelegate来实现吸顶效果,
//并且需要重写build方法来构建header的内容,重写maxExtent和minExtent来设置header的最大和最小高度,
//以及重写shouldRebuild来决定是否需要重新构建header,一般为false以提高性能,因为header内容通常不需要根据滚动状态改变
class _StickyCategory extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    // TODO: implement build
    return Container(
      color: Colors.white, //分类背景颜色
      child: ListView.builder(
        itemCount: 30, //分类数量
        scrollDirection: Axis.horizontal, //水平滚动
        //itemBuilder的两个参数分别是上下文和索引,这里我们根据索引来构建每个分类的内容,比如显示分类名称等
        //用(){}回调函数的方式来构建每个分类的内容,这里我们简单地用一个Container来显示分类名称,并设置背景颜色和文本样式等
        itemBuilder: (BuildContext context, int index) {
          return Container(
            width: 100, //每个分类的宽度
            margin: EdgeInsets.symmetric(horizontal: 10.0), //每个分类之间的间距
            alignment: Alignment.center, //内容居中
            color: Colors.purple, //分类块颜色
            child: Text(
              "分类 ${index + 1}",
              style: TextStyle(color: Colors.white),
            ),
          );
        },
      ),
    );
  }

  @override
  // TODO: implement maxExtent
  //最大展开高度
  double get maxExtent => 80;

  @override
  // TODO: implement minExtent
  //最小折叠高度
  double get minExtent => 60;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    //这里shouldRebuild代表是否需要重新构建,如果返回true则每次滚动都会调用build方法重新构建header,如果返回false则只会在第一次构建时调用build方法,之后滚动时不会调用build方法
    //所以如果header内容不需要根据滚动状态改变则可以返回false以提高性能
    return false;
  }
}

PageView跳转控制

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  PageController _controller = PageController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),

        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              //顶部内容
              child: Stack(
                children: [
                  Container(
                    color: Colors.tealAccent,
                    alignment: Alignment.center,
                    height: 260,
                    child: PageView.builder(
                      controller: _controller,
                      //当页面切换时,会调用onPageChanged方法,这里我们用setState来更新当前索引
                      //以便小圆点能够正确显示当前页面的索引,同时也可以在其他地方根据当前索引来显示对应的内容等
                      onPageChanged: (index) {
                        setState(() {
                          _currentIndex = index;
                        });
                      },
                      //PageView轮播图
                      itemCount: 10,
                      itemBuilder: (BuildContext context, int index) {
                        return Container(
                          alignment: Alignment.center,
                          child: Text(
                            "轮播图 ${index + 1}",
                            style: TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    height: 30,
                    child: Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: List.generate(10, (index) {
                          return GestureDetector(
                            onTap: () {
                              _controller.animateToPage(
                                index,
                                duration: Duration(microseconds: 300),
                                curve: Curves.linear,
                              );
                              //点击小圆点切换轮播图,这里我们用setState来更新当前索引并调用jumpToPage方法来切换到对应的页面
                              //但是这种切换方式很生硬,我们用animateToPage方法来切换轮播图,而setState只需要更新当前索引即可
                              //因为animateToPage方法会在切换完成后自动调用setState来更新当前索引,所以我们不需要在onTap中调用setState来更新当前索引,只需要调用animateToPage方法来切换轮播图即可,这样切换效果会更平滑
                              // setState(() {
                              //   _currentIndex = index;
                              //   _controller.jumpToPage(index);
                              // });
                            },
                            child: Container(
                              margin: EdgeInsets.only(left: 10),
                              width: 10,
                              height: 10,
                              decoration: BoxDecoration(
                                color: _currentIndex == index
                                    ? Colors.red
                                    : Colors.white,
                                borderRadius: BorderRadius.circular(5),
                              ),
                            ),
                          );
                        }),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            //之间的空白区域也需要用Sliver来实现,这里我们用一个SizedBox来占位,设置高度为10.
            SliverToBoxAdapter(child: SizedBox(height: 10.0)),
            SliverPersistentHeader(
              pinned:
                  true, //是否固定在顶部,如果设置为true则header会一直固定在顶部,直到下一个header出现时才会被替换掉,如果设置为false则header会随着滚动一起滚动,不会固定在顶部
              delegate: _StickyCategory(), //实现吸顶效果的delegate
            ),
            SliverToBoxAdapter(child: SizedBox(height: 10.0)),
            SliverGrid.count(
              crossAxisCount: 2,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              children: List.generate(100, (index) {
                return Container(
                  color: Colors.blueGrey,
                  alignment: Alignment.center,
                  child: Text(
                    "聊天消息 ${index + 1}",
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                );
              }),
            ),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

//这里必须要继承SliverPersistentHeaderDelegate来实现吸顶效果,
//并且需要重写build方法来构建header的内容,重写maxExtent和minExtent来设置header的最大和最小高度,
//以及重写shouldRebuild来决定是否需要重新构建header,一般为false以提高性能,因为header内容通常不需要根据滚动状态改变
class _StickyCategory extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    // TODO: implement build
    return Container(
      color: Colors.white, //分类背景颜色
      child: ListView.builder(
        itemCount: 30, //分类数量
        scrollDirection: Axis.horizontal, //水平滚动
        //itemBuilder的两个参数分别是上下文和索引,这里我们根据索引来构建每个分类的内容,比如显示分类名称等
        //用(){}回调函数的方式来构建每个分类的内容,这里我们简单地用一个Container来显示分类名称,并设置背景颜色和文本样式等
        itemBuilder: (BuildContext context, int index) {
          return Container(
            width: 100, //每个分类的宽度
            margin: EdgeInsets.symmetric(horizontal: 10.0), //每个分类之间的间距
            alignment: Alignment.center, //内容居中
            color: Colors.purple, //分类块颜色
            child: Text(
              "分类 ${index + 1}",
              style: TextStyle(color: Colors.white),
            ),
          );
        },
      ),
    );
  }

  @override
  // TODO: implement maxExtent
  //最大展开高度
  double get maxExtent => 80;

  @override
  // TODO: implement minExtent
  //最小折叠高度
  double get minExtent => 60;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    //这里shouldRebuild代表是否需要重新构建,如果返回true则每次滚动都会调用build方法重新构建header,如果返回false则只会在第一次构建时调用build方法,之后滚动时不会调用build方法
    //所以如果header内容不需要根据滚动状态改变则可以返回false以提高性能
    return false;
  }
}

卡片层叠效果（viewportFraction）

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  late PageController _controller;
  @override
  Widget build(BuildContext context) {
    _controller = PageController(viewportFraction: 0.85);
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),

        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              //顶部内容
              child: Container(
                color: Colors.tealAccent,
                alignment: Alignment.center,
                height: 260,
                  //卡片堆叠效果
                child: PageView.builder(
                  controller: _controller,
                  itemBuilder: (context, index) {
                    return AnimatedBuilder(
                      animation: _controller,
                      builder: (context, child) {
                        double value = 1.0;
                        if (_controller.position.haveDimensions) {
                          value = (_controller.page! - index).abs();
                          value = (1 - (value * 0.3)).clamp(0.85, 1.0); // 缩放系数
                        }
                        return Transform.scale(scale: value, child: child);
                      },
                      child: Container(
                        margin: const EdgeInsets.symmetric(horizontal: 8),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(16),
                          color:
                              Colors.primaries[index % Colors.primaries.length],
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
            //之间的空白区域也需要用Sliver来实现,这里我们用一个SizedBox来占位,设置高度为10.
            SliverToBoxAdapter(child: SizedBox(height: 10.0)),
            SliverPersistentHeader(
              pinned:
                  true, //是否固定在顶部,如果设置为true则header会一直固定在顶部,直到下一个header出现时才会被替换掉,如果设置为false则header会随着滚动一起滚动,不会固定在顶部
              delegate: _StickyCategory(), //实现吸顶效果的delegate
            ),
            SliverToBoxAdapter(child: SizedBox(height: 10.0)),
            SliverGrid.count(
              crossAxisCount: 2,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              children: List.generate(100, (index) {
                return Container(
                  color: Colors.blueGrey,
                  alignment: Alignment.center,
                  child: Text(
                    "聊天消息 ${index + 1}",
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                );
              }),
            ),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 50.0,
            child: Center(child: Text("© 2026 终末地AI群聊")),
          ),
        ),
      ),
    );
  }
}

//这里必须要继承SliverPersistentHeaderDelegate来实现吸顶效果,
//并且需要重写build方法来构建header的内容,重写maxExtent和minExtent来设置header的最大和最小高度,
//以及重写shouldRebuild来决定是否需要重新构建header,一般为false以提高性能,因为header内容通常不需要根据滚动状态改变
class _StickyCategory extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    // TODO: implement build
    return Container(
      color: Colors.white, //分类背景颜色
      child: ListView.builder(
        itemCount: 30, //分类数量
        scrollDirection: Axis.horizontal, //水平滚动
        //itemBuilder的两个参数分别是上下文和索引,这里我们根据索引来构建每个分类的内容,比如显示分类名称等
        //用(){}回调函数的方式来构建每个分类的内容,这里我们简单地用一个Container来显示分类名称,并设置背景颜色和文本样式等
        itemBuilder: (BuildContext context, int index) {
          return Container(
            width: 100, //每个分类的宽度
            margin: EdgeInsets.symmetric(horizontal: 10.0), //每个分类之间的间距
            alignment: Alignment.center, //内容居中
            color: Colors.purple, //分类块颜色
            child: Text(
              "分类 ${index + 1}",
              style: TextStyle(color: Colors.white),
            ),
          );
        },
      ),
    );
  }

  @override
  // TODO: implement maxExtent
  //最大展开高度
  double get maxExtent => 80;

  @override
  // TODO: implement minExtent
  //最小折叠高度
  double get minExtent => 60;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    //这里shouldRebuild代表是否需要重新构建,如果返回true则每次滚动都会调用build方法重新构建header,如果返回false则只会在第一次构建时调用build方法,之后滚动时不会调用build方法
    //所以如果header内容不需要根据滚动状态改变则可以返回false以提高性能
    return false;
  }
}

Azure的AI-Speech服务使用

Sat, 25 Apr 2026 19:48:40 GMT

尝试使用Azure提供的ai 语音服务让airi说话

制作api

首先在Azure的搜索栏搜索Speech然后点击进入

Subscription（订阅） : 学生订阅（Azure for Students）

Resource group（资源组）: 没有就点「Create new」,随便起名，比如：airi-ai

Region（地区）: (Asia Pacific) Japan West（亚太地区）日本西

Name（名称） : 随便起，比如：airi-tts

Pricing（价格层）：Free F0（免费层）

然后点：
Review + Create → Create

然后我们打开刚才创建的airi-ai Speech service

找到keys and endpointy秘钥与端点

然后key 1和key 2随便挑一个复制

打开Airi

然后挑一个你喜欢的声音然后启用这个模块就行了

我个人觉得这几个声音很符合airi的气质

text

12345

xiaoshuang 

xiaoyi

xiaozhen

flutter---Container和Column和Row

Sat, 25 Apr 2026 14:55:58 GMT

今天来了解一些flutter的组件

Container(布局组件)

定义：Container是功能丰富的布局组件，是个多功能组合容器

尺寸控制：可通过多种方式定义大小，有明确优先级规则

优先级：明确宽高>constraints约束>父组件约束>自适应组件大小

装饰系统：通过decoration属性实现视觉效果，但和color属性互斥

布局控制：提供内外边距和对齐方式

可选变化：支持绘制时进行矩阵变换，如旋转、倾斜、平移等

例如

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(width: 200, height: 200, color: Colors.red),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

好的,我们可以看到出现了红色方块,这个是用color来填充颜色的,而我们还有一种方式就是decoration装饰器

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          transform: Matrix4.rotationZ(0.1), // 旋转,弧度并非角度
          margin: EdgeInsets.all(20), // 外边距,这个组件“外面”的间距（和父组件之间的距离）
          alignment: Alignment.center, //这个是子组件的对齐方式即文本居中
          width: 200, //宽度
          height: 200, //高度
          decoration: BoxDecoration(
            //装饰器
            color: Colors.tealAccent, //填充颜色
            borderRadius: BorderRadius.circular(45), // 圆角
            border: Border.all(color: Colors.black, width: 3), //黑色边框，宽度3
          ),
          child: Text(
            "终末地AI群聊",
            style: TextStyle(
              // 文本样式
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

Center(居中组件)

Center：将其子组件在父容器的空间内进行水平和垂直方向上的居中排列

注意事项：Center不能设置宽高，Center的最终大小取决于其父组件传递给它的约束，Center会向它的父组件申请尽可能大的空间

实现固定宽且居中的组件：Center去包裹一个具有固定宽高的子组件。Container/SizeBox

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Center(
          child: Container(
            transform: Matrix4.rotationZ(0.1), // 旋转,弧度并非角度
            margin: EdgeInsets.all(20), // 外边距,这个组件“外面”的间距（和父组件之间的距离）
            alignment: Alignment.center, //这个是子组件的对齐方式即文本居中
            width: 200, //宽度
            height: 200, //高度
            decoration: BoxDecoration(
              //装饰器
              color: Colors.tealAccent, //填充颜色
              borderRadius: BorderRadius.circular(45), // 圆角
              border: Border.all(color: Colors.black, width: 3), //黑色边框，宽度3
            ),
            child: Text(
              "终末地AI群聊",
              style: TextStyle(
                // 文本样式
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

Align(对齐组件)

作用：精确控制其子组件在父容器空间内的对齐位置

alignment(对齐方式)：子组件在父容器内的对齐方式

widthFactor(宽度因子）：Align的宽度将是子组件宽度乘以该因子

heightFactor(高度因子)：Align的高度将是子组件高度乘以该因子

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          color: Colors.black,
          child: Align(
            // 使用Align组件来控制IconButton的对齐方式
            alignment: Alignment.center, // 设置对齐方式为居中
            widthFactor:
                null, // 设置宽度因子为1，使IconButton占满父级宽度,默认是null，表示根据子组件的宽度来确定父组件的宽度
            heightFactor:
                null, // 设置高度因子为1，使IconButton占满父级高度,默认是null，表示根据子组件的高度来确定父组件的高度
            child: IconButton(
              onPressed: () {
                // 处理点击事件
              },
              icon: Icon(
                Icons.connecting_airports,
                size: 100,
                color: Colors.cyanAccent,
              ),
            ),
          ),
        ),

        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

与Center的区别：Center是Align的一个特例，继承自Align，相当于一个将alignment属性为居中的Align.Center
使用场景：当需要将个组件放置在父容器的特定角落，Align是理想选择
动态尺寸：通过widthFactor和heightFactor，可以创建出与子组件大小成比例的容器，动态布局中很有用

Padding(内边距组件)

单独设置某个或者某几个方向的边距

EdgeInsets.all

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          decoration: BoxDecoration(color: Colors.teal),
          child: Padding(
            padding: EdgeInsets.all(20),//这里all就是所有方向
            child: Container(color: Colors.cyanAccent),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

EdgeInsets.only

当然也可以指定那些

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          decoration: BoxDecoration(color: Colors.teal),
          child: Padding(
            padding: EdgeInsets.only(left: 25, right: 25),//使用only来指定对应方向的边距
            child: Container(color: Colors.cyanAccent),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

我们也可以,使用Edgelnsets.symmetric属性进行对称设置，vertical(纵向）、horizontal(横向）来直接同时改两个方向

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          decoration: BoxDecoration(color: Colors.teal),
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 50, vertical: 30),
            child: Container(color: Colors.cyanAccent),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

Column(垂直线性布局)

主轴

主轴就是垂直的放在界面中间的轴

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity, //宽度占满父组件
          height: double.infinity, //高度占满父组件
          decoration: BoxDecoration(color: Colors.tealAccent),
          child: Column(
            //mainAxisAlignment: MainAxisAlignment.spaceAround,//环绕模式
            //mainAxisAlignment: MainAxisAlignment.spaceBetween,//两头对齐
            //mainAxisAlignment: MainAxisAlignment.spaceEvenly, //均分模式
            //mainAxisAlignment: MainAxisAlignment.center,//居中模式
            //mainAxisAlignment: MainAxisAlignment.start, //从头对齐
            mainAxisAlignment: MainAxisAlignment.end, //从尾对齐
            children: [
              Container(height: 100, width: 100, color: Colors.blue),
              Container(height: 100, width: 100, color: Colors.green),
              Container(height: 100, width: 100, color: Colors.yellow),
              Container(height: 100, width: 100, color: Colors.orange),
              Container(height: 100, width: 100, color: Colors.pink),
              Container(height: 100, width: 100, color: Colors.purple),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

mainAxisAligment

这里假设column有如下的资

dart
Column(
  children: [
    Text("A"),
    Text("B"),
    Text("C"),
  ],
)

`start`

mainAxisAlignment: MainAxisAlignment.start

text

123456

A
B
C


（全部挤在上面）

`center`

mainAxisAlignment: MainAxisAlignment.center

text

1234567


A
B
C


（整体居中）

`end`

mainAxisAlignment: MainAxisAlignment.end

text

123456



A
B
C
（在底部）

`spaceBetween`

mainAxisAlignment: MainAxisAlignment.spaceBetween

text

12345678

A


B


C
（首尾贴边，中间平均分）

`spaceAround`

mainAxisAlignment: MainAxisAlignment.spaceAround

text

1234567

A

B

C

（上下都有间距）

`spaceEvenly`

mainAxisAlignment: MainAxisAlignment.spaceEvenly

text

1234567

A

B

C

（间距完全一样）

交叉轴

属性	控制方向
mainAxisAlignment	上下（主轴）
crossAxisAlignment	左右（交叉轴）

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity, //宽度占满父组件
          height: double.infinity, //高度占满父组件
          decoration: BoxDecoration(color: Colors.tealAccent),
          child: Column(
            //crossAxisAlignment: CrossAxisAlignment.center, //水平居中
            //crossAxisAlignment: CrossAxisAlignment.start, //水平靠左
            crossAxisAlignment: CrossAxisAlignment.end, //水平靠右
            children: [
              Container(height: 100, width: 100, color: Colors.blue),
              Container(height: 100, width: 100, color: Colors.green),
              Container(height: 100, width: 100, color: Colors.yellow),
              Container(height: 100, width: 100, color: Colors.orange),
              Container(
                height: 100,
                width: 100,
                color: const Color.fromARGB(255, 235, 29, 98),
              ),
              Container(height: 100, width: 100, color: Colors.purple),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

crossAxisAlignment

`start`

crossAxisAlignment: CrossAxisAlignment.start

text

1234

A
B
C
（左对齐）

`center`

crossAxisAlignment: CrossAxisAlignment.center

text

1234

   A
   B
   C
（水平居中）

`end`

crossAxisAlignment: CrossAxisAlignment.end

text

1234

        A
        B
        C
（右对齐）

`stretch`

crossAxisAlignment: CrossAxisAlignment.stretch

这个不好描述,大概就是如字面意思stretch延伸

Row(水平线性布局)

主轴

刚才我们学的都是竖直排列的,现在我们看看水平排列的吧

这个和Column几乎一模一样,连属性都可以复用

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          decoration: BoxDecoration(color: Colors.tealAccent),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center, //水平居中
            //crossAxisAlignment: CrossAxisAlignment.start, //水平靠左
            //crossAxisAlignment: CrossAxisAlignment.end, //水平靠右
            //crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(height: 50, width: 50, color: Colors.blue),
              Container(height: 50, width: 50, color: Colors.green),
              Container(height: 50, width: 50, color: Colors.yellow),
              Container(height: 50, width: 50, color: Colors.orange),
              Container(
                height: 50,
                width: 50,
                color: const Color.fromARGB(255, 235, 29, 98),
              ),
              Container(height: 50, width: 50, color: Colors.purple),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

SizedBox

当然我们也可以手动增加边距使用SizedBox

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          decoration: BoxDecoration(color: Colors.tealAccent),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center, //水平居中
            //crossAxisAlignment: CrossAxisAlignment.start, //水平靠左
            //crossAxisAlignment: CrossAxisAlignment.end, //水平靠右
            //crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(height: 50, width: 50, color: Colors.blue),
              SizedBox(width: 10), //添加水平间距
              Container(height: 50, width: 50, color: Colors.green),
              SizedBox(width: 10),
              Container(height: 50, width: 50, color: Colors.yellow),
              SizedBox(width: 10),
              Container(height: 50, width: 50, color: Colors.orange),
              SizedBox(width: 10),
              Container(
                height: 50,
                width: 50,
                color: const Color.fromARGB(255, 235, 29, 98),
              ),
              SizedBox(width: 10),
              Container(height: 50, width: 50, color: Colors.purple),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

margin

还有一种方式就是使用margin

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          decoration: BoxDecoration(color: Colors.tealAccent),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center, //水平居中
            //crossAxisAlignment: CrossAxisAlignment.start, //水平靠左
            //crossAxisAlignment: CrossAxisAlignment.end, //水平靠右
            //crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                margin: EdgeInsets.only(left: 10),
                height: 50,
                width: 50,
                color: Colors.blue,
              ),
              //SizedBox(width: 10), //添加水平间距
              Container(
                margin: EdgeInsets.only(left: 10),
                height: 50,
                width: 50,
                color: Colors.green,
              ),
              //SizedBox(width: 10),
              Container(
                margin: EdgeInsets.only(left: 10),
                height: 50,
                width: 50,
                color: Colors.yellow,
              ),
              //SizedBox(width: 10),
              Container(
                margin: EdgeInsets.only(left: 10),
                height: 50,
                width: 50,
                color: Colors.orange,
              ),
              //SizedBox(width: 10),
              Container(
                margin: EdgeInsets.only(left: 10),
                height: 50,
                width: 50,
                color: const Color.fromARGB(255, 235, 29, 98),
              ),
              //SizedBox(width: 10),
              Container(
                margin: EdgeInsets.only(left: 10),
                height: 50,
                width: 50,
                color: Colors.purple,
              ),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

交叉轴

这个和刚才的一样的

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          width: double.infinity, //宽度占满父组件
          height: double.infinity, //高度占满父组件
          decoration: BoxDecoration(color: Colors.tealAccent),
          child: Row(
            //crossAxisAlignment: CrossAxisAlignment.center, //水平居中
            //crossAxisAlignment: CrossAxisAlignment.start, //水平靠左
            crossAxisAlignment: CrossAxisAlignment.end, //水平靠右
            children: [
              Container(height: 50, width: 50, color: Colors.blue),
              Container(height: 50, width: 50, color: Colors.green),
              Container(height: 50, width: 50, color: Colors.yellow),
              Container(height: 50, width: 50, color: Colors.orange),
              Container(
                height: 50,
                width: 50,
                color: const Color.fromARGB(255, 235, 29, 98),
              ),
              Container(height: 50, width: 50, color: Colors.purple),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

使用VPS搭建VPN

Thu, 23 Apr 2026 16:59:37 GMT

购买的外国地区的VPS(也称为ESC)可以用来搭建VPN

我们首先在termius或者openssh终端连接VPS服务器

下载Xray

shell
bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh)

然后一路回车确定

选择存储数据库

我们选择sqlite 也就是1

bash
═══════════════════════════════════════════
     Database Selection                    
═══════════════════════════════════════════
  1) SQLite     (default — recommended for < 500 clients)
  2) PostgreSQL (recommended for high client counts / many nodes)
Choose [1]: 

端口初始化

text

Would you like to customize the Panel Port settings? (If not, a random port will be applied) [y/n]:

输入y 同意面板端口初始化并回车

设置端口

要求设置面板的访问端口（比如输入 2053 或者 8080，范围在 1-65535 之间，不要用 80 或 443）

text

Please set up the panel port:

输入8080并回车

SSL证书生成

text

1234567891011121314151617

═══════════════════════════════════════════    

SSL Certificate Setup (MANDATORY)   

═══════════════════════════════════════════ 

For security, SSL certificate is required for all panels. 

Let's Encrypt now supports both domains and IP addresses! 

Choose SSL certificate setup method: 

1. Let's Encrypt for Domain (90-day validity, auto-renews) 
2. Let's Encrypt for IP Address (6-day validity, auto-renews) 
3. Custom SSL Certificate (Path to existing files) 

Note: Options 1 & 2 require port 80 open. Option 3 requires manual paths. Choose an option (default 2 for IP):

直接输入回车默认选项2

SSL证书是让我们访问这个面板可以通过https,如果没有的话就是http明文很不安全

所以最简单的方法是使用系统直接为IP地址生成的证书

有的时候会失败所以我们还需要自己重新生成

IPV6相关

text

Do you have an IPv6 address to include? (leave empty to skip):

直接输入回车键默认,主要是这玩意太麻烦了不如直接用IPV4

申请证书端口

text

Port to use for ACME HTTP-01 listener (default 80):

直接输入回车默认,这个是申请安全证书用80端口

然后就完成了

此时我们需要调整几个东西

我们输入x-ui打开xray ui面板

shell
╔────────────────────────────────────────────────╗
│  3X-UI Panel Management Script                │
│  0. Exit Script                               │
│────────────────────────────────────────────────│
│  1. Install                                   │
│  2. Update                                    │
│  3. Update to Dev Channel (latest commit)     │
│  4. Update Menu                               │
│  5. Legacy Version                            │
│  6. Uninstall                                 │
│────────────────────────────────────────────────│
│  7. Reset Username & Password                 │
│  8. Reset Web Base Path                       │
│  9. Reset Settings                            │
│  10. Change Port                              │
│  11. View Current Settings                    │
│────────────────────────────────────────────────│
│  12. Start                                    │
│  13. Stop                                     │
│  14. Restart                                  │
|  15. Restart Xray                             │
│  16. Check Status                             │
│  17. Logs Management                          │
│────────────────────────────────────────────────│
│  18. Enable Autostart                         │
│  19. Disable Autostart                        │
│────────────────────────────────────────────────│
│  20. SSL Certificate Management               │
│  21. Cloudflare SSL Certificate               │
│  22. IP Limit Management                      │
│  23. Firewall Management                      │
│  24. SSH Port Forwarding Management           │
│  25. PostgreSQL Management                    │
│────────────────────────────────────────────────│
│  26. Enable BBR                               │
│  27. Update Geo Files                         │
│  28. Speedtest by Ookla                       │
╚────────────────────────────────────────────────╝

重置用户名和密码

这个是用于登录3x-ui面板时的用户名和密码

选择7. Reset Username & Password

然后输入自己的密码和用户名(要是忘了还可以重置)

重置Web base path

选择8. Reset Web Base Path

也就是我们生成的网址的后面的一堆字母和数字,重置后更安全一些

重置或生成SSL证书

选择20. SSL Certificate Management

shell
Please enter your selection [0-28]: 20
        1. Get SSL (Domain)
        2. Revoke & Remove
        3. Force Renew
        4. Show Existing Domains
        5. Set Cert paths for the panel
        6. Get SSL for IP Address (6-day cert, auto-renews)
        0. Back to Main Menu

选择选项6.Get SSL for IP Address (6-day cert, auto-renews)

完成后输入x-ui settings

就可以查看

shell
[INF] current panel settings as follows:
Panel is secure with SSL
hasDefaultCredential: false
port: 8080
webBasePath: /XXXXX/ 
Database: SQLite (/etc/x-ui/x-ui.db)
Access URL: https://XXXXX:8080/XXXXXX/

防火墙设置

有的不需要开,比如阿里云和腾讯云会自带防火墙,我们开了反而可能把我们自己拦在外面

shell
ufw allow 8080/tcp
ufw allow 80/tcp
ufw allow 443/tcp
ufw reload

创建节点

添加入站

首先在入站点击添加入站

选择reality加密

添加客户端

我们需要关联刚才的入站

邮箱不用管(因为我们是自用不是卖梯子...)

然后编辑客户端

基本界面关联入站

凭据选择流控模式

这里有两种流控模式

对比	xtls-rprx-vision	xtls-rprx-vision-udp443
Vision 流控优化	支持	支持
UDP 443 / QUIC	拦截，促使浏览器回退到普通HTTPS	不拦截
一般网页浏览	推荐	通常没必要特意使用
必须使用QUIC的应用	可能受影响	更适合

选择xtls-rprx-vision

减少性能开销：在符合条件的 Linux + TCP + TLS/REALITY 场景中，Xray 可以利用内核的 splice 机制转发加密数据，减少内存复制和上下文切换

可能提高吞吐量：对高流量传输有帮助，但不保证降低 ping

影响 UDP 443：标准 Vision 模式会拦截目标端口为 443 的 UDP 流量，促使浏览器回退到普通 HTTPS；部分强制使用 QUIC 的应用可能受到影响

二维码分享使用

或者点击那个复制键复制链接导入也行

协议转换

由于不同的客户端对不同的协议的支持不同,如我们Clash/Mihomo就不能直接用vless的链接和二维码

所以我们需要转换协议

在较旧的版本我们需要使用一些转换器例如sub-web-modify,但是现在这个已失效

不过新版本的3X-UI面板自带了转化器

我们需要在面板设置->订阅设置里找到Clash/Mihomo选项并启用

防火墙设置

我们需要在防火墙放行2096端口,否则其他人扫码无法使用

text

ufw allow 2096/tcp
ufw reload

对于腾讯和阿里云服务器我们需要手动添加例如在阿里云服务器防火墙控制台里添加如下端口白名单

然后我们点击刚创建的客户端

然后找到clash相关,直接扫码用即可

对于节点比较卡的解决方案

不过说实话,卡不卡很大程度取决于服务器配置和服务器厂商....

启用BBR TCP拥塞算法

检查当前 TCP 配置

执行：

bash

sysctl net.ipv4.tcp_congestion_control net.core.default_qdisc

初始输出：

bash

net.ipv4.tcp_congestion_control = cubic
net.core.default_qdisc = fq_codel

说明当前使用的是 CUBIC 拥塞控制算法,默认队列调度器为 fq_codel

检查内核是否支持 BBR

执行

bash

sysctl net.ipv4.tcp_available_congestion_control

如果输出中没有 bbr,尝试加载 BBR 模块

bash

modprobe tcp_bbr
sysctl net.ipv4.tcp_available_congestion_control

本机加载成功后，输出为：

bash

net.ipv4.tcp_available_congestion_control = reno cubic bbr

说明系统现在可以使用 BBR

如果提示找不到模块，需要进一步检查内核版本及对应模块是否已安装

配置开机自动加载 BBR

创建模块自动加载配置：

bash
cat > /etc/modules-load.d/tcp_bbr.conf <<'EOF'
tcp_bbr
EOF

这样系统启动时会尝试自动加载 tcp_bbr 模块。

启用 BBR 并持久化配置

创建 sysctl 配置文件

bash
cat > /etc/sysctl.d/99-bbr.conf <<'EOF'
net.core.default_qdisc=fq
net.ipv4.tcp_congestion_control=bbr
EOF

应用配置

bash

sysctl --system

这里设置了

net.ipv4.tcp_congestion_control=bbr：将 TCP 拥塞控制算法切换为 BBR
net.core.default_qdisc=fq：将默认队列调度器设置为 fq

配置保存在 /etc/sysctl.d/99-bbr.conf，正常情况下重启后仍会生成

验证是否启用成功

执行

bash

sysctl net.ipv4.tcp_congestion_control net.core.default_qdisc

成功后的输出

bash

net.ipv4.tcp_congestion_control = bbr
net.core.default_qdisc = fq

看到这两个结果，即表示当前配置已经生效

注意事项

modprobe tcp_bbr 负责加载模块,/etc/modules-load.d/tcp_bbr.conf 负责设置开机自动加载
/etc/sysctl.d/99-bbr.conf 用于保存并持久化内核参数
启用 BBR 可能改善部分网络环境下的 TCP 吞吐量,但不保证降低基础延迟或解决跨境线路绕路和丢包等问题

启用2G swap缓存

shell
sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

检测是否开启

bash

swapon --show

可以看到

bash

NAME      TYPE SIZE USED PRIO
/swapfile file   2G   0B   -2

AstroBot部署QQ机器人

Wed, 22 Apr 2026 14:16:54 GMT

AstroBot部署

安装

先检测Docker的版本

powershell

docker --version

然后下载一个 portainer面板

powershell

docker volume create portainer_data

powershell
docker run -d --name portainer --restart=always -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest

确认安装好了

powershell

docker ps

然后我们在浏览器中访问这个地址,IP为刚才创建的服务器的IP

text

http://<你的服务器IP>:9000

然后自己设置用户名和密码我们就会跳转到这个界面

如果你的界面出现这个

New Portainer installation Your Portainer instance timed out for security purposes. To re-enable your Portainer instance, you will need to restart Portainer. For further information, view our documentation.

需要重启一下portainer面板

powershell

docker restart portainer

我们点击这个Get Started Docker的鲸鱼图案进入这个面板

依此点击local ->Stacks->Add stack

yaml
version: '3.8'

services:
  astrbot:
    image: soulter/astrbot:latest
    container_name: astrbot
    restart: always
    security_opt:
      - no-new-privileges:true
    ports:
      - "6185:6185" # AstrBot 管理面板 (WebUI) 端口
      - "6199:6199" # （可选）OneBot v11 反向 WebSocket 端口
    environment:
      - TZ=Asia/Shanghai
    volumes:
      - ./data:/AstrBot/data
      # 如果你的宿主机是 Ubuntu，挂载以下本地时间可以保证容器内时间与宿主机一致
      - /etc/localtime:/etc/localtime:ro

等一会之后,看到这个running之后

在浏览器输入

text

http://<你的 Ubuntu 服务器 IP>:6185

然后就来到了我们熟悉的界面

配置机器人

把我之前用AI制作的插件放进去,这个可以去查Astrbot的官方文档制作,或者你也可以安装插件市场别人的

比如角色扮演和信息查询和生图

机器人的话需要去QQ的开放平台申请获得appid和secret

之后我们只需要输入这两个网址就行了

text

123

http://<你的服务器IP>:9000    //打开可视化界面

http://<你的服务器IP>:6185    //打开Astrbot

然后把机器人邀请进群即可

DigitalOcean的droplet服务器使用

Tue, 21 Apr 2026 14:16:54 GMT

本篇说明digitalocean的droplet服务器创建过程

购买VPS服务器

前提说明: 这个会送200美元的学生代金券,可惜在7月份的时候DigitalOcean退出了学生计划,可恶啊!!!

然后新建droplets(服务器)

点击Droplets

地区选择美国纽约或者新加坡(推荐),不过个人版一个地区只能创建一台

系统ubuntu 24 LTS

Droplet Plan 选择rugular计划里的4美元一个月的

自己设置一个密码用于连接

ipv6 和监控这俩也可以选择

创建成功!

然后通过ssh或者密码在termius连接服务器

当然你也可以选择这个带Docker的8美元的

这个服务器最大的优点就是几乎不卡顿,而且安全防护高,非常适合作为VPN服务器

测试服务器质量

可以去ping.pe和tcptest

注意事项

这个并不是一次性付费了,而且必须绑定支付方式才能购买服务器

其次就是这个月收费+按量收费,只有服务器开着就收钱,并不是一次性年购或月购

Github的学生高校认证

Tue, 21 Apr 2026 13:44:18 GMT

大多数外国平台都认github的学生认证

可前往自行了解,其中包括如下平台:

Termius

Github Copilot Pro

namecheap

Name.com

Azure

Jetbrains

Zed

lambdatest

Imgbot

MongoDB

还有更多没听说过的平台

阿里云天工开物

Mon, 20 Apr 2026 21:10:34 GMT

学生可以在天工开物领300块的劵

点击前往阿里百炼

然后领劵,领完在这里看

使用支付宝的学生认证后,我们可以去模型广场

然后挑一些好用的模型(其实也就glm和deepseek我看得上)

然后自己创建一个api

调用可以用旧版DashScope 共享域名

text

12345

https://dashscope.aliyuncs.com/compatible-mode/v1

或者

https://dashscope-intl.aliyuncs.com/compatible-mode/v1

或者新版的Workspace ID（业务空间 ID）业务空间专属域名

text

https://{WorkspaceId}.{region}.maas.aliyuncs.com/compatible-mode/v1

然后我们无论是用ai还是开服务器都会从这个劵中扣

flutter---基础组件和自定义组件

Mon, 20 Apr 2026 12:55:04 GMT

今天来学习flutter的几个基本组件

基础组件

Scaffold组件

dart
import 'package:flutter/material.dart'; //导入Material包

void main() {
  runApp(
    MaterialApp(
      title: "终末地AI群聊",
      theme: ThemeData(scaffoldBackgroundColor: Colors.lightBlueAccent),
      home: Scaffold(),
    ),
  );
}

上一篇我们学到的这个里有个Scaffold组件

这里我们

dart
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        //头部
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
	   //中部
        body: Container(child: Center(child: Text("终末地AI群聊"))),
		//底部
        bottomNavigationBar: Container(
          height: 80.0,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    ),
  );
}

MaterialApp包裹整个应用形成统一的Material Design风格

Scoffold组件可快速搭建页面骨架，如appBar、body、bottomNavigationBar等

Container用来作为容器，设置高度(height)，child用来存放子组件

Text是用来显示文本的组件

自定义组件(Customwidget)

其实

StatelessWidget = 静态组件（数据显示后自己不会变）
StatefulWidget = 动态组件（数据变了，界面会跟着变）

无状态组件(StatelessWidget)

创建一个新的类,继承StatelessWidget类并实现build方法

build返回一个Widget

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

//无状态组件
class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(child: Center(child: Text("终末地AI群聊"))),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

dart
class Chatpage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

我们把这个拆开来看

class Chatpage extends StatelessWidget继承 StatelessWidget,即定义了一个组件 Chatpage

Widget build(BuildContext context)必须重写 build(),这个的作用是返回要显示的UI,Flutter 会在 runApp();调用这个函数画界面

而return .....;返回值是Widget类型,因为在flutter里面所有的组件都是widget类型

这里我们注意

“程序入口” = 应用从哪里开始跑 在flutter中就是runApp(这里必须是“根组件”)
“组件” = 页面里的一块积木,根组件就是MaterialApp

而所有组件必须在根组件里使用

main() → 启动
MyApp → 应用壳子
MaterialApp → App框架
Scaffold → 页面结构
Text / Button → UI组件

dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MainPage());
}

// 无状态主页面
class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: const Text("终末地AI群聊")),
        body: const Center(child: MyText(title: "终末地AI群聊")),
        bottomNavigationBar: Container(
          height: 80,
          alignment: Alignment.center,
          child: const Text("底部栏"),
        ),
      ),
    );//返回值是整个MaterialApp框架内所有东西
  }
}

// 自定义无状态组件
class MyText extends StatelessWidget {
  final String title;

  const MyText({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(title, style: const TextStyle(fontSize: 24)); //返回值是Text组件
  }
}

有状态组件(StatefulWidget)

有状态组件是构建动态交互界面的核心,能够管理变化的内部状态,当状态改变时,逐渐会更新显示内容

dart
class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    throw UnimplementedError();
  }
}

class MainPage extends StatefulWidget 继承 StatelfulWidget,即定义了一个组件 Chatpage

Widget build(BuildContext context)必须重写 build(),这个的作用是返回要显示的UI,Flutter 会在 runApp();调用这个函数画界面

而return .....;返回值是Widget类型,因为在flutter里面所有的组件都是widget类型

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(child: Center(child: Text("终末地AI群聊"))),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

快速创建无状态组件和有状态组件的方法

首先下载这仨插件

然后我们在VScode中使用statelessW 和statefulW按回车就可以快速创建

这里补充一个知识,在VScode中批量变量名或者方法名的方式有以下几种

场景推荐方法
少量变量 Ctrl + D
当前文件全部 Ctrl + Shift + L
整个项目 Ctrl + Shift + H
最安全（推荐） ⭐ F2

dart
import 'package:flutter/material.dart';

void main() {
  runApp(TestWidget());
}

class TestWidget extends StatefulWidget {
  const TestWidget({super.key});

  @override
  State<TestWidget> createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(child: Center(child: Text("终末地AI群聊"))),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

组件生命周期-无状态组件

无状态组件的生命周期只有一个阶段------build方法

这个阶段的过程是:

① 创建（构造函数）

Flutter 创建这个组件实例

dart
MyWidget({super.key});

② build（构建 UI）

dart
@override
Widget build(BuildContext context) {
  return Text("Hello");
}

唯一核心生命周期方法

当组件被创建或者父组件状态变化导致其需要重新构建时,build方法会被调用

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(child: Center(child: Text("终末地AI群聊"))),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

组件生命周期-有状态组件

有状态组件 = 可以随时间改变 UI 的组件

dart
class MyWidget extends StatefulWidget

生命周期过程如下:创建 → initState → build →（多次 setState → build）→ dispose

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  //创建阶段 createState方法会被调用一次，创建一个状态对象
  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  //初始化阶段 initState方法会被调用一次，进行一些初始化操作
  @override
  void initState() {
    super.initState();
  }

  //依赖变化阶段 didChangeDependencies方法会被调用一次，进行一些依赖变化的操作
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  //构建阶段 build方法会被调用多次，进行构建UI的操作
  @override
  Widget build(BuildContext context) {
    return Container();
  }

  //更新阶段 didUpdateWidget方法会被调用多次，进行一些更新操作
  @override
  void didUpdateWidget(covariant MainPage oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  //停用阶段 deactivate方法会被调用一次，进行一些停用操作
  @override
  void deactivate() {
    super.deactivate();
  }

  //销毁阶段 dispose方法会被调用一次，进行一些销毁操作
  @override
  void dispose() {
    super.dispose();
  }
}

无状态组件-build

有状态组件(创建阶段)：createState->initState->didchangeDependencies->build

有状态组件(更新阶段)：didUpdateWidget->build

有状态组件(销毁阶段)：deactivate->dispose

执行一次函数：createState、initState、dispose

Inheritedwidget：专门用于在Widget树中自顶向下高效地共享数据，顶层组件提供数据，子孙节点直接获取

事件-点击事件GestureDetector

事件：用户与应用程序交互时触发的各种动作，比如触摸屏幕、滑动、点击等

点击事件：当点击某个元素触发的动作

常规方案：GestureDetector是Flutter中最常用、功能最丰富的手势检测组件

用法：使用GestureDetector包裹被点击的元素，传入onTap方法

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  //创建阶段 createState方法会被调用一次，创建一个状态对象
  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  //初始化阶段 initState方法会被调用一次，进行一些初始化操作
  @override
  void initState() {
    super.initState();
  }

  //依赖变化阶段 didChangeDependencies方法会被调用一次，进行一些依赖变化的操作
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  //构建阶段 build方法会被调用多次，进行构建UI的操作
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          child: Center(
            //鼠标点击事件GestureDetector
            child: GestureDetector(
              //onTap就是单击事件，onDoubleTap就是双击事件
              onTap: () {
                // 处理点击事件
                print("群聊按钮被单击");
              },
              onDoubleTap: () {
                print("群聊按钮被双击");
              },
              child: Text("点击加入群聊"),
            ),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }

  //更新阶段 didUpdateWidget方法会被调用多次，进行一些更新操作
  @override
  void didUpdateWidget(covariant MainPage oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  //停用阶段 deactivate方法会被调用一次，进行一些停用操作
  @override
  void deactivate() {
    super.deactivate();
  }

  //销毁阶段 dispose方法会被调用一次，进行一些销毁操作
  @override
  void dispose() {
    super.dispose();
  }
}

事件-组件点击事件

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  //创建阶段 createState方法会被调用一次，创建一个状态对象
  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  //初始化阶段 initState方法会被调用一次，进行一些初始化操作
  @override
  void initState() {
    super.initState();
  }

  //依赖变化阶段 didChangeDependencies方法会被调用一次，进行一些依赖变化的操作
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  //构建阶段 build方法会被调用多次，进行构建UI的操作
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Container(
          child: Center(
            //TextButton 文本按钮组件
            child: TextButton(
              onPressed: () {
                setState(() {
                  //更新状态，触发重新构建UI
                  print("按钮被点击了");
                });
              },
              child: Text("按钮"),
            ),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }

  //更新阶段 didUpdateWidget方法会被调用多次，进行一些更新操作
  @override
  void didUpdateWidget(covariant MainPage oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  //停用阶段 deactivate方法会被调用一次，进行一些停用操作
  @override
  void deactivate() {
    super.deactivate();
  }

  //销毁阶段 dispose方法会被调用一次，进行一些销毁操作
  @override
  void dispose() {
    super.dispose();
  }
}

状态更新-setState

语法：数据的变化要更新UI视图，需要执行setState方法，setState方法会造成build的重新执行。

告诉 Flutter：数据变了，请重新调用 build() 刷新界面

例如我们写一个计数器

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  // 计数器
  int count = 0;
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Center(
          //Row就是让这三个组件(即"减"+"数字"+"加"排成一条线)
          child: Row(
            children: [
              TextButton(
                onPressed: () {
                  count -= 1;
                  print(count);
                },
                child: Text("减"),
              ),
              //将count转换为字符串
              Text(count.toString()),
              //
              TextButton(
                onPressed: () {
                  count += 1;
                  print(count);
                },
                child: Text("加"),
              ),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

此时我们发现点击加减号时中间的数字不会改变,这是因为我们没有添加setState状态监测

此时我们加上serState,然后点击加或者减就会看到中间的数字发生改变

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  // 计数器
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "终末地AI群聊",
      home: Scaffold(
        appBar: AppBar(centerTitle: true, title: Text("终末地AI群聊")),
        body: Center(
          child: Row( 
            children: [
              TextButton(
                onPressed: () {
                  //此时增加状态检测
                  setState(() {
                    count -= 1;
                    print(count);
                  });
                  //也可以这么写,因为这个是异步操作,setState为让程序重新执行build方法
                  //count -= 1;
                  //print(count);
                  //setState(() {});
                  
                },
                child: Text("减"),
              ),
              Text(count.toString()),
              TextButton(
                onPressed: () {
                  //此时增加状态监测
                  setState(() {
                    count += 1;
                    print(count);
                  });
                  //也可以这么写
                  //count -= 1;
                  //print(count);
                  //setState(() {});
                },
                child: Text("加"),
              ),
            ],
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(child: Text("终末地AI群聊")),
        ),
      ),
    );
  }
}

Gemini在sandbox中的运行方法

Mon, 20 Apr 2026 10:07:55 GMT

本篇解决Gemini的登录地区限制问题和如何在Docker中配置sandbox

Gemini的CLI并不像codex那样自动分配沙箱隔离

所以需要我们自己配置

使用Gemini API登录

powershell

npm i -g @google/gemini-cli@latest

初次下载Gemini的需要登录,当然你也可以用CC switch反代其他的api

不过也可以用api

前往谷歌ai studio官网

创建api并接入cli

此时会显示no sandbox

由于Google Gemini采用 cli 和sandbox分离策略,所以我们需要自己在docker中配置

Docker中配置sandbox

下载Docker以及下载docker汉化补丁(可选)

安装完毕后启动docker

先打开Gemini的CLI

powershell

gemini

先使用这个命令更新

powershell

npm install -g @google/gemini-cli@latest

看看你的Gemini的CLI的版本

powershell

gemini --version    #例如我的是0.62.0

然后再把你的API告诉终端(临时操作,终端关掉仍然需要重新认证)

powershell

$env:GEMINI_API_KEY="你的key"

当然也可以写入用户变量或系统变量持久化

powershell
[Environment]::SetEnvironmentVariable("GEMINI_API_KEY", "你的key", "User")

[Environment]::SetEnvironmentVariable("GEMINI_API_KEY", "你的key", "Machine")

配置wsl到其他盘,因为后续在docker中安装的东西会默认安装在wsl会占用很多磁盘空间

在docker中安装镜像,sandbox的版本就是你的gemini的版本,自行替换,更新的话就是重新执行这个命令(注意版本号与gemini一致)

powershell
docker pull us-docker.pkg.dev/gemini-code-dev/gemini-cli/sandbox:0.62.0   #sandbox的版本就是你的gemini的版本,自行替换

然后在sandbox沙盒中启用gemini(注意,此时要打开docker,否则会报错系统找不到sandbox)

powershell
gemini --sandbox
#或者
gemini -s

此时就可以正常使用了

可能出现的问题(对于gemini 0.63.0)

如图,我们使用gemini -s选择信任工作区文件夹或者其父文件夹的时候会发现始终无法信任,会显示

Skipping project agents due to untrusted folder. To enable, ensure that the project root is trusted.

不过我们如果不使用sandbox的话,直接用gemini命令打开Gemini,此时工作区目录信任是正常的

此时我们只能选择不信任(Don't trust),结果就是工作目录里的这些文件夹里的东西不会被加载

text

123456

.gemini
GEMINI.md
MCP
Hooks
Commands
Skills

不过我们的沙盒依旧正常运行,我们可以在Gemini终端启动时新开一个终端使用 docker ps 检查Docker容器的正在运行的容器

powershell

docker ps

可以看到当前我们的sandbox运行的很正常

信不过的话可以直接让Gemini检测自己现在在什么环境下运行,只要sandbox是和我们docker上的对得上就没问题,而且docker的wsl2本质是linux,我们当前的容器相当于是在linux中运行

shell
run shell command: echo "SANDBOX=$SANDBOX"; echo "HOSTNAME=$HOSTNAME"; uname -a; pwd

可以看到

解决方法

我们可以让Gemini跳过这个信任

--skip-trust 参数用于本次 session 直接信任当前 workspace, 跳过 Folder Trust 检查

这样就不会看到这个烦人的弹窗了,然后我们试试,只要sandbox显示的是current process就没问题

powershell
gemini -s --skip-trust 

或者我们修改powershell的Profile配置文件配置一个自动转换,这样下一次我们只需要用gemini -s或者gemini --sandbox

powershell
Add-Content $PROFILE @'

# Gemini CLI: 使用 -s/--sandbox 时自动追加 --skip-trust
function gemini {
    $c = (Get-Command gemini.cmd -CommandType Application).Source
    if (($args -contains "-s" -or $args -contains "--sandbox") -and -not ($args -contains "--skip-trust")) {
        & $c @args --skip-trust
    } else {
        & $c @args
    }
}
'@
. $PROFILE

或者我们也可以打开Microsoft.PowerShell_profile.ps1自己在文件下方添加然后保存关闭文件

先找到这个文件在哪

powershell

$PROFILE

然后

powershell
# Gemini CLI: 使用 -s/--sandbox 时自动跳过文件夹信任确认
function gemini {
    $geminiCmd = (Get-Command gemini.cmd -CommandType Application -ErrorAction Stop).Source

    $useSandbox = $args -contains "-s" -or $args -contains "--sandbox"
    $hasSkipTrust = $args -contains "--skip-trust"

    if ($useSandbox -and -not $hasSkipTrust) {
        & $geminiCmd @args --skip-trust
    }
    else {
        & $geminiCmd @args
    }
}

flutter---环境配置

Sat, 18 Apr 2026 21:32:39 GMT

完成dart的学习后我们开始学习flutter

flutter其实和前端非常的像,学过前端的可能对这个理解更清晰

检测环境配置

不知道你们的flutter下载好了没有?

最好去vscode里下,因为会省掉很多麻烦的步骤,vscode会自动帮你把flutter sdk添加到path路径

然后执行如下命令检测

powershell
flutter --version
dart --version

flutter doctor -v

其中第三个命令你们一定会报错

最底下那个是因为网络问题(Google嘛,懂的都懂,国内不挂梯子肯定ping不通)

问题是Android,你们没有安装Android的SDK并配置到系统Path路径

这里我推荐你们挂梯子去下载一个Android Studio 然后在里面下载SDK

其中这几个必须下载,而且要全程外网,否则就会下载失败(实在不行你们去官网直接下载提供的SDK)

这些分别是构建工具和安卓手机虚拟机

可以看到里面有一些软件

完成后添加sdk到path路径

或者你这样在系统变量(不是Path)里添加

text

ANDROID_HOME=D:\AndroidStudio\sdk     //改成你自己的SDK路径
ANDROID_SDK_ROOT=D:\AndroidStudio\sdk    //改成你自己的SDK路径

对于这个网络问题,如果你们没有梯子的话我们可以使用flutter官方镜像源

text

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

把这两个配置到系统变量和刚才一样,然后再检查一遍就发现网络正常了

对于安卓还有一句话需要说就是首先在D盘创建这两个文件夹GradleCache和PubCache然后配置下面的环境变量,否则日后你的
C盘会越来越大

text

GRADLE_USER_HOME=D:\GradleCache
PUB_CACHE=D:\PubCache

然后安装Pub依赖

text

flutter pub get

至于这里面的proxy什么的是因为我挂了梯子代理,注意如果你挂了代理也会影响localhost本地服务器,

一定要在系统变量里设置NO_PROXY 来屏蔽本地服务器否则根本打不开浏览器网页或者浏览器只会显示白屏什么都没有

text

NO_PROXY=localhost,127.0.0.1,::1

还有就是用完梯子之后要把这个HTTP_PROXY和HTTPS_PROXY从系统变量中删除,否则电脑所有流量都会经过梯子,而下一次如果忘记打开梯子时就会发现电脑连不上网

现在已经没有问题了!

OK,环境配置完了,接下来就是创建工程了

创建Flutter工程

首先新建一个文件夹,在这个文件夹里打开终端

这里我们有很多命令

全平台创建

text

12345

flutter create my_app

或者

flutter create --platforms=android,ios,web,windows,macos,linux my_app

单平台创建

我们可以先查看我们有什么设备

text

flutter devices

Android

ios的我不清楚,不过Android的需要手机打开开发者模式用USB和电脑连接,而且要在电脑上获取手机的一堆调试权限

text

flutter create --platforms=android my_app

Web

web端就是一般Chrome和Edge,flutter会创建一个空白的chrome和edge窗口(没有登录信息和插件,什么都没有),将app的环境和电脑上的浏览器隔离来避免电脑插件的影响

text

flutter create --platforms=web my_app

Windows

text

flutter create --platforms=windows my_app

空模板

text

flutter create --empty my_app

依此类推macos ios 和 linux

补平台创建

如果你原来只创建了Android但是需要Windows版本的,可以使用这个命令补创建平台后面的这个小点 “ . ” 代表代表当前项目目录

text

flutter create --platforms=windows .

或者你可以在创建之处就构建好两个平台的环境

text

flutter create --platforms=android,windows my_app

运行项目

默认设备运行

这个如果你只有Windows,就默认运行Windows,如果连接了手机,就会默认运行Android

text

flutter run

指定设备运行

但是最好指定设备运行,不容易混乱

例如

text

flutter run -d windows

text

flutter run -d android

text

flutter run -d chrome

创建本地服务器

如果你不想使用Chrome和Edge,也可以开一个本地服务器,用其他浏览器访问localhost地址就行了

text

flutter run -d web-server

全局设置

我们可以用这个列出所有flutter可用的命令

text

flutter config

当然也可以查看功能的启用与否

text

flutter config --list

然后开启和关闭功能就是

text

123456

//enable开启
flutter config --enable-web  
flutter config --enable-windows-desktop

//no-enable关闭
flutter config --no-enable-web

也可以配置jdk的路径

text

123

flutter config --jdk-dir="D:\Java学习软件\jdk\jdk-23文件"
或者
flutter config --jdk-dir D:\Java学习软件\jdk\jdk-23文件

和android 的sdk的路径

text

123

flutter config --android-sdk="D:\AndroidStudio\sdk"
或者
flutter config --android-sdk D:\AndroidStudio\sdk

如果要取消配置的话使用

text

flutter config --android-sdk ""
flutter config --jdk-dir ""

构建项目

这个就不用说了,就是打包成app

text

123456789

flutter build apk     
flutter build appbundle   //上架Google Play专用
flutter build web
flutter build windows   
flutter build linux

//这俩只能在macos上打包,因为需要苹果的签名
flutter build macos   
flutter build ios

例如我们构建apk

清除项目

text

flutter clean

注意,除此之外尤其是android,每次失败都要把build出来的以及gradle和pub缓存文件夹里的东西删的干干净净再重新开始,否则接下来不可能成功,疯狂报错(别问我怎么知道的........问就是一抚琵琶奏琴弦~)

OK,我们从Web平台开始

浏览器的话最好Chrome或者Edge

我们启用Chrome

然后它自动跳转到浏览器,第一次的时候刷新一下浏览器,就可以看到这个自带的计数器案例了

runAPP它的作用只有一个：

把你的 Flutter UI“挂载到屏幕上”

dart
void main() {
  runApp(MyApp());
}

Flutter 的核心就是：

❗ 一切都是 Widget

包括：

页面
按钮
文本
布局（Row / Column）
App 本身

概念	runApp	Widget
类型	函数	类
作用	启动 Flutter 应用	构建 UI
调用次数	一般只一次	无限次（重建）
是否参与 UI	不直接	全部 UI 都是 Widget
是否会刷新	不会	会（build 重建）

Material库

大家有没有用过Google play和Gmail,你可以发现谷歌的所有软件都是统一的UI,而这个UI名称就叫做material design 3,这里我们的flutter内置了这个库

MaterialAPP

MaterialApp = “给整个 Flutter App 套上 Android/Material 设计系统 + 路由 + 主题 + 全局配置的总控制器”

也就是说这个是应用的壳子,方便对整个应用的属性进行整体设计

常见的属性有

title: 用来展示窗口的标题内容(可以不设置)

theme:用来设置整个应用的主题

home:用来展示窗口的主题内容

dart
import 'package:flutter/material.dart'; //导入Material包

void main() {
  runApp(
    MaterialApp(
      title: "终末地AI群聊",
      theme: ThemeData(scaffoldBackgroundColor: Colors.lightBlueAccent),
      home: Scaffold(),
    ),
  );
}

dart---异步编程和Future

Sat, 18 Apr 2026 10:19:09 GMT

今天我们来学Dart中的异步编程和Future

异步编程

这里我们简单描述一下进程和线程

{% hideToggle 进程和线程 %}

进程就是正在运行中的程序,因为电脑上的软件是存在在磁盘上的,即以文件的形式存储的,也就是我们熟悉的文件夹,包括手机平板也是同样的,当我们点开一个软件时,首先这个软件会被加载到内存并获得系统资源,然后开始执行

你使用ctrl + alt +del 打开你的资源管理器就明白了(话说我后台怎么这么多程序,难道是开机自启动? 难怪每次开机这么慢)

程序运行会占用内存,每个进程之间内存隔离互不影响,比如你终止了哔哩哔哩的进程,不会影响其他软件的使用

至于线程,就是程序内部的执行路线,单个进程里有至少一个线程,以浏览器为例

Chrome（进程）

├── 线程1：渲染页面

├── 线程2：网络下载

├── 线程3：执行 JavaScript

└── 线程4：播放音频

即进程给程序分配资源,线程负责执行程序

多线程就是多个线程同时进行执行任务,效率更高,但是单线程就是排队执行任务,上一个任务执行完毕才会轮到下一个

{% endhideToggle %}

Future

正常情况下是这样的,这里用了回调函数

dart
void main(List<String> args) {
  Future f = Future(() {
    return "baka";
    throw Exception();//throw抛出异常
  });

  //then 中接收成功状态
  f.then((value) {
    print(value);
  });
  //catchError 中接收失败状态
  f.catchError((err) {
    print("出~错~了 ! zako~ zako~ zako~");
  });
}

异常情况下是这样的

dart
void main(List<String> args) {
  Future f = Future(() {
    //return "baka";
    throw Exception();//throw 抛出异常
  });

  //then 中接收成功状态
  f.then((value) {
    print(value);
  });
  //catchError 中接收失败状态
  f.catchError((err) {
    print("出~错~了 ! zako~ zako~ zako~");
  });
}

Flutter的链式调用

上一个 then 返回对象，会在下一个 then 中接收

dart
void main(List<String> args) {
  Future f = Future(() {
    return "baka_00";
    //throw Exception;
  });

  //then 中接收成功状态
  f
      .then((value) {
        return Future(() => "baka_01");
      })
      .then((value) {
        return Future(() => "$value----baka_02");
      })
      .then((value) {
        return Future(() => "$value----baka_03");
      })
      .then((value) {
        print(value);
      })
      .catchError((err) {
        print("出~错~了 ! zako~ zako~ zako~");
      });
}

dart
void main() {
  Future.value(10)
      .then((value) {
        print("第1步收到：$value");

        // 返回一个新值（会传给下一个 then）
        return value + 5;
      })
      .then((value) {
        print("第2步收到：$value");

        // 再返回一个值
        return value * 2;
      })
      .then((value) {
        print("第3步收到：$value");
      })
      .catchError((error) {
        print("发生错误：$error");
      });
}

async和await

你可以发现在函数的参数括号后面有async 指的是 asynchronous（异步),代表当前函数是异步的

关键字	作用
async	声明函数是异步
await	等待异步结果

dart
Future<String> getName() async {
  return "Tom";
}

void main() async {
  var name = await getName();
  print(name);
}

dart
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2)); //延迟两秒钟,和unity中的协程非常相似
  return "数据加载完成";
}

void main() async {
  print("开始请求");

  var data = await fetchData();

  print(data);
  print("结束");
}

这里你可以注意到一行代码 Future.delayed(Duration(seconds: 2));

这里其实完整格式是

(new) Future<String>.delayed(Duration duration, [FutureOr<String> Function()? computation])

其中第一个参数Duration duration是指延迟时间例如延迟一秒钟Duration(seconds: 1)

而第二个参数是可选的,即延迟时间之后的返回值,通常为匿名函数()=>{ return 返回值 },这里的返回值必须和泛型里规定的一致

dart
Future<String> getUser() async {
  return Future.delayed(Duration(seconds: 1), () {
    return "Tom";
  });
}

Future<String> getOrder(String user) async {
  return Future.delayed(Duration(seconds: 1), () {
    return "$user 的订单：iPhone";
  });
}

Future<String> getDetail(String order) async {
  return Future.delayed(Duration(seconds: 1), () {
    return "$order（128GB）";
  });
}

void main() async {

  print("开始请求");

  var user = await getUser();
  print("用户：$user");

  var order = await getOrder(user);
  print("订单：$order");

  var detail = await getDetail(order);
  print("详情：$detail");

  print("结束");

}

try catch

这个和C#里的很像,C#里也有try catch函数,这里 try 指的是 尝试（try block） 而catch指的是 捕获（catch exception）

dart
void main() {
  try {
    int a = 10 ~/ 0; // 整数除零，会报错

    print(a);
  } catch (e) {
    print("出错了：$e");
  }
}

在异步里就是

dart
Future<String> getData() async {
  throw Exception("网络挂了");
}

void main() async {
  try {
    var data = await getData();

    print(data);
  } catch (e) {
    print("捕获到错误：$e");
  }
}

其实和if lese的逻辑差不多,只不过这个是应对错误情况使用的

on关键字

这个其实在之前我们学mixin的时候就遇到了,不过on关键字在不同场景下的作用不太一样

在try on中

我们刚才说的try catch的catch的参数是error,也就是接受一切错误并反馈

但是这里try on 就不是了

在这里 on = 只捕获某种指定类型的异常

dart
try {
   ...
}
on 异常类型 {
   ...
}

例如刚才的这个例子返回值是 IntegerDivisionByZeroException

而我们只提取这一个问题并输出就行了

dart
void main() {
  try {
    int a = 10 ~/ 0; // 整数除零，会报错

    print(a);
  } on IntegerDivisionByZeroException {
    print("不能除0");
  }
}

甚至还能这样玩

dart
void main() {
  try {
    //List越界
    List list = [1, 2];
    print(list[5]);
  }on RangeError {
    print("越界");
  }

  try {
    // 整数除0
    int a = 10 ~/ 0;
  } on IntegerDivisionByZeroException {
    print("除零");
  }

  try {
    // 格式错误
    int.parse("abc");
  } on FormatException {
    print("格式错误");
  } 
}

在mixin中

在mixin中我们知道with关键字可以让类使用mixin里的参数和方法

而我们在mixin中使用on就是限制只有哪些类可以使用这个mixin

dart
class Animal {
  //所有的动物都会吃东西
  void eat() {
    print("动物吃东西");
  }
}

//鸟继承动物类
class Bird extends Animal {
  void layEgg() {
    print("鸟下蛋");
  }
}

//猫继承动物类
class Cat extends Animal {}

//狗继承动物类
class Dog extends Animal {}

//但是飞行和下蛋能力我只允许鸟可以
mixin Fly on Bird {
  void fly() {
    eat();

    layEgg();

    print("鸟在飞");
  }
}

//这样麻雀类继承鸟类就可以飞了
class Sparrow extends Bird with Fly {}

void main() {
  Sparrow s = Sparrow();

  s.fly();
}

dart---class和mixin和泛型

Thu, 16 Apr 2026 13:08:39 GMT

由于是面向对象语言,所以Dart同样也有class类

因为我们对类已经相当熟悉了,这里就用代码描述一下吧

类中包含对象的属性和方法(也就是定义的行为)

和C#一样,定义了类只有实例化后才能使用类(对了,dart)

dart
void main(List<String> args) {
  //类的实例,也可以写成Player p =new Player();
  //或者var p = new Player();
  //在Dart中，new关键字是可选的，可以省略不写。
  var p = Player();
  p.name = "勇者";
  p.hp = 100;

  p.attack();
}

class Player {
  String? name;
  int? hp;

  void attack() {
    print('$name 发动攻击');
  }
}

同样的,有类必定有构造函数

构造函数

构造函数就是一个特殊的方法，用于创建对象并初始化对象的属性。它的名称与类名相同，并且没有返回类型。在 Dart 中，构造函数可以有参数，也可以没有参数。

说人话就是我们在初始化类时,dart会自动加载构造函数中的参数设置

不过和C#还有Java不同的是这个Dart构造函数的重载

默认构造

这里我们先说无参的

dart
void main(List<String> args) {
  Player player = Player();
  print('玩家名字：${player.name}, 玩家血量：${player.hp}');
}

class Player {
  String? name = '';
  int? hp = 0;

  void attack() {
    print('$name 发动攻击');
  }

  //无参构造函数
  Player() {
    name = '善良米塔';
    hp = 100;
  }
}

然后是有参构造函数

dart
void main(List<String> args) {
  Player player = Player('帽子米塔', 100);
  print('玩家名字：${player.name}, 玩家血量：${player.hp}');
}

class Player {
  String? name = '';
  int? hp = 0;

  void attack() {
    print('$name 发动攻击');
  }

  //有参构造函数
  Player(String? name, int? hp) {
    this.name = name;
    this.hp = hp;
  }
}

不过以上的写法比较繁琐,因为还得考虑参数为空的情况,下面我们就用简洁的方式,不用?符号

无参

dart
void main() {
  var player = Player();
  print('玩家名字：${player.name}, 玩家血量：${player.hp}');
}

class Player {
  String name;
  int hp;

  // 无参构造（推荐写法）
  Player() : name = '善良米塔', hp = 100;

  void attack() {
    print('$name 发动攻击');
  }
}

有参

dart
void main(List<String> args) {
  Player player = Player('帽子米塔', 100);
  print('玩家名字：${player.name}, 玩家血量：${player.hp}');
}

class Player {
  String name;
  int hp;

  Player(this.name, this.hp);//语法糖,我们后面会说

  void attack() {
    print('$name 发动攻击');
  }
}

命名构造（Dart 特有，很常用）

dart
void main(List<String> args) {
  Player player = Player.NPC('帽子米塔', 100);
  print('玩家名字：${player.name}, 玩家血量：${player.hp}');
}

class Player {
  String? name = '';
  int? hp = 0;

  void attack() {
    print('$name 发动攻击');
  }

  //有参构造函数
  Player.NPC(String? name, int? hp) {
    this.name = name;
    this.hp = hp;
  }
}

然而这种写法仍然繁琐,看的鸡肋

还有三种直观的写法

①兼顾Player和Player.NPC

dart
void main(List<String> args) {
  Player npc = Player.NPC('帽子米塔', 100);
  Player player = Player('玩家1', 100);
  print('玩家名字：${player.name}, 玩家血量：${player.hp}');
  print('NPC名字：${npc.name}, NPC血量：${npc.hp}');
}

class Player {
  String name;
  int hp;

  // 主构造
  Player(this.name, this.hp);

  // 命名构造
  Player.NPC(String name, int hp) : this(name, hp);

  void attack() {
    print('$name 发动攻击');
  }
}

②语法糖写法,这个下面会讲

dart
void main(List<String> args) {
  Player npc = Player.NPC('帽子米塔', 100);
  Player player = Player('玩家1', 100);
  print('玩家名字：${player.name}, 玩家血量：${player.hp}');
  print('NPC名字：${npc.name}, NPC血量：${npc.hp}');
}

class Player {
  String name;
  int hp;

  Player(this.name, this.hp);
  Player.NPC(this.name, this.hp);

  void attack() {
    print('$name 发动攻击');
  }
}

③使用命名参数(不初始化值)

dart
void main(List<String> args) {
  Player npc = Player.NPC(name: '帽子米塔', hp: 100);
  Player player = Player(name: '玩家1', hp: 100);
  print('玩家名字：${player.name}, 玩家血量：${player.hp}');
  print('NPC名字：${npc.name}, NPC血量：${npc.hp}');
}

class Player {
  String name;
  int hp;

  Player({required this.name, required this.hp});
  Player.NPC({required this.name, required this.hp});

  void attack() {
    print('$name 发动攻击');
  }
}

④使用命名参数(初始化值)

dart
void main(List<String> args) {
  Player npc = Player.NPC();
  Player player = Player();
  print('玩家名字：${player.name}, 玩家血量：${player.hp}');
  print('NPC名字：${npc.name}, NPC血量：${npc.hp}');
}

class Player {
  String name;
  int hp;

  Player({this.name = "玩家1", this.hp = 100});
  Player.NPC({this.name = "NPC1", this.hp = 100});

  void attack() {
    print('$name 发动攻击');
  }
}

语法糖

这个上面已经演示过了,格式就是这样,用来简化代码

公有属性和私有属性

学过C#和java还有JavaScript的都知道public和private这两个东西,通常来说在这些语言中是默认属性和函数私有的,只有显式声明public才会变成公有

不过,在Dart里,默认的属性是共有的,(这点和lua很像,lua也是只有标注locla关键字才是私有)

在Dart中私有属性以下划线开头,如

我们创建三个文件

text

12345

flutter学习
├── 1111
│   └── closed.dart
├── start.dart
└── test.dart

closed.dart

dart
class Enemy {
  final String name;
  int hp;

  Enemy(this.name, this.hp);
}

start.dart

dart
import 'test.dart';
import '1111/closed.dart';

void main() {
  var p = Player('勇者', '男', 100);
  var e = Enemy('哥布林', 50);
  print('玩家：${p.name}，性别：${p._gender}，HP：${p.hp}');//这里会报错,因为_player.dart中的_gender是私有属性，无法在main.dart中访问
  print('敌人：${e.name}，HP：${e.hp}');
}

test.dart

dart
class Player {
  final String name;
  final String _gender;
  int hp;

  Player(this.name, this._gender, this.hp);
}

这里看到报错了,因为我们把gender设置为私有属性,别的文件无法访问

导入的话就是用import来导入相对路径的文件,例如

dart
import 'test.dart';
import '1111/closed.dart';
import'./1111/closed.dart';

这里我们还需要了解一个东西就是import的起别名和导入控制

起别名

这个主要是应对当不同文件存在同名类的情况

例如我们创建三个文件\

player.dart

dart
class Player {
  void info() => print('Player');
}

enemy.dart

dart
class Player {
  void info() => print('Player');
}

可以发现这两个类都叫做player,然而我们导入时编译器分不清

所以可以分别取别名使用as关键字,然后我们实例化时也要在类前面加上别名的前缀

dart
import 'player.dart' as player;
import 'enemy.dart' as enemy;

void main() {
  var p1 = player.Player();
  var p2 = enemy.Player();

  p1.info();
  p2.info();
}

导入控制

例如我们将上述的enemy.dart脚本改为

dart
class Player {
  void info() => print('Enemy Player');
}

class A {}

class B {}

class C {}

但是我们只想用Player类就必须这么写使用show关键字就可以导入单独的类

dart
import 'player.dart' as player show Player;
import 'enemy.dart' as enemy;

void main() {
  var p1 = player.Player();
  var p2 = enemy.Player();

  p1.info();
  p2.info();
}

但是假如我们不想用某个类但是其他的仍需要就可以使用hide关键字

这里我们可以修改一下enemy脚本

dart
class Player {
  void info() => print('Enemy Player');
}

class A {
  A() {
    print("我要吃提瓦特煎蛋");
  }
}

class B {
  B() {
    print("我要吃蒙德烤鱼");
  }
}

class C {
  C() {
    print("我要吃渔人吐司");
  }
}

然后我们修改我们的game脚本

dart
import 'player.dart' as player show Player;
import 'enemy.dart' as enemy;

void main() {
  var p1 = player.Player();
  var p2 = enemy.Player();

  p1.info();
  p2.info();

  var a = enemy.A();
  var b = enemy.B();
  var c = enemy.C();

  print('$a, $b, $c');
}

此时我们将enemy的导入修改为

dart
import 'enemy.dart' as enemy hide A;

继承

继承是面向对象的三大特点:继承,多态,封装之一,就是子类会获得父类的所有属性和方法,封装这个最好理解,比如函数本身就是封装,你在使用函数的时候无需在意函数内部怎么实现的,只需要学会怎么使用这个函数提供的功能即可

extends关键字

Dart 是单继承语言，也就是一个类只能继承一个父类

和C#差不多,不过和Java更像,C#中使用的是“:”来继承父类或者接口

在Dart中使用的是extends

dart
class Animal {
  void eat() {
    print("吃东西");
  }
}

class Dog extends Animal {
  void bark() {
    print("汪汪");
  }
}

void main() {
  var d = Dog();
  d.eat(); // 继承来的
  d.bark(); // 自己的
}

super关键字构造函数继承

虽然咱们说了子类可以继承父类的所有属性,但是除了构造函数不能,所以需要一个特殊的关键字super

这玩意和C#里的base很像,都是可以获得父类属性

dart
class Animal {
  String name;

  Animal(this.name);
}

class Dog extends Animal {
  Dog(String name) : super(name);
}

void main() {
  var d = Dog("旺财");
  print(d.name);
}

初次之外,super还能调用父类中的方法,来接受被子类覆盖掉的功能

dart
class Animal {
  String name;

  Animal(this.name);

  String stickOutTongue() {
    return "$name 吐舌头";
  }
}

class Dog extends Animal {
  Dog(String name) : super(name);

  @override
  String stickOutTongue() {
    print(super.stickOutTongue()); // 调用父类的方法,保留父类的功能
    return "$name 伸出舌头";
  }
}

void main() {
  var d = Dog("旺财");
  var a = Animal("动物");
  print(d.stickOutTongue());
  print(a.stickOutTongue());
}

多态

多态就是同一操作作用于不同对象可以产生不同的结果

override关键字方法重写

这个和C#很像,因为C#里也有override关键字可以让子类修改继承自父类的属性,语法是 @override

dart
class Animal {
  void sound() {
    print("动物发声");
  }
}

class Dog extends Animal {
  @override
  void sound() {
    print("汪汪");
  }
}

abstract关键字抽象类

注意抽象类不能直接实例化,这个和C#中的abstract关键字是一样的

特点

不能 new Animal()即new实例化
可以有：
- 抽象方法（必须子类实现）
- 普通方法（子类可以直接用）
- 子类必须实现所有抽象方法

dart
abstract class Animal {
  void sound(); // 没有实现
}

class Dog extends Animal {
  @override
  void sound() {
    print("汪汪");
  }
}

class Cat extends Animal {
  @override
  void sound() {
    print("喵喵");
  }
}

void main(List<String> args) {
  Animal dog = Dog();
  Animal cat = Cat();
  dog.sound();
  cat.sound();
}

implements关键字继承接口

这个不会继承父类中的实现(即只是把一个类当“接口”用),只会继承属性和方法,但是不会继承属性值和方法里的内容,需要override重写,对了,使用这个可以实现抽象类

dart
abstract class Animal {
  void sound(); // 没有实现
}

class Dog implements Animal {
  @override
  void sound() {
    print("汪汪汪");
  }
}

class Cat implements Animal {
  @override
  void sound() {
    print("喵喵喵");
  }
}

void main(List<String> args) {
  Animal dog = Dog();
  Animal cat = Cat();
  dog.sound();
  cat.sound();
}

对了还有一个叫做mixin混入,不过我们接下来会说,这个东西可以实现多继承

mixin类的混入

mixin类似godot中的组合的方式,比如把不同功能独立开来,然后需要的时候启用这个模块就行了

dart
abstract class Animal {
  void sound();
}

//mixin实现功能的复用,不需要继承关系,将功能进行分离,需要什么功能就混入什么功能
mixin Eat {
  void eat() => print("吃");
}

mixin Fly {
  void fly() => print("飞");
}

mixin Swim {
  void swim() => print("游");
}

mixin Run {
  void run() => print("跑");
}

// 继承Animal,同时混入不同的功能
class Dog extends Animal with Run, Eat {
  @override
  void sound() => print("汪汪");
}

class Chicken extends Animal with Swim, Eat {
  @override
  void sound() => print("咯咯");
}

class Duck extends Animal with Fly, Swim, Run, Eat {
  @override
  void sound() => print("嘎嘎");
}

void main() {
  var dog = Dog();
  dog.sound();
  dog.run();
  dog.eat();

  var chicken = Chicken();
  chicken.sound();
  chicken.swim();
  chicken.eat();

  var duck = Duck();
  duck.sound();
  duck.fly();
  duck.swim();
  duck.run();
  duck.eat();
}

这东西我个人觉得非常好用,至少比继承好用

不过还存在一个问题,如果不同的mixin里面存在相同名字的方法,就会发生覆盖的现象,后添加的会覆盖先添加的

例如我们如果把A,B都混合进C类,后添加的B的同名方法和属性会覆盖A的

dart
mixin A {
  void say() {
    print("A");
  }
}

mixin B {
  void say() {
    print("B");
  }
}

class C with A, B {}

void main() {
  C().say(); //B
}

所以我们尽量避免不同的mixin实现相同的功能,最好也一个mixin实现单个功能,这样既可以减少代码量,也可以避免覆盖

泛型

这个东西我们在学List时其实已经见过了

dart
List<int> numbers = [1, 2, 3];
List<String> names = ["a", "b"];

我们都知道List和C#中的List几乎一样,只不过C#强制List必须有泛型,而我们的Dart在没有加泛型的时候会默认为List< dynamic >类型

我们在实际使用的时候应该加上泛型进行参数类型限制

这里我们可以根据我们已经学过的泛型集合和泛型方法还有泛型类来讲

泛型集合(Map和List)

List我们就不说了,就说说Map吧

dart
void main(List<String> args) {
  //泛型字典
  Map<String, String> characterMap = {
    "芙卡洛斯": "水神",
    "那维莱特": "龙王",
    "娜维娅": "刺玫会长",
  };
  characterMap.forEach((key, value) {
    print("$key: $value");
  });
}

泛型方法(Function)

dart
void main(List<String> args) {
  List<String> player = ['芙宁娜', '桑多涅', '哥伦比亚'];

  print('第一个玩家是: ${getFirst(player)}');
  printType(player);
}

//泛型方法
T getFirst<T>(List<T> list) {
  return list[0];
}

void printType<T>(List<T> list) {
  for (var item in list) {
    print(item);
  }
}

dart
T echo<T>(T value) {
  return value;
}

void main() {

  print(
    echo<int>(123)
  );

  print(
    echo<String>("hello")
  );

}

泛型类(Class)

如果对于背包类的话,就是什么类型都能装

dart
class Box<T> {

  T item;

  Box(this.item);

  void show() {
    print(item);
  }

}

void main() {

  Box<int> a = Box(100);

  Box<String> b = Box("芙宁娜");

  a.show();

  b.show();

}

当然也可以用于不同类之间

如创建animal.dart

dart
abstract class Animal<N, A> {
  N name;
  A age;

  Animal(this.name, this.age);
}

mixin Fly {
  void fly() => print('Flying');
}

mixin Eat {
  void eat() => print('Eating');
}

mixin Sleep {
  void sleep() => print('Sleeping');
}

创建dog.dart

dart
import 'animal.dart';

void main() {
  Dog<String, int> dog = Dog("Buddy", 5);
  dog.eat();
  dog.sleep();
}

class Dog<N, A> extends Animal<N, A> with Eat, Sleep {
  Dog(N name, A age) : super(name, age); //这里用super使用父类的构造函数来初始化name和age属性
}

对于这个泛型我个人的理解是,除非你知道为什么用,否则就不要用,因为这个东西主要是为了让代码更健壮的,并不是必要的

场景	推荐方法
少量变量	Ctrl + D
当前文件全部	Ctrl + Shift + L
整个项目	Ctrl + Shift + H
最安全（推荐）	⭐ F2

huyangpahuo

关于vercel的缓存机制

Vercel有一套缓存机制,也就是默认保留30天内所有构建快照

解决方案

手动删除

自动删除

删除Windows开机自启动软件残留

部分软件在删除后会出现开机自启动项仍存在

删除启动项

删除注册表启动项

VScode插件制作

本篇来制作VScode插件

环境配置

选择选项

目录

可能遇到的问题

package.json文件相关参数

twikoo在vercel上部署过程

其实25年末我就部署了twikoo

前置准备

配置github存储库

方式1(推荐)

然后我们配置MongoDB数据库

方式二(通用)

npm和pnpm迁移到D盘

npm和pnpm默认是安装到C盘的,久而久之就越堆越多

检测当前的情况

npm配置

设置path变量

pnpm配置

推荐结构

设置path变量

设置

验证

Boss设计草稿

Starguardian开发日志

boss的重新构思

已有二阶段

未做二阶段

目前初步ai设计图

初版

Linux---Linux入门

本篇我们来了解Linux

常见发行版

Linux基础命令

Linux的文件系统

Docker---了解Docker

Typescript入门

今天我们来学Typescript

官方定义

安装Typescript

运行typescript代码

编译单个脚本

编译多个脚本

tsc参数

MarkDown元数据说明

文章 Frontmatter

Markdown语法样例

1. 标题

三级标题

四级标题

五级标题

六级标题

2. 段落与换行

3. 文字强调

4. 列表

无序列表

有序列表

任务列表

5. 链接

6. 图片

7. 引用块

8. 代码

行内代码

代码块

diff 高亮

9. 水平线

10. 表格

11. 脚注

12. 提示容器