Attach form to the edges[iOS/SwiftUI]

Question

(Tested on xCode 12.2 and iPhone 12 Pro iOS 14.2 simulator and real device)

I have already spent a couple of hours on this problem and also found solutions here, but they didn't work for me?

What I want is a style for my setting tabs like the apple setting app, so I built this design:

with the code:

import SwiftUI
 
struct Form_View: View {
    var body: some View {
        NavigationView{
            Form{
                Section{
                    NavigationLink(destination: Text("hello")){
                        HStack{
                            HStack{
                            Image(systemName: "airplane")
                                .foregroundColor(.white)
                                .font(Font.system(size: 17))
                            }
                                .frame(width: 29, height: 29)
                                .background(Color.orange)
                                .cornerRadius(7)
                            Text("Hello World!")
                        }
                    }
                }
            }
                .navigationBarTitle("Title")
        }
    }
}

The problem is that in the original settings app the border is directly at the edge of the device

I tried it with a List:

with code:

import SwiftUI

struct List_View: View {
    var body: some View {
        NavigationView{
            List{
                Group{
                    NavigationLink(destination: Text("hello")){
                        HStack{
                            HStack{
                            Image(systemName: "airplane")
                                .foregroundColor(.white)
                                .font(Font.system(size: 17))
                            }
                                .frame(width: 29, height: 29)
                                .background(Color.orange)
                                .cornerRadius(7)
                            Text("Hello World!")
                        }
                    }
                }
            }
                .navigationBarTitle("Title")
        }
    }
}

But now the color isn't darker in the background like in the form version.

Thank you for helping me!

Answer 1

First of all let's fix the background color as you said, when using a List you need to add this code:

init() {
    UITableView.appearance().backgroundColor = UIColor(Color(#colorLiteral(red: 0.947641658, green: 0.9361838925, blue: 0.9529411765, alpha: 1)))
}

With this you can change your background color without problems.

Now for the settings app here it is an example with all possibilities you can change it to suit your needs, for example you can add title to the header or leave it blank as apple settings app:

    NavigationView{
        List{
            
            Section(header: Text("Important tasks")) {
                NavigationLink(destination: Text("hello")){
                    HStack{
                        HStack{
                            Image(systemName: "airplane")
                                .foregroundColor(.white)
                                .font(Font.system(size: 17))
                        }
                        .frame(width: 29, height: 29)
                        .background(Color.orange)
                        .cornerRadius(7)
                        Text("Hello World!")
                    }
                }
            }
            
            Section(header: Text("section Two")) {
                NavigationLink(destination: Text("hello")){
                    HStack{
                        HStack{
                            Image(systemName: "airplane")
                                .foregroundColor(.white)
                                .font(Font.system(size: 17))
                        }
                        .frame(width: 29, height: 29)
                        .background(Color.orange)
                        .cornerRadius(7)
                        Text("something here")
                    }
                }
            }
            
            
            Section(header: Text("")) {
                NavigationLink(destination: Text("hello")){
                    HStack{
                        HStack{
                            Image(systemName: "airplane")
                                .foregroundColor(.white)
                                .font(Font.system(size: 17))
                        }
                        .frame(width: 29, height: 29)
                        .background(Color.orange)
                        .cornerRadius(7)
                        Text("anything")
                    }
                }
            }
            
            Section(header: Text("")) {
                NavigationLink(destination: Text("hello")){
                    HStack{
                        HStack{
                            Image(systemName: "airplane")
                                .foregroundColor(.white)
                                .font(Font.system(size: 17))
                        }
                        .frame(width: 29, height: 29)
                        .background(Color.orange)
                        .cornerRadius(7)
                        Text("More things and settings")
                    }
                }
            }
            
        }
        .navigationBarTitle("Title")
        .listStyle(GroupedListStyle())
    }

Here it is the result as requested:

Answer 2

Great question!

You can change your form to a List, maintaining the sections and applying the modifier .listStyle(GroupedListStyle()) . Here:

struct Form_View: View {
var body: some View {
    NavigationView{
        List{
            Section{
                NavigationLink(destination: Text("hello")){
                    HStack{
                        HStack{
                        Image(systemName: "airplane")
                            .foregroundColor(.white)
                            .font(Font.system(size: 17))
                        }
                            .frame(width: 29, height: 29)
                            .background(Color.orange)
                            .cornerRadius(7)
                        Text("Hello World!1")
                    }
                }
                NavigationLink(destination: Text("hello")){
                    HStack{
                        HStack{
                        Image(systemName: "airplane")
                            .foregroundColor(.white)
                            .font(Font.system(size: 17))
                        }
                            .frame(width: 29, height: 29)
                            .background(Color.orange)
                            .cornerRadius(7)
                        Text("Hello World!2")
                    }
                }
            }
            Section{
                NavigationLink(destination: Text("hello")){
                    HStack{
                        HStack{
                        Image(systemName: "airplane")
                            .foregroundColor(.white)
                            .font(Font.system(size: 17))
                        }
                            .frame(width: 29, height: 29)
                            .background(Color.orange)
                            .cornerRadius(7)
                        Text("Hello World!3")
                    }
                }
                NavigationLink(destination: Text("hello")){
                    HStack{
                        HStack{
                        Image(systemName: "airplane")
                            .foregroundColor(.white)
                            .font(Font.system(size: 17))
                        }
                            .frame(width: 29, height: 29)
                            .background(Color.orange)
                            .cornerRadius(7)
                        Text("Hello World!4")
                    }
                }
            }
        }
        .listStyle(GroupedListStyle())
            .navigationBarTitle("Title")
    }
}

}