英文:
Shadow is not visible with View() and List()
问题
我已经使用一个具有一些按钮和阴影效果的“View”，然后跟着一个列表。问题是阴影在列表中不可见，但在滚动视图中可见。这是我的代码快照：
struct ContentView: View {
var body: some View {
VStack(spacing: 0) {
HStack {
Button {
} label: {
Text("按钮 1")
}
.frame(maxWidth: .infinity)
Divider()
.frame(height: 44)
Button {
} label: {
Text("按钮 2")
}
.frame(maxWidth: .infinity)
}
.background(Color.white
.shadow(color: Color.gray, radius: 10, x: 0, y: 0)
.mask(Rectangle().padding(.bottom, -20))
)
List(0..<10) { index in
Text("可滚动列表")
}
.listStyle(PlainListStyle())
}
}
}
我想要在列表中实现视图阴影。
英文:
I have used a View having some buttons and a drop shadow and a followed by List
Problem is Shadow is not visible with list but visible with ScrollView.
Here is my code snap:
struct ContentView: View {
var body: some View {
VStack(spacing: 0) {
HStack {
Button {
} label: {
Text("Button 1")
}
.frame(maxWidth: .infinity)
Divider()
.frame(height: 44)
Button {
} label: {
Text("Button 2")
}
.frame(maxWidth: .infinity)
}
.background(Color.white
.shadow(color: Color.gray, radius: 10, x: 0, y: 0)
.mask(Rectangle().padding(.bottom, -20))
)
List(0..<10) { index in
Text("Scrollable list")
}
.listStyle(PlainListStyle())
}
}
}
I have to make spacing 0 so the no space will be visbile when list is scrolling
I want to achieve View Shadow with List.
答案1
得分: 1
这是因为与ScrollView中的Text不同，列表行是不透明的 - 它们具有不透明的背景。
如果你尝试在已经位于列表顶部时进一步向上滚动，你会看到阴影在列表的"后面"。
这可以通过设置列表的zIndex来修复，使其位于阴影的后面。
List(0..<10) { index in
Text("可滚动列表")
}
.listStyle(PlainListStyle())
.zIndex(-1) // 或者设置为小于阴影的zIndex的其他数字
此外，列表行的背景可以通过修饰符listRowBackground来设置，所以你只需要这样做：
List(0..<10) { index in
Text("可滚动列表")
.listRowBackground(Color.clear)
}
当然，还有一种方法，通过添加.padding(.top, someLength)手动将列表向下移动一点，如果你不希望阴影覆盖第一个显示的行，这会更合适。
英文:
This is because unlike Texts in a ScrollView, the list rows are opaque - they have a non-transparent background.
If you try to scroll up even further when you are already at the top of the list, you'll see the shadow is "behind" the list.
This can be fixed by setting the zIndex of the list, so it is behind the shadow.
List(0..<10) { index in
Text("Scrollable list")
}
.listStyle(PlainListStyle())
.zIndex(-1) // or another number that is smaller than the zIndex of the shadow
Also, list row backgrounds can be set by the modifier listRowBackground, so you just need to do:
List(0..<10) { index in
Text("Scrollable list")
.listRowBackground(Color.clear)
}
Of course, there is also the approach of manually moving the list downwards a bit by adding .padding(.top, someLength). This would be appropriate if you don't want the shadow to cover the first displayed row.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论