Skip to content

feat: 布局补齐——weight、border、Column / Row 的 scroll - #8

Merged
HarlonWang merged 2 commits into
mainfrom
feat/layout-props
Sep 17, 2026
Merged

HarlonWang merged 2 commits into
mainfrom
feat/layout-props

Conversation

@HarlonWang

@HarlonWang HarlonWang commented Sep 17, 2026 •

Copy link
Copy Markdown
Member

做了什么

TrendingAI 订阅页接入的框架第 2 步(共 3 步),三项都由订阅页的价格卡触发(Column(Modifier.weight(1f))、选中卡 2dp primary 边框、整页 verticalScroll)。规则见 docs/components.md §2 / §3。

  • weight(公共布局 prop,序列第 0 位):父 Row / Column 渲染 children 时按每个 child 的 prop 造 Modifier.weight 经 LocalChildModifier 交给它,child 的 modifier() 放最外层;Box / LazyColumn 等把 local 重置,所以写错位置不生效也不报错
  • borderWidth / borderColor(序列第 3.5 位,background 之后):与 cornerRadius 同一个 shape;宽 0 视为无边框——Compose 的 0.dp 是一像素 hairline,第一版就被它咬了一次(截图核对时未选中行全出了细边);色缺省 outline token
  • Column / Row 加 scroll:沿主轴滚动,加在 padding 之后(padding 固定在滚动内容外)
  • NodeScope.Children(childModifier) 新增重载,Children() 委托给它
  • roadmap D 组 weight 划掉,alignSelf 仍等需求

验证

  • compose host 21 / iOS 模拟器 19 测试全过(NodeTreeTest 加了三个 prop 的转换与 Text 不接受 scroll 的 E5);apiCheck 过
  • Pixel_9 截图:todos 行标题 weight={1} 撑满、remove 靠右;已完成行 2dp primary 边框,未完成行无边框

🤖 Generated with Claude Code

Sourcery 摘要

通过为 UI 框架添加加权子项、边框和轴向滚动功能,完善订阅页面集成所需的下一批布局能力。

新功能:

  • 为 Row 和 Column 的直接子项添加父级作用域的 weight 布局支持。
  • 添加可配置边框,支持共享的圆角形状和基于主题的默认颜色。
  • 通过新的 scroll 属性,为 Row 和 Column 添加主轴滚动功能。

增强功能:

  • 扩展子项渲染 API,以支持父级提供的修饰符,同时在非 Row 和非 Column 容器中隔离这些修饰符。

文档:

  • 记录新的布局属性、滚动行为、修饰符顺序和路线图状态。

测试:

  • 验证 weight、边框属性的解析和 schema 处理,并验证对不受支持的 scroll 属性的拒绝行为。

杂项:

  • 更新 todos 示例,以演示加权文本和条件选择边框。
Original summary in English

Sourcery 总结

完成订阅页面集成所需的下一批布局功能。

新功能:

  • 支持为 Row 和 Column 的直接子元素设置父级作用域的 weight。
  • 支持配置边框,包括共享的圆角形状和基于主题的默认颜色。
  • 通过 scroll 属性为 Row 和 Column 添加主轴滚动功能。

改进:

  • 扩展子元素渲染功能,使父容器可以提供子元素修饰符,同时让其他容器隔离这些修饰符。

文档:

  • 记录新的布局属性、修饰符排序、滚动行为和路线图状态。

测试:

  • 增加对 weight 和 border 属性转换的覆盖测试,并测试不支持的组件拒绝使用 scroll 的情况。

杂项:

  • 更新 todos 示例,以演示带权重的内容和条件选择边框。
Original summary in English

Summary by Sourcery

Complete the next layout capabilities needed for the subscription page integration.

New Features:

  • Add parent-scoped weight support for direct children of Row and Column.
  • Add configurable borders with shared corner shapes and theme-based default colors.
  • Add main-axis scrolling to Row and Column through a scroll property.

Enhancements:

  • Extend child rendering so parent containers can provide child modifiers while other containers isolate them.

Documentation:

  • Document the new layout properties, modifier ordering, scrolling behavior, and roadmap status.

Tests:

  • Add coverage for weight and border property conversion and rejection of scroll on unsupported components.

Chores:

  • Update the todos example to demonstrate weighted content and conditional selection borders.

