Problems with Layout of Some Rows in Swiftui List

Problems with layout of some rows in SwiftUI list

I tried your code at simulators first and had same issue too. But then I remembered, that there are some problems with 13.2 iOS and tried to run it on my device (iPhone 7, iOS 13.1.1) and everything works fine! I think that is the problem in 13.2 iOS, not in the List. There is sample, how I changed code for demonstration that everything is ok:

import SwiftUI

struct LocksView: View {
    
    @State private var locksPaid = 0

    var body: some View {
        NavigationView {
            List {
                Picker(selection: $locksPaid, label: Text("Picker")) {
                    Text("All").tag(0)
                    Text("Not paid (2)").tag(1)
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding(10)

                ForEach(0 ..< 200) {item in
                    LocksItemView(number: item)
                }

            }
            .navigationBarTitle(Text("Locks"))
            .navigationBarItems(trailing: EditButton())
        }
    }
}

struct LocksItemView: View {

    @State private var paid : Bool = false
    var number: Int

    var body: some View {
        HStack {

            Text("L\(self.number)")
                .font(.title)
                .fontWeight(.heavy)
                .multilineTextAlignment(.center)
                .frame(width: 80)

            VStack(alignment: .leading) {
                Text("nickname")
                    .fontWeight(.bold)
                Text("category")
                Text("4 000 THB")
                    .fontWeight(.bold)
            }

            Spacer()

            Toggle(isOn: self.$paid) {
                Text("Paid")
            }
            .labelsHidden()
        }
    }
}

and on my phone the result is:

so there are bugs in 13.2 version and I hope Apple will fix them all

SwiftUI List - some part of row content is overlapped by next row

I think it will be tricky with a list, as it "crops" the list cells. But it would work like this with a ScrollView and LazyVStack:

struct ContentView: View {
    @ObservedObject var cardVM = CardVM()
    @State var refreshStatus = false

    var body: some View {
        NavigationView {
            ScrollView {
                LazyVStack(spacing: -15) {
                    ForEach(cardVM.cardList, id: \.id) { card in
                        CardViewRow(card: card)
                    }
                }
            }
            .listStyle(.plain)
            .navigationTitle("List")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct CardViewRow: View {
    @ObservedObject var card: Card
    var body: some View {
        
        CardView()
        
        Image(systemName: "plus.app.fill")
            .font(.system(size: 40.0))
            .offset(y: 0)
            .foregroundColor(card.needRefresh ? .blue : .red)
            .zIndex(1)
        
            .onAppear {
                card.needRefresh.toggle()
            }
    }
}

SwiftUI list row layout

Here is a solution to make gradient row-wide

struct EventRow: View {

    var body: some View {
        VStack{
            HStack {
                Text("Text one")
                Spacer()
                Text("Text two")
            }
            HStack {
                Spacer()
                Image(systemName: "flame")
                    .font(.body)
                Spacer()
            } // END of second HStack
                .padding(.top, -14)
        } //END of Vstack
        .listRowBackground(LinearGradient(gradient: Gradient(colors: [Color.white, Color.blue]), startPoint: .top, endPoint: .bottom)
        )
    }
}

How to have same proportions in a SwiftUI List row?

If your middle content size is the same for all the list rows, then you can use .fixedSize and frame.

var body: some View {
    HStack {
        Text(model.given)
            .font(.headline)
            .frame(minWidth: 0, maxWidth: .infinity) //<-- Here
        Spacer()
        VStack {
            Text("Elo rating: \(model.elo)")
            Text("Average time: \(model.avg_time ?? "")")
            Text("Average score: \(String(model.avg_score ?? 0.0))")
        }.fixedSize(horizontal: true, vertical: false) //<-- Here
        Spacer()
        DownloadingImage(url: model.photo ?? "TODO")
            .frame(width: 75, height: 75)
    }
}

---

Related Topics