Skip to content

fix(Cell): 建议用「value 是否为空」区分 flex,而非仅用 --alone #1005

@Duo-Huang

Description

@Duo-Huang

问题背景

PR #968.taroify-cell__valueflex: 1 改为 flex: 0 0 auto,解决了「value 为空时仍占位、导致 brief 无法撑满」的问题,但引入了新问题:当 Cell 仅包含 value(无 title)且 value 内为输入框等控件时,可输入区宽度无法撑满 100%(参见 #1004)。

Image

现有方案(PR #1004)的局限

PR #1004 的做法是:从 &__value 移除 flex,仅在 &__value--alone 上设置 flex: 1。即:

  • 无 title 时(--alone)→ value 撑满 ✓
  • 有 title 时 → value 无 flex,不撑满

潜在问题:

  1. 依赖「是否有 title」决定是否撑满,而不是「value 是否有内容」。在表单场景下,若使用 Field(label + value 并排),value 没有 --alone,输入区仍然无法撑满。
  2. fix: 🐛(Cell): 修复 taroify-cell__value 为空的时候依然占位,导致taroify-cell__brief文字无法撑满父容器;修正 List 搭配 PullRefresh 的使用示例 #968 的修复逻辑不统一:fix: 🐛(Cell): 修复 taroify-cell__value 为空的时候依然占位,导致taroify-cell__brief文字无法撑满父容器;修正 List 搭配 PullRefresh 的使用示例 #968 是按「空 value 不占位」来修的,更合理的抽象是「按 value 是否为空」区分样式,而不是按「是否 alone」。

建议方案

value 是否为空 区分 flex 行为,同时满足两种需求:

实现方式:

  1. CellValue 组件中,根据 children 是否为空增加修饰 class:taroify-cell__value--empty
  2. 样式:默认 .taroify-cell__value { flex: 1; },仅当 .taroify-cell__value--empty { flex: 0 0 auto; }

这样既保留 #968 对「空 value 不占位」的修复,又保证「有内容的 value(含 Field 表单项、仅 value 的 Cell)」都能正确撑满宽度。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions