Guidance on hovering button over scrollview

72 Views Asked by At

Screenshot 2023-04-03 at 8 53 22 AM Hi,

Thank you for the wonderful software.

Using https://github.com/exyte/FloatingButton

The image above shows that the hstack containing the button does not float/hover.

How would I be able to have this hover over the scroll view as scroll occurs without the opaque background shown here?

Thank you

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))
              .background(Color.white)
          }
          .frame(width: UIScreen.screenWidth*2/5, height: UIScreen.screenWidth*2/5)
          .background(Color.white)
          .cornerRadius(7)
          .shadow(color: .gray, radius: 2, x: 0, y: 1)
          .foregroundColor(.black)
          .buttonStyle(.plain)
        Button(action: {
          showingSheet.toggle()}) {
          Text("B")
              .padding(EdgeInsets(top: (UIScreen.screenWidth)/6, leading: (UIScreen.screenWidth)/19, bottom: (UIScreen.screenWidth)/6, trailing: (UIScreen.screenWidth)/19))
              .background(Color.white)
            let mainButton1 = MainButton(imageName: "star.fill", colorHex: "f7b731", width: 60)
            let textButtons = MockData.iconAndTextTitles.enumerated().map { index, value in
                IconAndTextButton(imageName: MockData.iconAndTextImageNames[index], buttonText: value)
                    .onTapGesture { isOpen.toggle() }
            }
                
        }
          .background(Color.white)
          .frame(width: UIScreen.screenWidth*2/5, height: UIScreen.screenWidth*2/5)
          .background(Color.white)
          .cornerRadius(7)
          .shadow(color: .gray, radius: 2, x: 0, y: 1)
          .foregroundColor(.black)
          .buttonStyle(.plain)
            .sheet(isPresented: $showingASheet) {
                AView(mID: A)
        }
        
      }

      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))
            .background(Color.white)
        }
          .background(Color.white)
          .frame(width: UIScreen.screenWidth*2/5, height: UIScreen.screenWidth*2/5)
          .background(Color.white)
          .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))
              .background(Color.white)
        }
          .background(Color.white)
          .frame(width: UIScreen.screenWidth*2/5, height: UIScreen.screenWidth*2/5)
          .background(Color.white)
          .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()
  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)
}

} }

I tried shuffling the Stacks around, and making a transparent view. No success.

0

There are 0 best solutions below