问题背景
PR #968 将 .taroify-cell__value 从 flex: 1 改为 flex: 0 0 auto,解决了「value 为空时仍占位、导致 brief 无法撑满」的问题,但引入了新问题:当 Cell 仅包含 value(无 title)且 value 内为输入框等控件时,可输入区宽度无法撑满 100% (参见 #1004 )。
现有方案(PR #1004 )的局限
PR #1004 的做法是:从 &__value 移除 flex,仅在 &__value--alone 上设置 flex: 1。即:
无 title 时(--alone)→ value 撑满 ✓
有 title 时 → value 无 flex,不撑满
潜在问题:
依赖「是否有 title」决定是否撑满,而不是「value 是否有内容」。在表单场景下,若使用 Field(label + value 并排),value 没有 --alone,输入区仍然无法撑满。
与 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 行为,同时满足两种需求:
实现方式:
在 CellValue 组件中,根据 children 是否为空增加修饰 class:taroify-cell__value--empty。
样式:默认 .taroify-cell__value { flex: 1; },仅当 .taroify-cell__value--empty { flex: 0 0 auto; }。
这样既保留 #968 对「空 value 不占位」的修复,又保证「有内容的 value(含 Field 表单项、仅 value 的 Cell)」都能正确撑满宽度。
问题背景
PR #968 将
.taroify-cell__value从flex: 1改为flex: 0 0 auto,解决了「value 为空时仍占位、导致 brief 无法撑满」的问题,但引入了新问题:当 Cell 仅包含 value(无 title)且 value 内为输入框等控件时,可输入区宽度无法撑满 100%(参见 #1004)。现有方案(PR #1004)的局限
PR #1004 的做法是:从
&__value移除 flex,仅在&__value--alone上设置flex: 1。即:潜在问题:
--alone,输入区仍然无法撑满。建议方案
按 value 是否为空 区分 flex 行为,同时满足两种需求:
flex: 0 0 auto,不占位,brief 可撑满(保持 fix: 🐛(Cell): 修复 taroify-cell__value 为空的时候依然占位,导致taroify-cell__brief文字无法撑满父容器;修正 List 搭配 PullRefresh 的使用示例 #968 行为)。flex: 1,撑满剩余空间(无论是否有 title),表单项/输入框可 100% 宽度。实现方式:
CellValue组件中,根据children是否为空增加修饰 class:taroify-cell__value--empty。.taroify-cell__value { flex: 1; },仅当.taroify-cell__value--empty { flex: 0 0 auto; }。这样既保留 #968 对「空 value 不占位」的修复,又保证「有内容的 value(含 Field 表单项、仅 value 的 Cell)」都能正确撑满宽度。