ios SwiftUI：覆盖底部safeArea的工具栏

0pizxfdo 于 2022-12-20 发布在 iOS

关注(0)|答案(2)|浏览(156)

我想实现一个覆盖底部safeArea的底部工具栏，这样bannerView就可以很好地位于工具栏上方，而不会让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结果：

预期结果：

ios

来源：https://stackoverflow.com/questions/68349507/swiftui-toolbar-that-covers-bottom-safearea

2条答案

按热度按时间

wnavrhmk1#

这是在工具栏中添加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) {}
               }
           }
       }
}

赞(0）回复(0）举报 2022-12-20

n53p2ov02#

你的要求不可能。
SwiftUI只会在工具栏中有项目时才显示工具栏。严格地说，这是正确的行为，工具栏是用来显示项目的，而不是用来创建背景的。
所以你将不得不使用一些替代品。我不明白为什么你不能使用一个白色的矩形进入安全区域，但我不知道你的应用程序的其余部分，我认为这是有原因的。

赞(0）回复(0）举报 2022-12-20