生日卡:头像+姓名那一组真正居中 (#89b)
用户 2026-11-05:「看着效果不错,上面的头像和那个名字也是一样的,也往中间挪一挪。」
上一版给那个 Column 加了 `constraintSize({ maxWidth: '72%' })`,
但它里面两行 Text 都写着 `.width('100%')` ——
那是更早为了"长名字换行时占满整行"留的,副作用是把 Column 撑到上限:
Row 里 Column 的宽度 = max(内容宽, 子项 100%) = 72%(顶到上限)
⇒ Row 的 `justifyContent(Center)` 只在这 72% 的外层居中,
组内仍然左对齐、右边空掉 28% —— 正是用户说的"还偏左"。
改法:去掉两行 Text 的 `width('100%')`,让 Column 按**最长那行**收缩。
这样 Row 的 Center 才能真正把「头像 + 姓名」整组挪到中间。
⚠️ 长名字仍然能换行(`maxLines(2)` + `TextOverflow.Ellipsis`,
换行后 Column 自然变宽到内容宽度,`maxWidth: 72%` 兜着不会溢出)。
⚠️ 具体文字仍 `HorizontalAlign.Start`(左对齐)——用户要的是"块居中",
不是"每行文字居中"。
⚠️ 方框那一行不用改:它右边那个 Column 里没有 width(100%) 的子项,
本来就按内容收缩。
编译通过,已装真机。
This commit is contained in:
@@ -237,26 +237,35 @@ export struct FbDayBirthdaySheet {
|
||||
})
|
||||
|
||||
Column({ space: 4 }) {
|
||||
/* 🔴🔴 #89b(用户 2026-11-05):「上面的头像和那个名字也是一样的,
|
||||
也往中间挪一挪。」
|
||||
|
||||
**这里原来两行 Text 都写了 `.width('100%')`** ——
|
||||
那是上一版为了"长名字换行时占满整行"留的,
|
||||
但它同时会把 Column 撑着:
|
||||
Row 里 Column 的宽度 = max(内容宽, 子项 100%)
|
||||
而 `constraintSize({maxWidth:'72%'})` 只限制上限、
|
||||
不阻止它长到上限 ⇒ Column 恒为 72% 宽
|
||||
⇒ Row 的 `justifyContent(Center)` 只在这 72% 外层居中,
|
||||
组内仍然左边对齐、右边空 28% —— 正是用户说的"还偏左"。
|
||||
|
||||
⇒ 去掉两行 Text 的 `width('100%')`,让 Column 按**最长那行**
|
||||
收缩;Row 的 Center 才能真正把整组挪到中间。
|
||||
⚠️ 长名字仍然能换行(`maxLines(2)`),只是换行后
|
||||
Column 变宽到内容宽度,不会溢出 —— `maxWidth` 兜着。 */
|
||||
Text(this.nameOf())
|
||||
.fontSize(FbMetric.fontTitle)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.fontColor(FbColors.ink)
|
||||
.maxLines(2)
|
||||
.width('100%')
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
Text(this.dateLine())
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(FbColors.muted)
|
||||
.width('100%')
|
||||
.maxLines(1)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
/* 🔴 #89(用户 2026-11-05):「所有东西都集中在左边,右边太空了。
|
||||
我是想整体往右移,也就是居中,而不是把文字什么的居中放。」
|
||||
|
||||
⇒ 去掉 `layoutWeight(1)`。它会把这个 Column 撑满剩余宽度,
|
||||
于是整行内容永远贴着左边(Row 里没有多余空间可居中)。
|
||||
改成按内容宽度后,由 Row 的 `justifyContent(Center)` 把
|
||||
「头像 + 姓名」这一组整体挪到中间。
|
||||
⚠️ 具体文字仍保持左对齐(`HorizontalAlign.Start`)——
|
||||
/* ⚠️ 具体文字仍左对齐(`HorizontalAlign.Start`)——
|
||||
用户要的是"内容块居中",不是"每行文字居中"。 */
|
||||
.constraintSize({ maxWidth: '72%' })
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user