weight 由父 Row / Column 按 child 的 prop 造 Modifier.weight 经
CompositionLocal 交给 child,放在其 modifier 最外层;其他容器重置该
local。borderWidth / borderColor 插在 background 之后、与 cornerRadius
同一个 shape,宽 0 视为无边框(Compose 的 0.dp 是一像素 hairline),
色缺省 outline token。scroll 在 padding 之外。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@HarlonWang

Copy link
Copy Markdown
Member Author

@coderabbitai review

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry @HarlonWang, you've used your own review budget of 250,000 diff characters for the last 7 days.

You can request another review in 2 days and 16 hours by commenting @sourcery-ai review. Upgrade to get a review now.

@coderabbitai

coderabbitai Bot commented Sep 17, 2026 •

Copy link
Copy Markdown

Important

  • 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: ffcc4d50-444c-4d1d-a6fe-dcf1bfd47551


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai

coderabbitai Bot commented Sep 17, 2026 •

Copy link
Copy Markdown
⚠️ Action not completed

Review rate limited.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@sourcery-ai

sourcery-ai Bot commented Sep 17, 2026

Copy link
Copy Markdown

审查者指南

本 PR 在公共布局 schema、Compose 渲染和生成代码之间同步加入 weight、边框及 Row/Column 主轴滚动:weight 通过 CompositionLocal 从父布局注入子节点最外层 Modifier,边框复用圆角 shape 且正确忽略 0dp,滚动追加在容器基础 modifier 后;同时更新文档、示例、生成 API 与测试。

父级作用域子节点 weight 渲染时序图

sequenceDiagram
    participant Column
    participant NodeScope
    participant LocalChildModifier
    participant Child

    Column->>NodeScope: Children(childModifier)
    NodeScope->>LocalChildModifier: provide Modifier.weight(weight)
    LocalChildModifier->>Child: Render(child)
    Child->>NodeScope: modifier()
    NodeScope-->>Child: weight modifier outermost
Loading

布局 Modifier 组合流程图

flowchart LR
    A["Parent-scoped weight"] --> B["Size"]
    B --> C["Clip with cornerRadius"]
    C --> D["Background"]
    D --> E["Border when borderWidth > 0"]
    E --> F["Clickable"]
    F --> G["Padding"]
Loading

文件级变更

变更 详情 文件
通过父级作用域把 weight 注入 Row/Column 直接子节点的最外层 Modifier。
  • 新增可选 weight 布局 prop,并在 Row/Column 渲染 children 时按子节点生成 Modifier.weight
  • 通过 LocalChildModifier 传递父级 modifier;Box、LazyColumn 等单子节点渲染路径重置该 local
  • 扩展 NodeScope.Children 重载,同时保留无参数调用兼容性
compose/src/commonMain/kotlin/wang/harlon/tinyui/PageHost.kt
compose/src/commonMain/kotlin/wang/harlon/tinyui/components/Builtins.kt
compose/src/commonMain/kotlin/wang/harlon/tinyui/schema/NodeScope.kt
compose/src/commonMain/kotlin/wang/harlon/tinyui/schema/ComponentSchema.kt
packages/cli/src/schema/dsl.ts
schema/components/column.ts
schema/components/row.ts
compose/src/commonMain/kotlin/wang/harlon/tinyui/components/generated/BuiltinSchemas.kt
packages/core/src/generated/components.ts
compose/api/compose.klib.api
完善公共布局的边框支持,并固定其与圆角、背景及 padding 的 Modifier 顺序。
  • 新增 borderWidth 和 borderColor schema/layout prop
  • 复用 cornerRadius shape 绘制边框,borderWidth 小于等于 0 时不绘制
  • 边框颜色缺省使用 MaterialTheme.colorScheme.outline
  • 同步更新组件文档及生成 API
compose/src/commonMain/kotlin/wang/harlon/tinyui/PageHost.kt
compose/src/commonMain/kotlin/wang/harlon/tinyui/schema/ComponentSchema.kt
packages/cli/src/schema/dsl.ts
docs/components.md
compose/api/compose.klib.api
compose/src/commonMain/kotlin/wang/harlon/tinyui/components/generated/BuiltinSchemas.kt
packages/core/src/generated/components.ts
为 Column 和 Row 增加沿主轴滚动的能力,并保持容器 padding 位于滚动 modifier 外侧。
  • 新增 scroll schema prop
  • Column 使用 verticalScroll,Row 使用 horizontalScroll
  • 将滚动 modifier 追加在 scope.modifier() 之后
