如何在 WatchOS 上为 SwiftUI 列表中的行设置样式? [英] How to style rows in SwiftUI List on WatchOS?

问题描述

我正在使用 SwiftUI，并试图在 WatchOS 的列表视图中创建一个带有自定义 .buttonStyle 的按钮列表，但无法让它工作.目前这是否可行，如果是，如何实现?

I'm working with SwiftUI and is trying to make a list of buttons with custom .buttonStyle inside a List view on WatchOS, but can't get it to work. Is this even currently possible, and if so, how?

示例项目:

struct Superhero: Identifiable {
    var id = UUID()
    var name: String
}

var superheroes = [
    Superhero(name: "Batman"),
    Superhero(name: "Superman"),
    Superhero(name: "Wonder Woman"),
    Superhero(name: "Aquaman"),
    Superhero(name: "Green Lantern"),
    Superhero(name: "The Flash")
]

struct SuperheroButtonStyle: ButtonStyle {

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
        .frame(minWidth: 0, maxWidth: .infinity)
        .foregroundColor(.white)
        .background(configuration.isPressed ? Color.white.opacity(0.95) : .green)
        .cornerRadius(13.0)
  }
}

struct SuperHeroesView: View{
    var body: some View {
        List {

            ForEach(superheroes) { superhero in
                Button(action: {
                    print(superhero.name)
                }){
                    Text(superhero.name)
                }.buttonStyle(SuperheroButtonStyle())
           }

       }
    }
}

这段代码产生了这个:

相反，我希望按钮看起来更像这样:

Instead, I want the buttons to look more like this:

在最后一个示例中，我使用的是 ScrollView 而不是 List，这意味着我在滚动列表时没有获得行缩小和消失的漂亮动画.

In this last example, I'm using ScrollView instead of List which means I'm not getting the nice animation of rows shrinking and fading away when scrolling through the list.

我试过使用负填充，但这不能给我更大的圆角半径(比默认的圆角更多)而且看起来不太好.

I've tried playing with negative padding, but that can't give me a bigger corner radius (more round corners than the default) and doesn't really look like good.

那么有没有一种方法可以正确地将 ButtonStyle 应用于列表视图中的项目，包括具有自定义的cornerRadius?

So is there a way to apply a ButtonStyle on items in a List view correctly, including having a custom cornerRadius?

或者是否有其他方法可以在保持 List 附带的动画的同时更好地控制行的外观?

Or is there some other way of getting more control of the way the rows look while still keeping the animation that comes with List?

推荐答案

我不知道你是否已经想到了这一点，但我最终使用了

I don't know if you've figured this out yet or not, but I ended up using

List {

        ForEach(superheroes) { superhero in
            Button(action: {
                print(superhero.name)
            }){
                Text(superhero.name)
            }
            .buttonStyle(SuperheroButtonStyle())
            .listRowInsets(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))
       }

   }

像这样将我的按钮的边缘扩展到列表的边缘:

to extend the edges of my buttons to the edge of the list like this:

您也可以添加修饰符

.environment(\.defaultMinListRowHeight, 20)

到列表本身以允许行高缩小到您想要的大小.我为这个例子选择了 20:

to the List itself to allow the rows height to scale down to the size you want. I chose 20 for this example:

最后还有一个

.listRowPlatterColor(.clear)

修饰符可用于更改行本身的背景颜色.我在这个例子中选择了 clear 来隐藏按钮没有完全覆盖的边缘.

modifier you can use to change the background color of the row itself. I chose clear for this example to hide the edges that aren't fully covered by the button.

这篇关于如何在 WatchOS 上为 SwiftUI 列表中的行设置样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！