Twitter Bootstrap Question posted in

SwiftUI – Space between colored list items-Twitter bootstrap

I have a List in NavigationView. As per the design, each of its rows has a different color. They do not have seperator line, but instead there is a 4 points between each of the rows. They are similar to the rows in this HTML code snippet.

.max-w-414px {
  max-width: 414px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container max-w-414px mt-5">
  <div class="row">
    <div class="col-12 pr-0 mb-2 bg-primary rounded d-flex justify-content-end">
      <div class="bg-danger py-3 px-4 rounded text-light">Delete</div>
    </div>
    <div class="col-12 py-4 mb-2 bg-primary rounded"></div>
    <div class="col-12 py-4 mb-2 bg-primary rounded"></div>
    <div class="col-12 py-4 mb-2 bg-primary rounded"></div>
    <div class="col-12 py-4 mb-2 bg-primary rounded"></div>
    <div class="col-12 py-4 mb-2 bg-primary rounded"></div>
    <div class="col-12 py-4 mb-2 bg-primary rounded"></div>
    <div class="col-12 py-4 mb-2 bg-primary rounded"></div>
    <div class="col-12 py-4 mb-2 bg-primary rounded"></div>
    <div class="col-12 py-4 mb-2 bg-primary rounded"></div>
  </div>
</div>

I need to have onDelete enabled on all of the rows. That is to say, I want to delete rows on Swipe-left gesture.

I have tried a lot. The closest that I have come to is to use a Spacer().deleteDisabled(true) between Each NavigationLink. But there is more than 4 points space between the rows that I do not want.

struct ListView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(0..<20) { index in
                    NavigationLink(destination: TaskView()) {
                        Text("List")
                    }
                    .listRowBackground(Color.green)
                    Spacer(minLength:1)
                        .deleteDisabled(true)
                }
                .onDelete(perform: { indexSet in
                    
                })
            }
            .padding(.horizontal)
            .environment(.defaultMinListRowHeight, 50)
        }
    }
}

struct ListView_Previews: PreviewProvider {
    static var previews: some View {
        ListView()
    }
}

How to build a List similar to the list in my HTML code snippet?

Tags:

2

Answers


  1. 0

    You can definitely get close with a List. The delete view looks a little weird with this solution, but maybe with some fiddling there’s a way to fix that, too. First, get rid of the spacer entirely. Then, instead of using a solid color for your listRowBackground parameter, create a custom view and use it:

    struct ListRowBackground: View {
    var body: some View {
        ZStack {
            Color.white
            Color.blue
                .cornerRadius(8)
                .padding(.vertical, 4)
        }
    }
}

    Implement it like this:

    .listRowBackground(ListRowBackground())
    Login or Signup to reply.
  2. 0

    is this similar?

    struct ListView: View {
    var body: some View {
        
        NavigationView {
            List {
                ForEach(0..<20) { index in
                    
                        NavigationLink(destination: TaskView()) {
                            Text("List")
                                .padding(.horizontal)
                        }
                        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                        .listRowInsets(EdgeInsets(top: 2, leading: 10, bottom: 2, trailing: 10))
                        .background(Color.blue)
                        .cornerRadius(4.0)
                }
                .onDelete(perform: { indexSet in
                    
                })
            }
            .environment(.defaultMinListRowHeight, 50)
           
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search