compose/src/commonMain/kotlin/wang/harlon/tinyui/components/Builtins.kt
schema/components/column.ts
schema/components/row.ts
docs/components.md
将示例待办价格/任务行改为使用新增布局能力,并补充 schema 转换验证。
  • 示例行使用 weight 让标题占据剩余空间,完成状态使用 primary 2dp 边框
  • 增加 weight、borderWidth、borderColor 转换测试,并验证 Text 不接受 scroll
  • 更新 roadmap 标记 weight、border 和 Row/Column scroll 已完成
sample/js/src/pages/todos.tsx
compose/src/commonTest/kotlin/wang/harlon/tinyui/node/NodeTreeTest.kt
docs/roadmap.md

提示和命令

与 Sourcery 交互

  • 触发新的审查: 在 pull request 中评论 @sourcery-ai review。
  • 继续讨论: 直接回复 Sourcery 的审查评论。
  • 根据审查评论生成 GitHub issue: 回复审查评论,请 Sourcery 根据该评论创建 issue。你也可以回复 @sourcery-ai issue,根据该评论创建 issue。
  • 生成 pull request 标题: 在 pull request 标题的任意位置输入 @sourcery-ai,即可随时生成标题。你也可以在 pull request 中评论 @sourcery-ai title,随时(重新)生成标题。
  • 生成 pull request 摘要: 在 pull request 正文的任意位置输入 @sourcery-ai summary,即可在指定位置随时生成 PR 摘要。你也可以在 pull request 中评论 @sourcery-ai summary,随时(重新)生成摘要。
  • 生成审查者指南: 在 pull request 中评论 @sourcery-ai guide,即可随时(重新)生成审查者指南。
  • 解决所有 Sourcery 评论: 在 pull request 中评论 @sourcery-ai resolve,即可解决所有 Sourcery 评论。如果你已经处理完所有评论且不想再看到它们,这会很有用。
  • 关闭所有 Sourcery 审查: 在 pull request 中评论 @sourcery-ai dismiss,即可关闭所有现有的 Sourcery 审查。如果你想从新的审查开始,这尤其有用——别忘了评论 @sourcery-ai review 以触发新的审查!

自定义使用体验

访问你的控制面板以:

  • 启用或禁用审查功能,例如 Sourcery 生成的 pull request 摘要、审查者指南等。
  • 更改审查语言。
  • 添加、删除或编辑自定义审查指令。
  • 调整其他审查设置。

获取帮助

Original review guide in English

Reviewer's Guide

本 PR 在公共布局 schema、Compose 渲染和生成代码之间同步加入 weight、边框及 Row/Column 主轴滚动:weight 通过 CompositionLocal 从父布局注入子节点最外层 Modifier,边框复用圆角 shape 且正确忽略 0dp,滚动追加在容器基础 modifier 后;同时更新文档、示例、生成 API 与测试。

Sequence diagram for parent-scoped child weight rendering

sequenceDiagram
    participant Column
    participant NodeScope
    participant LocalChildModifier
    participant Child

    Column->>NodeScope: Children(childModifier)
    NodeScope->>LocalChildModifier: provide Modifier.weight(weight)
    LocalChildModifier->>Child: Render(child)
    Child->>NodeScope: modifier()
    NodeScope-->>Child: weight modifier outermost
Loading

Flow diagram for layout modifier composition

flowchart LR
    A["Parent-scoped weight"] --> B["Size"]
    B --> C["Clip with cornerRadius"]
    C --> D["Background"]
    D --> E["Border when borderWidth > 0"]
    E --> F["Clickable"]
    F --> G["Padding"]
Loading

File-Level Changes

Change Details Files
通过父级作用域把 weight 注入 Row/Column 直接子节点的最外层 Modifier。
  • 新增可选 weight 布局 prop,并在 Row/Column 渲染 children 时按子节点生成 Modifier.weight
  • 通过 LocalChildModifier 传递父级 modifier;Box、LazyColumn 等单子节点渲染路径重置该 local
  • 扩展 NodeScope.Children 重载,同时保留无参数调用兼容性
