将表单附加到边缘[iOS/SwiftUI]答案

【问题标题】：Attach form to the edges[iOS/SwiftUI]将表单附加到边缘[iOS/SwiftUI]
【发布时间】：2020-12-16 01:21:34
【问题描述】：

（在 xCode 12.2 和 iPhone 12 Pro iOS 14.2 模拟器和真机上测试）

我已经在这个问题上花了几个小时，也在这里找到了解决方案，但它们对我不起作用？

我想要的是我的设置选项卡的样式，比如苹果设置应用程序，所以我构建了这个设计：

用代码：

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")
        }
    }
}

问题是在原始设置应用程序中，边框直接位于设备边缘

我用列表试了一下：

带代码：

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")
        }
    }
}

但现在背景的颜色不像表单版本那样更暗了。

谢谢你帮助我！

【问题讨论】：

标签： ios swift forms swiftui

【解决方案1】：

首先让我们按照你说的修复背景颜色，当使用List时你需要添加这个代码：

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

有了这个，你可以毫无问题地改变你的背景颜色。

现在对于设置应用程序，这是一个示例，您可以根据自己的需要对其进行更改，例如，您可以将标题添加到标题或将其留空作为苹果设置应用程序：

    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())
    }

这是要求的结果：

【讨论】：

您也可以使用UITableView.appearance().backgroundColor = .systemGroupedBackground 在暗模式下工作。
非常感谢你们。我认为你很少被告知你是多么酷的人。你帮助了这么多人，而且你是免费的。这是令人难以置信的。感谢您利用您的经验帮助像我这样的人:) 你真是太棒了
大声笑别担心我们所有人都在学习，我们并不知道一切，当你获得一些知识时，别忘了来这里帮助他人，因为你会学到新的东西你以前不知道，就像我现在所做的一样，祝你有美好的一天:)

【解决方案2】：

好问题！

您可以将表单更改为列表，保留部分并应用修饰符 .listStyle(GroupedListStyle())。这里：

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")
    }
}

}

【讨论】：