Watchkit 快捷方式列表样式 我正在编写一个Apple Watch应用程序,我想在设置菜单中创建一个列表,其中列表中间的行是矩形,而顶部和底部是圆形矩形。这是一种列表样式吗

Watchkit 快捷方式列表样式 我正在编写一个Apple Watch应用程序,我想在设置菜单中创建一个列表,其中列表中间的行是矩形,而顶部和底部是圆形矩形。这是一种列表样式吗,watchkit,swiftui,Watchkit,Swiftui,否,在SwiftUI中,配置列表非常有限。 我建议您尝试使用ScrollView创建自己的自定义列表视图。这是可能的,但需要使用GeometryReader来处理圆角绘制 有一篇很好的博文解释了如何使视图的某些角变圆。这是代码 struct RoundedCorners:视图{ 变量颜色:颜色=.blue 变量tl:CGFloat=0.0 var tr:CGFloat=0.0 变量bl:CGFloat=0.0 变量br:CGFloat=0.0 var body:一些观点{ GeometryRea

否,在SwiftUI中,配置列表非常有限。
我建议您尝试使用ScrollView创建自己的自定义列表视图。

这是可能的,但需要使用
GeometryReader
来处理圆角绘制

有一篇很好的博文解释了如何使视图的某些角变圆。这是代码

struct RoundedCorners:视图{
变量颜色:颜色=.blue
变量tl:CGFloat=0.0
var tr:CGFloat=0.0
变量bl:CGFloat=0.0
变量br:CGFloat=0.0
var body:一些观点{
GeometryReader{中的几何体
路径{Path in
设w=几何体。尺寸。宽度
设h=几何体、尺寸、高度
//确保我们没有超过矩形的大小
设tr=min(min(自tr,h/2),w/2)
设tl=min(min(self.tl,h/2),w/2)
设bl=min(min(self.bl,h/2),w/2)
设br=min(min(self.br,h/2),w/2)
移动路径(到:CGPoint(x:w/2.0,y:0))
addLine(to:CGPoint(x:w-tr,y:0))
添加弧(中心:CGPoint(x:w-tr,y:tr),半径:tr,起始角:角度(度:-90),终止角:角度(度:0),顺时针:假)
addLine(to:CGPoint(x:w,y:h-br))
添加弧(中心:CGPoint(x:w-br,y:h-br),半径:br,起始角:角度(度:0),终止角:角度(度:90),顺时针:假)
路径添加线(到:CGPoint(x:bl,y:h))
添加弧(中心:CGPoint(x:bl,y:h-bl),半径:bl,起始角:角度(度:90),终止角:角度(度:180),顺时针:假)
addLine(到:CGPoint(x:0,y:tl))
addArc(中心:CGPoint(x:tl,y:tl),半径:tl,起始角:角度(度:180),终止角:角度(度:270),顺时针:false)
}
.fill(self.color)
}
}
}
然后我们可以举一个小例子。通过获取项目数组,我们可以创建一个
列表
。我们需要这些项目的索引,以便我们能够区分哪个项目是第一个(索引
0
)和最后一个(索引
count-1
)。
.listRowBackground
修饰符允许我们设置行的背景,因此我们将使用它来设置行的视图

我们创建一个helper函数
createRoundedCorners
,它将获取行的索引和存在的行数。这将返回一个
RoundedCorrners
视图,其中第一行的左上角和右上角将被舍入,而最后一行的左下角和右下角也将被舍入

struct ContentView:View{
让物品=[“上次使用后2分钟内”,
“上次使用后1小时内”,
“始终”]
var body:一些观点{
名单{
ForEach(0..圆角){
开关指数{
案例0:
返回圆角(颜色:蓝色,tl:15,tr:15,bl:0,br:0)
案例(计数-1):
返回圆角(颜色:蓝色,tl:0,tr:0,bl:15,br:15)
违约:
返回圆角(颜色:蓝色,tl:0,tr:0,bl:0,br:0)
}
}
}
这将得到以下结果

在顶部列出:

在底部列出:


顺便说一句,下面是如何在Apple Watch上截图:。