英文:
How to remove/fix extra pointed corners in images?
问题
我使用SwiftUI创建了这个Facebook HomeView。我在故事视图的图像上遇到了一些问题。请查看截图。如何移除/修复图像中不同的尖角？
ZStack{
Color(.secondarySystemGroupedBackground)
ScrollView(.vertical){
VStack{
ScrollView(.horizontal,showsIndicators: false){
HStack(spacing:3){
ForEach(stoires,id:\.self) { name in
Image(name)
.resizable()
.aspectRatio( contentMode: .fill)
.frame(width: 140,height: 199,alignment: .center)
.background(Color.red)
.clipped()
.overlay(
RoundedRectangle(cornerRadius: 16)
.stroke(Color(.systemGray5), lineWidth: 4)
)
}
}.padding()
}
}
}
}
英文:
I have created this Facebook homeView using swiftUI. I have some issues with the stories View image. See the screenshot. How to remove/fix different pointed corners in images?
ZStack{
Color(.secondarySystemGroupedBackground)
ScrollView(.vertical){
VStack{
ScrollView(.horizontal,showsIndicators: false){
HStack(spacing:3){
ForEach(stoires,id:\.self) { name in
Image(name)
.resizable()
.aspectRatio( contentMode: .fill)
.frame(width: 140,height: 199,alignment: .center)
.background(Color.red)
.clipped()
.overlay(
RoundedRectangle(cornerRadius: 16)
.stroke(Color(.systemGray5), lineWidth: 4)
)
}
}.padding()
}
}
}
}
答案1
得分: 1
尝试使用遮罩层时，有时候可能无法获得适当的结果。
尝试在尝试添加圆角边框时使用插图：
.overlay(
RoundedRectangle(cornerRadius: 24)
.inset(by: 5) // 插图值应与 .stroke 中的 lineWidth 相同
.stroke(.blue, lineWidth: 5)
)
英文:
when try to use overlay then some time you can't get appropiate result.
try to use inset when trying to add rounded border
.overlay(
RoundedRectangle(cornerRadius: 24)
.inset(by: 5) // inset value should be same as lineWidth in .stroke
.stroke(.blue, lineWidth: 5)
)
答案2
得分: 0
struct StoriesView: View {
let stories: [String]
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 3) {
ForEach(stories, id: \.self) { name in
Image(name)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 140, height: 199, alignment: .center)
.background(Color.red)
.clipped()
.cornerRadius(20)//<-- add this cornerRadius
.overlay(
RoundedRectangle(cornerRadius: 20)//<-- add this cornerRadius
.stroke(Color(.systemGray5), lineWidth: 5)
)//<-- add this cornerRadius
.padding(.trailing, 4)//<-- adding nice padding
}
}.padding()
Spacer()
}
}
}
英文:
struct StoriesView: View {
let stoires: [String]
var body: some View {
ScrollView(.horizontal,showsIndicators: false) {
HStack(spacing:3){
ForEach(stoires,id:\.self) { name in
Image(name)
.resizable()
.aspectRatio( contentMode: .fill)
.frame(width: 140,height: 199,alignment: .center)
.background(Color.red)
.clipped()
.cornerRadius(20)//<-- add this cornerRadius
.overlay(
RoundedRectangle(cornerRadius: 20)//<-- add this cornerRadius
.stroke(Color(.systemGray5), lineWidth: 5)
)//<-- add this cornerRadius
.padding(.trailing,4)//<-- adding nice padding
}
}.padding()
Spacer()
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论