Break music player into usable components in SwiftUI I created a music player using swiftUI.I need to ask a question when I break up my player into usable components. How should I take this approach with the music player? because the music player is one view can't break up?
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(&quot;albumCover&quot;)
            HStack{
                VStack {
                    Text(&quot;Album name&quot;)
                    Text(&quot;Artist name&quot;)
                }
                Spacer()
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                     Image(systemName: &quot;heart&quot;)
                }
            }.padding()
            HStack{
                Text(&quot;0&quot;)
                Slider(value: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant(10)/*@END_MENU_TOKEN@*/)
                Text(&quot;-5:00&quot;)
            }.padding()
            
            HStack{
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                     Image(systemName: &quot;shuffle&quot;)
                }
                Spacer()
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                     Image(systemName:&quot;backward.end&quot;)
                }
                Spacer()
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                     Image(systemName: &quot;play&quot;)
                }
                Spacer()
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                     Image(systemName: &quot;forward.end&quot;)
                }
                Spacer()
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                     Image(systemName: &quot;repeat&quot;)
                }
        
            }.padding()
            
                HStack{
                    Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                         Image(systemName: &quot;hifispeaker&quot;)
                    }

                    Spacer()
                    Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                         Image(systemName: &quot;music.note.list&quot;)
                    }
            
                }.padding()
            
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
I need to ask a question when I break up my player into usable
components. How should I take this approach

The idea is to break a long and not so readable code into smaller parts. Also, each individual part needs to access variables etc.
For this you can use a private extension (unless it's in another file, then skip private):
struct ContentView: View {
    @State private var sliderValue = 1.0

    var body: some View {
        VStack {
            Image(&quot;albumCover&quot;)
            infoView
            sliderView
            actionsView
            bottomView
        }
    }
}

private extension ContentView {
    var infoView: some View {
        HStack {
            VStack {
                Text(&quot;Album name&quot;)
                Text(&quot;Artist name&quot;)
            }
            Spacer()
            Button(action: {}) {
                Image(systemName: &quot;heart&quot;)
            }
        }
        .padding()
    }
}

private extension ContentView {
    var sliderView: some View {
        HStack {
            Text(&quot;0&quot;)
            Slider(value: $sliderValue)
            Text(&quot;-5:00&quot;)
        }
        .padding()
    }
}

private extension ContentView {
    var actionsView: some View {
        HStack {
            Button(action: {}) {
                Image(systemName: &quot;shuffle&quot;)
            }
            Spacer()
            Button(action: {}) {
                Image(systemName: &quot;backward.end&quot;)
            }
            Spacer()
            Button(action: {}) {
                Image(systemName: &quot;play&quot;)
            }
            Spacer()
            Button(action: {}) {
                Image(systemName: &quot;forward.end&quot;)
            }
            Spacer()
            Button(action: {}) {
                Image(systemName: &quot;repeat&quot;)
            }
        }
        .padding()
    }
}

private extension ContentView {
    var bottomView: some View {
        HStack {
            Button(action: {}) {
                Image(systemName: &quot;hifispeaker&quot;)
            }
            Spacer()
            Button(action: {}) {
                Image(systemName: &quot;music.note.list&quot;)
            }
        }
        .padding()
    }
}

Note that you can declare sliderValue directly in ContentView:
struct ContentView: View {
    @State private var sliderValue = 1.0

and access it in the extension:
private extension ContentView {
    var sliderView: some View {
        Slider(value: $sliderValue)


But the code above still doesn't address the problem of repeating blocks of code in your ContentView. See how often this block is reused:
Button(action: {}) {
    Image(systemName: &quot;hifispeaker&quot;)
}

What if you want to apply a modifier to every Image?
A solution may be to extract the repeating code to one function:
private extension ContentView {
    func customButton(imageName: String, action: @escaping () -&gt; Void) -&gt; some View {
        Button(action: action) {
            Image(systemName: imageName)
        }
    }
}

and use it like this:
private extension ContentView {
    var bottomView: some View {
        HStack {
            customButton(imageName: &quot;hifispeaker&quot;, action: {})
            customButton(imageName: &quot;music.note.list&quot;, action: {})
        }
        .padding()
    }
}