Break music player into usable components in SwiftUI
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()
    }
}