I'm trying to build a very simple app in SwiftUI. The first thing I want is my view to be full screen, edge to edge. Somewhere the app is adding some padding and I can't figure it out.
Here's my code:
struct ContentView: View {
@ObservedObject var fetcher = ArticleService()
var body: some View {
List {
ForEach(fetcher.articles) { article in
VStack (alignment: .leading) {
Text(article.section)
.foregroundColor(.red)
.textCase(.uppercase)
Text(article.title)
.font(.system(size: 20))
.fontWeight(.semibold)
UrlImageView(article.image)
.padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))
.frame(maxWidth: .infinity)
Text(article.author)
.font(.system(size: 11))
.foregroundColor(Color.gray)
}
.frame(maxWidth: .infinity)
.background(Color.white)
}
.listRowBackground(Color.gray)
.frame(maxWidth: .infinity)
}
}
And this is the result:
Why is each element in the list not spanning the entire screen? Where is the padding coming from?
You need list row background instead
var body: some View {
List {
ForEach(fetcher.articles) { article in // << needs ForEach !!
VStack (alignment: .leading) {
Text(article.section)
.foregroundColor(.red)
.textCase(.uppercase)
Text(article.title)
.font(.system(size: 20))
.fontWeight(.semibold)
UrlImageView(article.image)
.padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))
Text(article.author)
.font(.system(size: 11))
.foregroundColor(Color.gray)
}
.frame(maxWidth: .infinity)
}.listRowBackground(Color.red) // << here !!
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.