SwiftUI下拉菜单按钮点击偏移/消失问题求助

问题1：点击按钮时按钮偏移到菜单中心 #

原因是TileMenuButton中的VStack默认使用水平居中对齐，当下拉菜单展开时，VStack的宽度会被最长的菜单项撑开，按钮作为子视图会自动居中到这个新宽度上，导致偏移。

修改方法：给TileMenuButton的外层VStack添加alignment: .trailing，让按钮和菜单项始终靠右对齐：

struct TileMenuButton: View {
    @State private var isVisible: Bool = false
    let options: [TileAction]
    let iconScaling: CGFloat
    
    var body: some View {
        // 设置水平对齐为.trailing，避免按钮偏移
        VStack(alignment: .trailing, spacing: 4) {
            Button(action: {
                withAnimation {
                    isVisible.toggle()
                }
            }) {
                Image(iconName)
                    .resizable()
                    .scaledToFit()
                    .frame(width: iconScaling)
            }
            .padding(2)
            .background(.white)
            
            if isVisible {
                VStack(alignment: .trailing, spacing: 8) {
                    ForEach(options.indices, id: \.self) { n in
                        Button(action: options[n].callback) {
                            Text(options[n].title)
                                .font(.caption)
                                .padding(.horizontal, 12)
                                .padding(.vertical, 6)
                        }
                    }
                }
                .background(.white)
                .cornerRadius(8)
                .shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
                .transition(.asymmetric(insertion: .scale, removal: .opacity))
            }
        }
        .fixedSize() // 固定VStack尺寸，避免被拉伸
    }
}

问题2：文本较短时按钮消失 #

原因是TileWithMenu的根HStack没有占满可用宽度，当文本较短时，HStack宽度收缩，右上角的按钮会随着HStack的边界被挤压或移出视图。

修改方法：给TileWithMenu的根HStack添加.frame(maxWidth: .infinity, alignment: .leading)，让Tile占满父视图的全部宽度，同时去掉overlay中不必要的HStack：

struct TileWithMenu: TileProtocol, View {
    let icon: String
    let text: String
    let action: TileAction?
    let hasMenuButton: Bool
    let scaler: CGFloat
    
    var body: some View{
        HStack(alignment: .top, spacing: 0) {
            Image(icon)
                .resizable()
                .scaledToFit()
                .frame(width: scaler, alignment: .leading)
                .frame(maxWidth: 30, maxHeight: 30)
                .padding(.top, 4)
                .padding(.trailing, 10)
            
            HStack(alignment: .center,spacing: 0) {
                VStack(alignment: .leading,spacing: 16) {
                    Text(text)
                        .font(.headline)
                    
                    if let action, action.alignment == .bottom {
                        VStack {
                            Button(action.title) {
                                action.callback()
                            }
                        }
                    }
                }
            }
        }
        // 让Tile占满可用宽度，固定右上角按钮位置
        .frame(maxWidth: .infinity, alignment: .leading)
        .overlay(alignment: Alignment(horizontal: .trailing, vertical: .top)) {
            if hasMenuButton {
                TileMenuButton(
                    options: [
                        TileAction(title: "Postpone for 24h", alignment: .trailing, callback: {
                            print("24h")
                        }),
                        TileAction(title: "Postpone for 1 week", alignment: .trailing, callback: {
                            print("1 week")
                        }),
                        TileAction(title: "Cancel", alignment: .trailing, callback: {
                            print("cancel")
                        })
                    ],
                    iconScaling: scaler
                )
            }
        }
    }
}

额外优化建议 #

• 给菜单添加阴影和圆角，提升视觉层次感
• 调整菜单内按钮的padding，增强可点击区域
• 修复菜单项重复的问题（原代码中两个"Postpone for 24h"，建议改为"Postpone for 1 week"）

内容的提问来源于stack exchange，提问作者Rad