I am playing around with fading animation of Text like this

struct ContentView: View {
     @State var lorem = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
       var body: some View {
       VStack() {
           Text(lorem)
               .multilineTextAlignment(.center)
               .foregroundColor(Color.blue)
               .fontWeight(.bold)
       }
       .frame(maxHeight: .infinity)
       .overlay(alignment: .topLeading) {
           Button("Delete") {
               withAnimation {
                   lorem = ""
               }
           }
       }
       .overlay(alignment: .topTrailing) {
           Button("Reset") {
               withAnimation {
                   lorem = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
               }
           }
          
       }
       }
}

My code and everything look okay no error so far but every time i click on overlay delete button everything just fade away. other websites say Vstack height depend on the height of my Text so every thing collapse so i tried setting height to "infinity" however still not working.

CodePudding user response：

That's because you are using .overlay{}.

When your Text() view is empty, your VStack() shrinks itself and becomes empty too as there is no element inside it, so the overlay{} of VStack will be gone too.

You can solve this by using ZStack with Color.clear as its dummy background or .opacity with if else.

Try this modified code:

 var body: some View {
       ZStack() { //modified
           Color.clear.edgesIgnoringSafeArea(.all) //added
           Text(lorem)
               .multilineTextAlignment(.center)
               .foregroundColor(Color.blue)
               .fontWeight(.bold)
       }
       .overlay(alignment: .topLeading) {
           Button("Delete") {
               withAnimation {
                   lorem = ""
               }
           }
       }
       .overlay(alignment: .topTrailing) {
           Button("Reset") {
               withAnimation {
                   lorem = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
               }
           }
          
       }