张家训
37 lines
1.8 KiB
Markdown
37 lines
1.8 KiB
Markdown
# WorkUtils UI 开发规则
|
||
|
||
## 1. CSS 优先级铁律（AtlantaFX 环境）
|
||
|
||
### 文本颜色
|
||
- **禁止**纯 CSS 设置导航栏选中文字色，AtlantaFX `.label` 会覆盖（含 `!important`）。
|
||
- **正确做法**：Java 代码中 `label.setTextFill(Color.WHITE)` 直接设置。
|
||
|
||
### 背景透明
|
||
- ListView 内部容器透明需覆盖完整链路：`.list-view`, `.viewport`, `.virtual-flow`, `.virtual-flow > *`, `.clipped-container`, `.sheet`, `.corner`。
|
||
- 同时用 Java 代码 `setStyle("-fx-background-color: transparent;")` 做 inline 兜底。
|
||
|
||
### 选中态
|
||
- **必须同时覆盖** `.list-cell:selected` 和 `.list-cell:filled:selected`。
|
||
- `.list-cell:selected` 设置透明背景兜底 → 防止虚拟化复用时空 cell 闪现蓝色。
|
||
- `.list-cell:filled:selected` 设置激活背景 → CSS 优先级更高，非空选中 cell 生效。
|
||
|
||
## 2. ListView 虚拟化陷阱
|
||
|
||
- ListView 使用 VirtualFlow，cell 会被复用。每次 `updateItem(empty=true)` 时：
|
||
- 必须清理自定义 style class（先 removeAll 再按需 add）。
|
||
- 禁止 empty 分支中直接用 `setAll()`（会误删 JavaFX 内置 `list-cell` class）。
|
||
- `selectedProperty()` listener 中调用 `updateStyleClass()` 时，要兼容 empty 状态。
|
||
|
||
## 3. 布局规则
|
||
|
||
- ListView 导航栏使用 `VBox.setVgrow(navList, Priority.ALWAYS)` 撑满剩余空间。
|
||
- **不要**在 `refreshNavItems()` 中重新设置 prefHeight/minHeight/maxHeight，会与 grow 冲突。
|
||
- 滚动条自然出现在 ListView 右侧底部，无需额外处理。
|
||
|
||
## 4. 修改验证流程
|
||
|
||
修改 UI 样式后：
|
||
1. 先检查 AtlantaFX/modena.css 是否有同名规则覆盖。
|
||
2. 优先使用 Java 端代码设置（`setStyle`/`setTextFill`），再补充 CSS。
|
||
3. 对虚拟化组件（ListView/TableView），验证 resize 窗口场景。
|