[英]Remove top padding from `List` in SwiftUI
I've seen similar questions like this one here on Stack Overflow, but none of them have been able to answer my question.我在 Stack Overflow 上看到过类似的问题,但没有一个能够回答我的问题。
I have created a List
, but I want to remove the padding space (marked with a red arrow) above the content in the List
.我创建了一个
List
,但我想删除List
内容上方的填充空间(用红色箭头标记)。 How can I remove it when using a GroupedListStyle
?使用
GroupedListStyle
时如何删除它?
This is a List
within a VStack
within a NavigationView
that is displayed via fullscreenCover
:这是通过
fullscreenCover
显示的NavigationView
内的VStack
内的List
:
var body: some View {
NavigationView {
VStack {
taskEventPicker
myList
}
.navigationBarTitle("Add Task", displayMode: .inline)
}
}
where taskEventPicker
is a segmented Picker
(boxed in green):其中
taskEventPicker
是一个分段的Picker
(以绿色框起来):
var taskEventPicker: some View {
Picker("Mode", selection: $selection) { /* ... */ }
.pickerStyle(SegmentedPickerStyle())
.padding()
}
and myList
is the form in question (boxed in yellow):和
myList
是有问题的形式(黄色框):
var myList: some View {
List { /* ... */ }
.listStyle(GroupedListStyle())
}
What I've Tried我试过的
UITableView.appearance().tableHeaderView
to an empty frameUITableView.appearance().tableHeaderView
设置为空框架UITableView.appearance().contentInset.top = -35
UITableView.appearance().contentInset.top = -35
listRowInsets
(this affects all list rows)listRowInsets
(这会影响所有列表行) Note: I'm looking for an answer that can apply to the GroupedListStyle
.注意:我正在寻找可以适用于
GroupedListStyle
的答案。 I understand that this issue does not occur with PlainListStyle
.我了解
PlainListStyle
不会出现此问题。 This padding issue also occurs with the default listStyle
.默认
listStyle
也会出现此填充问题。
Thanks for the help!谢谢您的帮助!
Xcode version: 12.5 Xcode 版本:12.5
Firstly, I would say that GroupedListStyle
is working as intended.首先,我想说
GroupedListStyle
正在按预期工作。
On iOS, the grouped list style displays a larger header and footer than the plain style, which visually distances the members of different sections.
在 iOS 上,分组列表样式比普通样式显示更大的页眉和页脚,这在视觉上拉开了不同部分的成员的距离。
You say you have tried this, but it does work for me (Xcode 12.5.1):你说你已经尝试过了,但它对我有用(Xcode 12.5.1):
List { ... }
.onAppear(perform: {
UITableView.appearance().contentInset.top = -35
})
You could also hide the list header, by using a ZStack
with the List at the bottom of the stack and the Picker
over the top.您还可以隐藏列表标题,方法是使用
ZStack
,List 位于堆栈底部, Picker
位于顶部。 The Picker does have transparency, so you would also have to add an opaque view to act as background for the Picker
. Picker 确实具有透明度,因此您还必须添加一个不透明的视图作为
Picker
的背景。
var body: some View {
NavigationView {
ZStack(alignment: .top) {
List { ... }
.listStyle(.grouped)
.padding(.top, 30)
Color.white
.frame(height: 65)
Picker { ... }
.pickerStyle(.segmented)
.padding()
}
.navigationBarTitle("Add Task", displayMode: .inline)
}
}
As far as I can see this just appears the same as PlainListStyle
would do, but I assume you have a particular reason for wanting to use GroupedListStyle
.据我所见,这与
PlainListStyle
看起来一样,但我认为您有特定的理由想要使用GroupedListStyle
。
Give a header to the first section in your list: Section(header: Spacer(minLength: 0))
为列表中的第一部分提供标题:
Section(header: Spacer(minLength: 0))
Disclaimer: this doesn't totally remove the top spacing, but it does yield the same result as the native Settings app.免责声明:这并没有完全消除顶部间距,但它确实产生了与本机设置应用程序相同的结果。
Note: This worked for me on iOS 14.5注意:这在 iOS 14.5 上对我有用
VStack {
List {
Section(header: Spacer(minLength: 0)) {
Text(verbatim: "First Section")
}
Section {
Text(verbatim: "Second Section")
}
}
.listStyle(GroupedListStyle())
}
I had a similar setup where I had some views and a List in a VStack and I had an undesired space that appeared on the top of my List.我有一个类似的设置,我在 VStack 中有一些视图和一个列表,并且我有一个不想要的空间出现在我的列表顶部。 In my case I needed to set the VStack spacing to 0 and that solved the issue because it was actually just spacing from the VStack.
在我的情况下,我需要将 VStack 间距设置为 0,这解决了这个问题,因为它实际上只是与 VStack 的间距。
VStack(spacing: 0) { ... }
my 2 cents.我的 2 美分。 I arrived here for the same reason.
我出于同样的原因来到这里。
take a look at: https://developer.apple.com/forums/thread/662544看看: https ://developer.apple.com/forums/thread/662544
it' seems the correct approach.这似乎是正确的方法。
The contentInsent
part of the accepted answer works perfectly fine unless for instance as in my case, at the end of a navigation stack you want to use it in some detail view containing a List
with navigationBarTitleDisplayMode
set to .inline
.已接受答案的
contentInsent
部分工作得非常好,除非例如在我的情况下,在导航堆栈的末尾,您想在包含带有navigationBarTitleDisplayMode
设置为.inline
的List
的详细视图中使用它。 When navigating back in the stack to a view using another List
with navigationBarTitleDisplayMode
set to .large
, the List
content and NavigationBar
interlace awfully.当使用另一个
List
将navigationBarTitleDisplayMode
设置为.large
在堆栈中导航回视图时, List
内容和NavigationBar
非常交错。 And they probably might as well do whatever the navigationBarTitleDisplayMode
is set to.他们可能还不如做任何
navigationBarTitleDisplayMode
设置的事情。
Switching to listStyle(.plain)
in my case isn't a feasable option, because then in the detail view, I loose the beautifully animated built-in transitions to and from List's EditMode
, that seem to exist only in the grouped listStyle
varieties.在我的情况下切换到
listStyle(.plain)
不是一个可行的选择,因为然后在详细视图中,我失去了与 List 的EditMode
之间的精美动画内置转换,这似乎只存在于分组的listStyle
品种中。
Finally, after quite a few days of frustration I figured out that tableHeaderView
is the approach that works best for my problem - and of course, it works just as well to solve the original question.最后,经过几天的挫折后,我发现
tableHeaderView
是最适合我的问题的方法 - 当然,它同样适用于解决原始问题。 It's all in here ...:这一切都在这里......:
... and in this sentence: ...在这句话中:
"When assigning a view to this property [ie tableHeaderView
], set the height of that view to a nonzero value" “将视图分配给此属性 [即
tableHeaderView
] 时,将该视图的高度设置为非零值”
So I do like:所以我喜欢:
List {
// bla bla bla
}
.listStyle(.grouped)
.onAppear {
let tableHeaderView = UIView(frame: .zero)
tableHeaderView.frame.size.height = 1
UITableView.appearance().tableHeaderView = tableHeaderView
}
It's as simple as that.就这么简单。 Hope it might help you, too!
希望它也能帮助你!
extension View {
/// Clear tableview and cell color
func tableClearColor() {
let tableHeaderView = UIView(frame: .zero)
tableHeaderView.frame.size.height = 0.5
UITableView.appearance().tableHeaderView = tableHeaderView
}
}
List {
...
}
.headerTopPadding(padding: 0)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.