我正在编写一个Apple Watch应用,我想在“设置”菜单中创建一个与此列表相同的列表,其中列表中间的行是矩形,而顶部和底部是圆角矩形。这是一种列表样式吗?
SwiftUI列表样式
•
问答
qq290868393 回答:SwiftUI列表样式
可以这样做,尽管它需要使用GeometryReader
来处理圆角。
swiftui-lab.com上有一篇很棒的文章,解释了如何使视图的某些角变圆。这是代码。
struct RoundedCorners: View {
var color: Color = .blue
var tl: CGFloat = 0.0
var tr: CGFloat = 0.0
var bl: CGFloat = 0.0
var br: CGFloat = 0.0
var body: some View {
GeometryReader { geometry in
Path { path in
let w = geometry.size.width
let h = geometry.size.height
// Make sure we do not exceed the size of the rectangle
let tr = min(min(self.tr,h/2),w/2)
let tl = min(min(self.tl,w/2)
let bl = min(min(self.bl,w/2)
let br = min(min(self.br,w/2)
path.move(to: CGPoint(x: w / 2.0,y: 0))
path.addLine(to: CGPoint(x: w - tr,y: 0))
path.addArc(center: CGPoint(x: w - tr,y: tr),radius: tr,startAngle: Angle(degrees: -90),endAngle: Angle(degrees: 0),clockwise: false)
path.addLine(to: CGPoint(x: w,y: h - br))
path.addArc(center: CGPoint(x: w - br,y: h - br),radius: br,startAngle: Angle(degrees: 0),endAngle: Angle(degrees: 90),clockwise: false)
path.addLine(to: CGPoint(x: bl,y: h))
path.addArc(center: CGPoint(x: bl,y: h - bl),radius: bl,startAngle: Angle(degrees: 90),endAngle: Angle(degrees: 180),clockwise: false)
path.addLine(to: CGPoint(x: 0,y: tl))
path.addArc(center: CGPoint(x: tl,y: tl),radius: tl,startAngle: Angle(degrees: 180),endAngle: Angle(degrees: 270),clockwise: false)
}
.fill(self.color)
}
}
}
然后我们可以举一个小例子。接受一系列项,我们可以创建一个List
。我们将需要这些项目的索引,以便我们可以知道哪个项目是第一个(0
的索引)和最后一个(count - 1
的索引)。 .listRowBackground
修饰符允许我们设置行的背景,因此我们将使用它来设置视图。
我们创建一个辅助函数createRoundedCorners
,该函数将获取行的索引和存在的行数。这将返回一个RoundedCorrners
视图,其中第一行的左上角和右上角将被四舍五入,最后一行的左下角和右下角也类似。
struct ContentView: View {
let items = ["Within 2 Minutes of Last Use","Within 1 Hour of Last Use","Always"]
var body: some View {
List {
ForEach(0..<items.count) { index in
Text(self.items[index]).font(.system(size: 24))
.listRowBackground(self.createRoundedCorners(at: index,count: self.items.count))
}
}
}
/// This function creates rounded corners for the first and last items in an array
func createRoundedCorners(at index: Int,count: Int) -> RoundedCorners {
switch index {
case 0:
return RoundedCorners(color: .blue,tl: 15,tr: 15,bl: 0,br: 0)
case (count - 1):
return RoundedCorners(color: .blue,tl: 0,tr: 0,bl: 15,br: 15)
default:
return RoundedCorners(color: .blue,br: 0)
}
}
}
这给出了以下结果
在顶部列出:
在底部列出:
,不,在SwiftUI中,列表的配置非常有限。 我建议您尝试使用ScrollView制作自己的自定义类似列表的视图。