SwiftUI:覆盖底层safeArea的工具栏
SwiftUI:覆盖底层safeArea的工具栏
提问于 2021-07-12 22:53:00
我想实现一个覆盖底部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结果：
预期结果：
回答 1
Stack Overflow用户
发布于 2021-07-13 00:23:34
这是在工具栏中添加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) {}
}
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68349507
复制相关文章
相似问题
腾讯云开发者
