看来目前没有简单的方法来增大标准Menu
组件的文字大小。
作为替代方案,您可以构建自己的自定义菜单,并根据需要自由地对其进行样式设置。这样,您将对菜单的表现和行为拥有更多的控制权。然而,这也意味着任何所需的功能都需要明确地实现。
基于您的评论及在我初次回答后您提供的截图,我假设以下情况:
- 超大字体菜单仅在特定场景下使用,不需要通用化设计。
- 菜单始终位于主内容区域的顶部居中位置。
- 菜单项数量可能较多,所以可能需要滚动功能。
- 菜单项可能包含
HStack
与Spacer
组合布局。
- 菜单项具有条纹背景,因此不需要额外添加项目之间的分隔线。
针对这一特定用例,这里提供一个新的解决方案尝试:
BigMenu
结构体用于显示一组通过 ViewBuilder
闭包传递的菜单项。
- 菜单设计为在主内容上方以顶部对齐的方式以叠加层的形式展示。
- 如果高度不足以显示所有菜单项,则可以通过滚动查看。
以下是 BigMenu
结构体的 Swift 代码实现:
struct BigMenu<Content: View>: View {
@ViewBuilder let content: () -> Content
var menuBody: some View {
VStack(spacing: 0) {
content()
}
}
var body: some View {
// 使用 GeometryReader 获取可用空间的高度
GeometryReader { proxy in
let maxHeight = proxy.size.height
// 隐藏版的菜单用于计算理想高度
menuBody
.hidden()
.overlay(alignment: .top) {
// 显示版的菜单置于 ScrollView 内部
ScrollView {
menuBody
.background(.regularMaterial)
.clipShape(RoundedRectangle(cornerRadius: 13))
}
.frame(maxHeight: maxHeight)
.scrollBounceBehavior(.basedOnSize)
.shadow(color: .black.opacity(0.2), radius: 40)
}
.frame(maxWidth: .infinity)
}
.transition(
.scale(0.01, anchor: .top)
.animation(.easeOut(duration: 0.25))
)
}
}
下面是如何使用这个菜单的一个例子,展示了比原始例子更为复杂的菜单项布局:
- 主容器是一个包含页面标题和主内容
ZStack
的 VStack
。
- 菜单作为叠加层应用到
ZStack
上,出现在页面标题下方。
- 通过附加
onTapGesture
到 ZStack
来切换显示菜单的标志,这意味着点击主内容任意位置将显示菜单,而在非菜单区域点击则会再次隐藏菜单。
- 在父容器(即
VStack
)上应用了一个通用的 .onTapGesture
,强制隐藏菜单,当菜单显示时,点击页头区域也会隐藏菜单。
- 通过对单个菜单项设置
maxWidth
来限制菜单的宽度。
下面是具体使用的 Swift 代码:
struct Sample: View {
@State var selectedIndex = 0
private var names = ["hare", "tortoise", "dog", "cat", "lizard", "bird", "ant", "ladybug", "fossil.shell", "fish"]
@State private var showingMenu = false
@ViewBuilder
private var menuItems: some View {
ForEach(Array(names.enumerated()), id: \.offset) { index, name in
HStack(spacing: 20) {
Text(name)
Spacer()
Text("\(index)")
.font(.body)
.foregroundStyle(.gray)
Image(systemName: name)
.frame(maxWidth: 30)
}
.font(.system(size: 30))
.padding()
.frame(maxWidth: 300)
.background { Color(white: index % 2 == 0 ? 0.9 : 1) }
.onTapGesture {
selectedIndex = index
showingMenu = false
}
}
}
var body: some View {
VStack(spacing: 0) {
Text("页面标题")
.font(.largeTitle)
.padding()
.frame(maxWidth: .infinity)
.background(.mint)
ZStack {
HStack(spacing: 40) {
Text("\(selectedIndex)")
Text("\(names[selectedIndex])")
Image(systemName: names[selectedIndex])
}
.font(.system(size: 30))
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.contentShape(Rectangle()) // 让空白区域响应点击
.onTapGesture { showingMenu.toggle() }
// 在顶部添加叠加层展示菜单
.overlay(alignment: .top) {
if showingMenu {
BigMenu { menuItems }
}
}
}
.onTapGesture { showingMenu = false } // 点击页面其他地方隐藏菜单
}
}
附上演示动画的 GIF 图片。