ScrollView 或 List，如何制作特定的可滚动视图 (SwiftUI)

Question

So I am trying to make this List or ScrollView in SwiftUI (not fully iOS 14 ready yet, I have to use the old api, so I can't use ScrollViewReader or other fantasy from iOS 14+ SwiftUI api). The goal is to have only a specific number of rows visible on the view and be able to center the last one.

Images always make it easier to explain. So it should look somewhat like this.

the first two rows have a specific color applied to them, the middle one also but has to be center vertically. then there are eventually 2 more rows under but they are invisible at the moment and will be visible by scrolling down and make them appear.

The closest example i have of this, is the Apple Music Lyrics UI/UX if you are familiar with it.

I am not sure how to approach this here. I thought about create a List that will have a Text with a frame height defined by the height of the view divided by 5. But then I am not sure how to define a specific color for each row depending of which one is it in the view at the moment.

Also, It would be preferable if I can just center the selected row and let the other row have their own sizes without setting one arbitrary.

Banging my head on the walls atm, any help is welcomed. thank you guys.

Edit 1: Screenshot added as a result from @nicksarno answer. Definitely looking good. The only noted issue atm is that it highlights multiple row with the same color instead of one.

Edit 2: I did some adjustment to the code @nicksarno published.

        let middleScreenPosition = geometryProxy.size.height / 2

        return ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                Spacer()
                    .frame(height: geometryProxy.size.height * 0.4)
                ForEach(playerViewModel.flowReaderFragments, id: \.id) { text in
                    Text(text.content) // Outside of geometry ready to set the natural size
                        .opacity(0)
                        .overlay(
                            GeometryReader { geo in
                                let midY = geo.frame(in: .global).midY

                                Text(text.content) // Actual text
                                    .font(.headline)
                                    .foregroundColor( // Text color
                                        midY > (middleScreenPosition - geo.size.height / 2) && midY < (middleScreenPosition + geo.size.height / 2) ? .white :
                                            midY < (middleScreenPosition - geo.size.height / 2) ? .gray :
                                            .gray
                                    )
                                    .colorMultiply( // Animates better than .foregroundColor animation
                                        midY > (middleScreenPosition - geo.size.height/2) && midY < (middleScreenPosition + geo.size.height/2) ? .white :
                                            midY < (middleScreenPosition - geo.size.height/2) ? .gray :
                                            .clear
                                    )
                                    .animation(.easeInOut)
                            }
                        )
                }
                Spacer()
                    .frame(height: geometryProxy.size.height * 0.4)

            }
            .frame(maxWidth: .infinity)
            .padding()
        }
        .background(
            Color.black
                .edgesIgnoringSafeArea(.all)
        )

Now it is closer to what I am looking for. Also, I added some Spacer (not dynamic yet) that will allow to center the text if needed in the middle. Still need to figure how to put the text in the middle when selected one of the element.

Answer 1

Here's how I would do it. First, add a GeometryReader to get the size of the entire screen (screenGeometry). Using that, you can set up the boundaries for your text modifiers (upper/lower). Finally, add a GeoemteryReader behind each of the Text() and (here's the magic) you can use the.frame(in: global) function to find its current location in the global coordinate space. We can then compare the frame coordinates to our upper/lower boundaries.

A couple notes:

• The current boundaries are at 40% and 60% of the screen.
• I'm currently using the.midY coordinate of the Text geometry, but you can also use.minY or.maxY to get more exact.
• The natural behavior of a GeometryReader sizes to the smallest size to fit, so to keep the natural Text sizes, I added a first Text() with 0% opacity (for the frame) and then added the GeometryReader + the actual Text() as an overlay.
• Lastly, the.foregroundColor doesn't really animate, so I also added a.colorMultiply on top, which does animate.

Code:

 struct ScrollViewPlayground: View {
        
        let texts: [String] = [
            "So I am trying to make this List or ScrollView in SwiftUI (not fully iOS 14 ready yet, I have to use the old api, so I can't use ScrollViewReader or other fantasy from iOS 14+ SwiftUI api). The goal is to have only a specific number of rows visible on the view and be able to center the last one.",
            "Images always make it easier to explain. So it should look somewhat like this.",
            "the first two rows have a specific color applied to them, the middle one also but has to be center vertically. then there are eventually 2 more rows under but they are invisible at the moment and will be visible by scrolling down and make them appear.",
            "The closest example i have of this, is the Apple Music Lyrics UI/UX if you are familiar with it.",
            "I am not sure how to approach this here. I thought about create a List that will have a Text with a frame height defined by the height of the view divided by 5. But then I am not sure how to define a specific color for each row depending of which one is it in the view at the moment.",
            "Also, It would be preferable if I can just center the selected row and let the other row have their own sizes without setting one arbitrary.",
            "Banging my head on the walls atm, any help is welcomed! thank you guys."
        ]
        
        var body: some View {
            GeometryReader { screenGeometry in
                let lowerBoundary = screenGeometry.size.height * 0.4
                let upperBoundary = screenGeometry.size.height * (1.0 - 0.4)
                
                ScrollView {
                    VStack(alignment: .leading, spacing: 20) {
                        ForEach(texts, id: \.self) { text in
                            Text(text) // Outside of geometry ready to set the natural size
                                .opacity(0)
                                .overlay(
                                    GeometryReader { geo in
                                        let midY = geo.frame(in: .global).midY
    
                                        Text(text) // Actual text
                                            .font(.headline)
                                            .foregroundColor( // Text color
                                                midY > lowerBoundary && midY < upperBoundary ? .white :
                                                midY < lowerBoundary ? .gray :
                                                .gray
                                            )
                                            .colorMultiply( // Animates better than .foregroundColor animation
                                                midY > lowerBoundary && midY < upperBoundary ? .white :
                                                midY < lowerBoundary ? .gray :
                                                .clear
                                            )
                                            .animation(.easeInOut)
                                    }
                                )
                        }
    
                    }
                    .frame(maxWidth: .infinity)
                    .padding()
                }
                .background(
                    Color.black
                        .edgesIgnoringSafeArea(.all)
                )
            }
        }
    }
    
    struct ScrollViewPlayground_Previews: PreviewProvider {
        static var previews: some View {
            ScrollViewPlayground()
        }
    }