Question

我想实现一个覆盖底部安全区域的底部工具栏，以便我的横幅视图可以很好地位于工具栏上方，而不会让我的 listView 内容偷看。在 UIKit 中，我可以通过创建 UIToolbar 并将顶部和底部锚点设置为 view.safeAreaLayoutGuide.bottomAnchor 和 view.bottomAnchor 来轻松实现这一点。

我如何为 SwiftUI 实现相同的功能？

当前的 SwiftUI 实现：

struct ListView: View {
    var body: some View {
        NavigationView {
            ZStack {
                List {
                    ForEach (0..<30) { i in
                        Text("Row \(i)")
                    }
                }
                
                VStack {
                    Spacer()
                    Rectangle()
                        .foregroundColor(Color.red)
                        .frame(height: 50)
                    //Toolbar??
                }
            }
            .navigationBarTitleDisplayMode(.inline)
            .listStyle(InsetGroupedListStyle())
            .toolbar {
                //Setting empty toolbar doesn't work
            }
        }
    }
}

UIKit 等效实现：

let toolbar: UIToolbar = {
    let tb = UIToolbar()
    tb.translatesAutoresizingMaskIntoConstraints = false
    return tb
}()

let bannerView: UIView = {
    let v = UIView()
    v.translatesAutoresizingMaskIntoConstraints = false
    v.backgroundColor = .systemRed
    return v
}()

override func viewDidLoad() {
    super.viewDidLoad()
    tableView = UITableView(frame: .zero, style: .insetGrouped)
    tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
    
    view.addSubview(toolbar)
    view.addSubview(bannerView)
    toolbar.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    toolbar.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
    toolbar.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    toolbar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    
    bannerView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    bannerView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
    bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    bannerView.heightAnchor.constraint(equalToConstant: 50).isActive = true
}

SwiftUI 结果：

预期结果：

Answer 1

这是在工具栏中添加 ToolbarItemGroup 并将底部填充添加到列表后的样子：

struct ContentView: View {

    @State var date: Date = Date()
    
    var body: some View {
           NavigationView {
               ZStack {
                   List {
                       ForEach (0..<30) { i in
                           Text("Row \(i)")
                       }
                   }.padding(.bottom, 20)
                   
                   VStack {
                       Spacer()
                       Rectangle()
                           .foregroundColor(Color.red)
                           .frame(height: 50)
                       //Toolbar??
                   }
               }
               .navigationBarTitleDisplayMode(.inline)
               .listStyle(InsetGroupedListStyle())
               .toolbar {
                ToolbarItemGroup(placement: .bottomBar) {}
               }
           }
       }
}

SwiftUI：覆盖底部安全区域的工具栏

1 个答案: