生日卡内容块整体居中 (#89)
用户 2026-11-05:「这个文案是不是居中放一放会更好一点?现在所有东西都集中在
左边,右边太空了。我是想整体往右移,也就是居中,而不是把文字什么的居中放。」
关键是要分清两种"居中":
· 用户要的 = **内容块整体居中**(头像+姓名这一组、方框+日期这一组,挪到卡片中间)
· 用户明确不要 = **文字居中**(每行文字仍左对齐,读起来才不散)
根因:两个内容 Row 里的 Column 都挂着 `layoutWeight(1)`,
它把 Column 撑满剩余宽度 ⇒ Row 里没有多余空间 ⇒ `justifyContent` 无从生效,
于是整行永远贴左。
改法:
① 去掉那两个 `layoutWeight(1)`,改用 `constraintSize({ maxWidth })`
(头像行 72%、方框行 68%)—— 按内容宽度收缩,同时防止长名字撑破卡片。
② Row 上加 `justifyContent(FlexAlign.Center)` —— 把这一组整体挪到中间。
③ 具体文字保持 `HorizontalAlign.Start`(左对齐),不变。
⚠️ 顶栏那行的 `layoutWeight(1)` **保留**:那里要"标题靠左、关闭靠右",
去掉会让标题和关闭挤在一起。
⚠️ 底部「要修改生日…」那句本来就是居中的(width 100% + textAlign Center),
与上面两个块的"块居中"是两件事,不动。
—— 已在代码里写明,免得以后有人"统一"掉。
编译通过,已装真机。
This commit is contained in:
@@ -249,11 +249,20 @@ export struct FbDayBirthdaySheet {
|
|||||||
.width('100%')
|
.width('100%')
|
||||||
}
|
}
|
||||||
.alignItems(HorizontalAlign.Start)
|
.alignItems(HorizontalAlign.Start)
|
||||||
.layoutWeight(1)
|
/* 🔴 #89(用户 2026-11-05):「所有东西都集中在左边,右边太空了。
|
||||||
.flexShrink(1)
|
我是想整体往右移,也就是居中,而不是把文字什么的居中放。」
|
||||||
|
|
||||||
|
⇒ 去掉 `layoutWeight(1)`。它会把这个 Column 撑满剩余宽度,
|
||||||
|
于是整行内容永远贴着左边(Row 里没有多余空间可居中)。
|
||||||
|
改成按内容宽度后,由 Row 的 `justifyContent(Center)` 把
|
||||||
|
「头像 + 姓名」这一组整体挪到中间。
|
||||||
|
⚠️ 具体文字仍保持左对齐(`HorizontalAlign.Start`)——
|
||||||
|
用户要的是"内容块居中",不是"每行文字居中"。 */
|
||||||
|
.constraintSize({ maxWidth: '72%' })
|
||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
.padding({ top: 4, bottom: 18 })
|
.padding({ top: 4, bottom: 18 })
|
||||||
|
.justifyContent(FlexAlign.Center)
|
||||||
.alignItems(VerticalAlign.Center)
|
.alignItems(VerticalAlign.Center)
|
||||||
|
|
||||||
/* ---- 方框(还剩几天)+ 右侧(日期 / 年龄)----
|
/* ---- 方框(还剩几天)+ 右侧(日期 / 年龄)----
|
||||||
@@ -312,10 +321,11 @@ export struct FbDayBirthdaySheet {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.alignItems(HorizontalAlign.Start)
|
.alignItems(HorizontalAlign.Start)
|
||||||
.layoutWeight(1)
|
/* #89:同头像行 —— 去掉 layoutWeight,交给 Row 居中 */
|
||||||
.flexShrink(1)
|
.constraintSize({ maxWidth: '68%' })
|
||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
|
.justifyContent(FlexAlign.Center)
|
||||||
.alignItems(VerticalAlign.Center)
|
.alignItems(VerticalAlign.Center)
|
||||||
|
|
||||||
/* ---- 底部:去成员资料改 ---- */
|
/* ---- 底部:去成员资料改 ---- */
|
||||||
@@ -323,6 +333,8 @@ export struct FbDayBirthdaySheet {
|
|||||||
想去改生日的人得知道该去哪儿,否则只会觉得"这卡不好用"。 */
|
想去改生日的人得知道该去哪儿,否则只会觉得"这卡不好用"。 */
|
||||||
/* 🔴 #87b(用户 2026-11-05):「『要修改生日,请到名册里打开这位
|
/* 🔴 #87b(用户 2026-11-05):「『要修改生日,请到名册里打开这位
|
||||||
成员的资料』这句话改成:要修改生日,请到名册里修改这位成员的资料。」 */
|
成员的资料』这句话改成:要修改生日,请到名册里修改这位成员的资料。」 */
|
||||||
|
/* #89:这条**本来就已经居中**(width 100% + textAlign Center),
|
||||||
|
与上面两个内容块的"块居中"是两件事 —— 不用动。 */
|
||||||
Text('要修改生日,请到名册里修改这位成员的资料')
|
Text('要修改生日,请到名册里修改这位成员的资料')
|
||||||
.fontSize(FbMetric.fontTiny)
|
.fontSize(FbMetric.fontTiny)
|
||||||
.fontColor(FbColors.faint)
|
.fontColor(FbColors.faint)
|
||||||
|
|||||||
Reference in New Issue
Block a user