tolyfx/toly_ui/tolyui-anchor
Claude Code and agent skill by tolyfx/toly_ui
Trust tier 3
- community
Source check pending
Checking that the SKILL.md file is still in the repository.
使用本地 tolyui_anchor 包构建或修改 Flutter 锚点导航。适用于 TolyUI 导航演示或需要 TolyAnchor、TolyAnchorScrollable、TolyAnchorController、锚点链接、滚动监听、自定义 linkBuilder 样式、长锚点列表或横向锚点标签的应用页面。
Install
npx vskill@latest install tolyfx/toly_ui/tolyui-anchorSKILL.md
TolyUI Anchor
使用此技能来添加、修复或解释由本地 tolyui_anchor 包提供的锚点导航。
组件架构
工作原理
工作流程
- 检查目标页面,确认它导入了
package:tolyui_anchor/tolyui_anchor.dart。 - 在
StatefulWidget中为每对导航/内容区域创建一个TolyAnchorController。 - 将锚点数据定义为
List<TolyAnchorLink>,其顺序必须与内容项顺序完全匹配。 - 使用
TolyAnchor(controller: ..., links: ...)渲染导航。 - 使用
TolyAnchorScrollable(controller: ..., itemCount: links.length, itemBuilder: ...)渲染内容。 - 在
dispose中释放控制器。
具体的代码模板和本地示例,请阅读 references/usage-patterns.md。
核心类型
实现规则
TolyAnchor和TolyAnchorScrollable必须共用同一个TolyAnchorController。- 在自定义
linkBuilder的点击事件中,优先使用scrollToIndex(index),因为它直接匹配列表顺序。 - 仅当功能天然基于标签驱动时才使用
scrollTo(href);href值由TolyAnchor注册。 - 保持
links.length、itemCount和内容数据长度同步。 - 使用
StatefulWidget持有控制器。不要在build内部创建控制器。 - 对于长左侧导航,向
TolyAnchor传入专用的ScrollController(keepScrollOffset: false)并在 dispose 中释放。 - 对于横向顶部标签,设置
TolyAnchor(scrollDirection: Axis.horizontal, shrinkWrap: true),通常保持TolyAnchorScrollable为竖直方向。 - 通过
linkBuilder(BuildContext context, TolyAnchorLink link, bool active)添加自定义激活样式。
适用场景
参考文档
references/usage-patterns.md- 使用模式和代码模板references/api-reference.md- API 快速参考references/troubleshooting.md- 常见问题和解决方案
验证
编辑 Flutter 代码后,运行最小范围的检查:
如果是可视化变更,还需运行应用并验证:
- 点击锚点能滚动内容到对应区域。
- 滚动内容能更新激活的锚点。
- 激活的锚点在长导航列表中保持可见。
- 横向标签不会溢出其固定高度的容器。
Security
- Security scanPassed, 95 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/tolyui-anchor/SKILL.md
Popularity
- Repository stars
- 495
- Repository forks
- 44
- 7-day trend score
- 31
Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/tolyfx/toly_ui/tolyui-anchor)