滚动视图和 .sheet
ScrollView and .sheet
我有一个带有 ForEach 循环的 ScrollView,每个循环都呈现一个视图。在视图中,我有 3 个下面的 ActionItem 渲染图(一个显示 sheet 的按钮)。 sheet 不会出现在 ScrollView 中,但会出现在 List 中。我通常会在 ScrollView 层附加 .sheet 但是,每个按钮呈现不同的视图似乎更适合嵌套它。
我怎样才能让它与 ScrollView 一起工作?我正在使用 Xcode 12
struct ActionItem<Content>: View where Content : View {
public var text: String
public var icon: String
public var content: Content
@State var isPresented = false
init(text: String, icon: String, @ViewBuilder content: () -> Content) {
self.text = text
self.icon = icon
self.content = content()
}
var body: some View {
Button (action: {
DispatchQueue.main.async {
withAnimation {
self.isPresented = true
}
}
}) {
HStack(spacing: 2) {
Image(systemName: icon).font(.system(size: 14, weight: .semibold))
Text(text).fontWeight(.semibold)
}.padding([.top, .bottom], Dimensions.spacing)
.padding([.leading, .trailing], Dimensions.spacingMedium)
}.foregroundColor(Color.gray).font(.subheadline).background(Color.grayWhiteTer)
.cornerRadius(Dimensions.spacing)
.sheet(isPresented: $isPresented) {
self.content
}
}
}
在视图中,我将呈现诸如文本之类的 ActionItem,如果忽略视图并且 ActionItem 直接位于 ForEach 中,也会发生这种情况。同样的问题,sheet没有出现。
ActionItem(text: "", icon: "pencil") {
Text("ok")
}
列表如下所示
import SwiftUI
struct ItemsList: View {
@ObservedObject var itemModel: ItemModel
var body: some View {
VStack(alignment: .center, spacing: 0) {
ScrollView {
VStack {
ForEach(itemModel.items, id: \.self) { item in
ItemView(item: item)
}
}.frame(maxWidth: .infinity, maxHeight: .infinity)
}}
建议的回调更新
struct ActionItem<Content>: View where Content : View {
public var text: String
public var icon: String
public var content: () -> Content
@State var isPresented = false
init(text: String, icon: String, @ViewBuilder content: @escaping () -> Content) {
self.text = text
self.icon = icon
self.content = content
}
var body: some View {
Button (action: {
DispatchQueue.main.async {
withAnimation {
self.isPresented = true
}
}
}) {
HStack(spacing: 2) {
Image(systemName: icon).font(.system(size: 14, weight: .semibold))
Text(text).fontWeight(.semibold)
}.padding([.top, .bottom], Dimensions.spacing)
.padding([.leading, .trailing], Dimensions.spacingMedium)
}.foregroundColor(Color.gray).font(.subheadline).background(Color.grayWhiteTer)
.cornerRadius(Dimensions.spacing)
.sheet(isPresented: $isPresented) {
self.content()
}
}
}
尝试将内容保存为回调(即 () -> Content)并在 sheet 方法中调用它,而不是在初始化程序中调用它。这将在创建视图时改变。
我有一个带有 ForEach 循环的 ScrollView,每个循环都呈现一个视图。在视图中,我有 3 个下面的 ActionItem 渲染图(一个显示 sheet 的按钮)。 sheet 不会出现在 ScrollView 中,但会出现在 List 中。我通常会在 ScrollView 层附加 .sheet 但是,每个按钮呈现不同的视图似乎更适合嵌套它。
我怎样才能让它与 ScrollView 一起工作?我正在使用 Xcode 12
struct ActionItem<Content>: View where Content : View {
public var text: String
public var icon: String
public var content: Content
@State var isPresented = false
init(text: String, icon: String, @ViewBuilder content: () -> Content) {
self.text = text
self.icon = icon
self.content = content()
}
var body: some View {
Button (action: {
DispatchQueue.main.async {
withAnimation {
self.isPresented = true
}
}
}) {
HStack(spacing: 2) {
Image(systemName: icon).font(.system(size: 14, weight: .semibold))
Text(text).fontWeight(.semibold)
}.padding([.top, .bottom], Dimensions.spacing)
.padding([.leading, .trailing], Dimensions.spacingMedium)
}.foregroundColor(Color.gray).font(.subheadline).background(Color.grayWhiteTer)
.cornerRadius(Dimensions.spacing)
.sheet(isPresented: $isPresented) {
self.content
}
}
}
在视图中,我将呈现诸如文本之类的 ActionItem,如果忽略视图并且 ActionItem 直接位于 ForEach 中,也会发生这种情况。同样的问题,sheet没有出现。
ActionItem(text: "", icon: "pencil") {
Text("ok")
}
列表如下所示
import SwiftUI
struct ItemsList: View {
@ObservedObject var itemModel: ItemModel
var body: some View {
VStack(alignment: .center, spacing: 0) {
ScrollView {
VStack {
ForEach(itemModel.items, id: \.self) { item in
ItemView(item: item)
}
}.frame(maxWidth: .infinity, maxHeight: .infinity)
}}
建议的回调更新
struct ActionItem<Content>: View where Content : View {
public var text: String
public var icon: String
public var content: () -> Content
@State var isPresented = false
init(text: String, icon: String, @ViewBuilder content: @escaping () -> Content) {
self.text = text
self.icon = icon
self.content = content
}
var body: some View {
Button (action: {
DispatchQueue.main.async {
withAnimation {
self.isPresented = true
}
}
}) {
HStack(spacing: 2) {
Image(systemName: icon).font(.system(size: 14, weight: .semibold))
Text(text).fontWeight(.semibold)
}.padding([.top, .bottom], Dimensions.spacing)
.padding([.leading, .trailing], Dimensions.spacingMedium)
}.foregroundColor(Color.gray).font(.subheadline).background(Color.grayWhiteTer)
.cornerRadius(Dimensions.spacing)
.sheet(isPresented: $isPresented) {
self.content()
}
}
}
尝试将内容保存为回调(即 () -> Content)并在 sheet 方法中调用它,而不是在初始化程序中调用它。这将在创建视图时改变。