如何让FloatingButton悬浮于ScrollView之上且无不透明背景？

1. 实现悬浮效果 #

要让FloatingButton在ScrollView滚动时保持悬浮，核心是用ZStack将滚动内容和悬浮按钮层叠，确保悬浮层位于内容上方：

• 把原有的NavigationView和包含FloatingButton的HStack放入同一个ZStack中
• 给悬浮的按钮容器添加边距，固定它在屏幕角落

2. 移除不透明背景 #

你的代码中重复给按钮设置了.background(Color.white)，这是导致不透明背景的核心原因，需要：

• 删除按钮内外所有多余的.background(Color.white)调用
• 若仅需按钮文本无背景，直接去掉所有按钮的背景设置

修改后的完整代码 #

ZStack {
    NavigationView{
        ScrollView(showsIndicators: false){
            Text("WELCOME TO")
                .padding(.top, 100)
                .font(.custom("SF Pro Display", size: 12))
            Text("object")
                .multilineTextAlignment(.center)
                .padding(.bottom, 50)
                .padding(.top, 5)
                .font(.custom("Lato", size: 26))
            VStack{
                HStack{
                    Button(action: {
                        showingATimesSheet.toggle()}) {
                        Text("A")
                            .fixedSize(horizontal: true, vertical: true)
                            .lineLimit(1)
                            .padding(EdgeInsets(top: (UIScreen.screenWidth)/6, leading: (UIScreen.screenWidth)/19, bottom: (UIScreen.screenWidth)/6, trailing: (UIScreen.screenWidth)/19))
                    }
                    .frame(width: UIScreen.screenWidth*2/5, height: UIScreen.screenWidth*2/5)
                    .cornerRadius(7)
                    .shadow(color: .gray, radius: 2, x: 0, y: 1)
                    .foregroundColor(.black)
                    .buttonStyle(.plain)
                    .sheet(isPresented: $showingASheet) {
                        AView(mID: A)
                    }
                    
                    Button(action: {
                        showingSheet.toggle()}) {
                        Text("B")
                            .padding(EdgeInsets(top: (UIScreen.screenWidth)/6, leading: (UIScreen.screenWidth)/19, bottom: (UIScreen.screenWidth)/6, trailing: (UIScreen.screenWidth)/19))
                    }
                    .frame(width: UIScreen.screenWidth*2/5, height: UIScreen.screenWidth*2/5)
                    .cornerRadius(7)
                    .shadow(color: .gray, radius: 2, x: 0, y: 1)
                    .foregroundColor(.black)
                    .buttonStyle(.plain)
                }

                HStack{
                    Button(action: {
                        showingContactSheet.toggle()}) {
                        Text("Contact")
                            .fixedSize(horizontal: true, vertical: true)
                            .lineLimit(1)
                            .padding(EdgeInsets(top: (UIScreen.screenWidth)/6, leading: (UIScreen.screenWidth)/19, bottom: (UIScreen.screenWidth)/6, trailing: (UIScreen.screenWidth)/19))
                    }
                    .frame(width: UIScreen.screenWidth*2/5, height: UIScreen.screenWidth*2/5)
                    .cornerRadius(7)
                    .shadow(color: .gray, radius: 2, x: 0, y: 1)
                    .foregroundColor(.black)
                    .buttonStyle(.plain)
                    .sheet(isPresented: $showingContactSheet) {
                        ContactInfoView(mID: object.object.mID)
                    }
                    
                    Button(action: {
                        showingMoreFeaturesSheet.toggle()
                    }) {
                        Text("More features coming soon")
                            .multilineTextAlignment(.center)
                            .fixedSize(horizontal: false, vertical: true)
                            .padding(EdgeInsets(top: (UIScreen.screenWidth)/6, leading: (UIScreen.screenWidth)/19, bottom: (UIScreen.screenWidth)/6, trailing: (UIScreen.screenWidth)/19))
                    }
                    .frame(width: UIScreen.screenWidth*2/5, height: UIScreen.screenWidth*2/5)
                    .cornerRadius(7)
                    .shadow(color: .gray, radius: 2, x: 0, y: 1)
                    .foregroundColor(.black)
                    .buttonStyle(.plain)
                    .sheet(isPresented: $showingMoreFeaturesSheet) {
                        MoreFeaturesView()
                    }
                }
            }
            .frame(maxWidth: .infinity)
            .edgesIgnoringSafeArea(.all)
            .statusBar(hidden: true)
            .navigationBarTitle("")
            .navigationBarHidden(true)
        }
    }
    
    // 悬浮按钮层
    HStack{
        Spacer()
        VStack {
            Spacer()
            FloatingButton(mainButtonView: MainButton(imageName: "cloud.fill", colorHex: "eb3b5a"), buttons: MockData.iconImageNames.enumerated().map { index, value in
                IconButton(imageName: value, color: MockData.colors[index])
            })
            .straight()
            .direction(.top)
            .delays(delayDelta: 0.1)
            .padding(.bottom, 20)
            .padding(.trailing, 20)
        }
    }
}

关键改动说明 #

• ZStack层叠布局：将滚动内容和悬浮按钮放在同一个ZStack中，确保悬浮按钮始终在内容上层，不受ScrollView滚动影响
• 移除重复背景：删除了所有按钮内部和外部的.background(Color.white)调用，消除不透明背景
• 悬浮按钮定位：给包含FloatingButton的VStack添加Spacer和padding，让按钮固定在屏幕右下角，同时避开安全区

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