如何在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())
           }

       }
    }
}

此代码产生以下内容:

This code produces this:

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

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)

修饰符，可用于更改行本身的背景色.在此示例中，我选择清除"以隐藏按钮未完全覆盖的边缘.

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屋！