Mastering Customization: Configuring the Look and Feel of Lists in SwiftUI

On this submit, we’ll learn to configure the feel and appear of an inventory. The picture we’re utilizing is from unsplash,; rename it ‘zoe’ and replica it into the property.

Let’s begin from the tip and start by envisioning what we wish to create:

First, set up the San Francisco symbols (if you happen to haven’t already), then create the information construction that we wish to show within the record:

struct Ornament: Identifiable {
    let id = UUID()
    var identify: String
    var shade: Shade
    var picture: String
}

The struct implement the Identifiable protocol, as a result of we want add an distinctive identifier.

Within the ContentView, we initialize the information:

struct ContentView: View {
    var decorations = [Decoration(name: "Star", color: .yellow, image:  "star.fill"), Decoration(name: "Light", color: .pink, image: "lightbulb.fill"), Decoration(name: "Snow", color: .white, image:"snowflake")]

We add solely three Christmas decorations.

Within the physique:

var physique: some View {
        NavigationStack {
            Listing(decorations) { ornament in
                NavigationLink(vacation spot: EmptyView()) {
                    HStack {
                        Picture(systemName: ornament.picture)
                            .foregroundStyle(ornament.shade)
                            .body(width: 50, top: 50)
                        Textual content(ornament.identify)
                            .foregroundColor(ornament.shade)
                            .opacity(0.7)
                            .font(.title)
                            .fontWeight(.daring)
                    }
                }.listRowBackground(Shade(crimson: 0.1, inexperienced: 0.1, blue: 0.1))
                .listRowSeparatorTint(.white)

            }
            .navigationTitle("Decorations")
            .background(Picture("zoe").resizable().aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            )
            .scrollContentBackground(.hidden)
            .opacity(0.8)

        }
    }

The content material of every row is displayed utilizing an HStack, which incorporates the identify, shade and the picture of the ornament, using the information from the ornament array.

Now, let’s check out the person customizations:

.listRowBackground(Shade(crimson: 0.1, inexperienced: 0.1, blue: 0.1))

With this, we set the background of the row to a customized grey, as an alternative of the default white (in gentle mode) or black (in darkish mode).

.listRowSeparatorTint(.white)

To reinforce the visibility of the row separator, we use this code to alter its default shade.

.background(Picture("zoe").resizable().aspectRatio(contentMode: .fill)
.edgesIgnoringSafeArea(.all))
.opacity(0.8)
.scrollContentBackground(.hidden)

Subsequently, we set the picture because the background with a sure opacity and use all of the accessible display screen area, ignoring the secure space on each edge. Word that this final property is utilized to the picture, to not the background. Lastly, we cover the background of the content material in order that the picture is absolutely seen.

When you execute this code, you will note the title with the default black shade (when utilizing gentle mode). Nonetheless, we wish the title to all the time be in white. To attain this, we add the init operate to ContentView:

init() {
      // Massive Navigation Title
      UINavigationBar.look().largeTitleTextAttributes =  [.foregroundColor: UIColor.white]
      // Inline Navigation Title
      UINavigationBar.look().titleTextAttributes = [.foregroundColor: UIColor.white]
    }

On this means, we set the textual content shade for giant and inline titles. Word the ‘UI’ prefix, which implies that we’re utilizing capabilities from UIKit.

Word: English isn’t my native language, so I’m sorry for some errors. I recognize in case your appropriate me.

[originally published](https://nicoladefilippo.com/mastering-customization-configuring-the-look-and-feel-of-lists-in-swiftui/]