compose/src/commonMain/kotlin/wang/harlon/tinyui/PageHost.kt
compose/src/commonMain/kotlin/wang/harlon/tinyui/components/Builtins.kt
compose/src/commonMain/kotlin/wang/harlon/tinyui/schema/NodeScope.kt
compose/src/commonMain/kotlin/wang/harlon/tinyui/schema/ComponentSchema.kt
packages/cli/src/schema/dsl.ts
schema/components/column.ts
schema/components/row.ts
compose/src/commonMain/kotlin/wang/harlon/tinyui/components/generated/BuiltinSchemas.kt
packages/core/src/generated/components.ts
compose/api/compose.klib.api
完善公共布局的边框支持,并固定其与圆角、背景及 padding 的 Modifier 顺序。
  • 新增 borderWidth 和 borderColor schema/layout prop
  • 复用 cornerRadius shape 绘制边框,borderWidth 小于等于 0 时不绘制
  • 边框颜色缺省使用 MaterialTheme.colorScheme.outline
  • 同步更新组件文档及生成 API
compose/src/commonMain/kotlin/wang/harlon/tinyui/PageHost.kt
compose/src/commonMain/kotlin/wang/harlon/tinyui/schema/ComponentSchema.kt
packages/cli/src/schema/dsl.ts
docs/components.md
compose/api/compose.klib.api
compose/src/commonMain/kotlin/wang/harlon/tinyui/components/generated/BuiltinSchemas.kt
packages/core/src/generated/components.ts
为 Column 和 Row 增加沿主轴滚动的能力,并保持容器 padding 位于滚动 modifier 外侧。
  • 新增 scroll schema prop
  • Column 使用 verticalScroll,Row 使用 horizontalScroll
  • 将滚动 modifier 追加在 scope.modifier() 之后
compose/src/commonMain/kotlin/wang/harlon/tinyui/components/Builtins.kt
schema/components/column.ts
schema/components/row.ts
docs/components.md
将示例待办价格/任务行改为使用新增布局能力,并补充 schema 转换验证。
  • 示例行使用 weight 让标题占据剩余空间,完成状态使用 primary 2dp 边框
  • 增加 weight、borderWidth、borderColor 转换测试,并验证 Text 不接受 scroll
  • 更新 roadmap 标记 weight、border 和 Row/Column scroll 已完成
sample/js/src/pages/todos.tsx
compose/src/commonTest/kotlin/wang/harlon/tinyui/node/NodeTreeTest.kt
docs/roadmap.md

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@codeseerbot codeseerbot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CodeSeer 审查

结论:不批准(本轮 2 条严重或建议级意见)

摘要

本次改动为公共布局属性增加了 weight、边框,并为 Column/Row 增加主轴滚动;CompositionLocal 用于将父容器的 weight modifier 传递给直接子节点。边框的零宽处理和常规的 modifier 顺序基本符合描述。主要风险在于滚动容器与 weight 组合时会丢失可分配空间,以及公开的 NodeScope 接口新增了抽象方法,会破坏既有实现的兼容性。

整个 PR 至 648da17 · gpt-5.6-terra

Comment thread compose/src/commonMain/kotlin/wang/harlon/tinyui/schema/NodeScope.kt Outdated
滚动轴无界、没有剩余空间可分,weight 会被 Compose 压成 0,改为忽略;
NodeScope 新重载默认回退到 Children(),既有实现不受影响。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sourcery assessment

Approved.

@codeseerbot codeseerbot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CodeSeer 审查

结论:不批准(本轮 1 条严重或建议级意见)

摘要

本次增量在 Row/Column 开启滚动时忽略 child weight,并调整了 NodeScope.Children 的默认实现方向。滚动与 weight 的组合处理符合无界主轴下避免子项被压缩的目的。主要风险是 NodeScope 的公开接口抽象方法发生反转,破坏了已有实现的兼容性。

增量 648da17..d778c68 · gpt-5.6-terra

@HarlonWang
HarlonWang merged commit 489b6e1 into main Sep 17, 2026
4 checks passed
@HarlonWang
HarlonWang deleted the feat/layout-props branch September 17, 2026 08:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant