SwiftUI列表中的自定义按钮 [英] Custom Button in SwiftUI List

问题描述

列表中的SwiftUI自定义按钮

我正在尝试在SwiftUI列表中创建一个自定义按钮.我希望它具有蓝色背景和白色文本，并且重要的是要保持蓝色并在按下时达到50％的不透明度，而不是默认的灰色.

I'm trying to create a custom button in a SwiftUI List. I want it to have a blue background with white text, and importantly, to remain blue and go to 50% opacity when pressed, not the default grey.

我尝试使用自定义的ButtonStyle，但是当我这样做时，按钮的可点击区域被减小为仅标签本身.如果我点击单元格的任何其他部分，颜色不会改变.如果我删除ButtonStyle，则在单元格的任意位置轻按即可

I tried using a custom ButtonStyle, but when I do so, the tappable area of the button is reduced to just the label itself. If I tap any other part of the cell, the colour doesn't change. If I remove the ButtonStyle, tapping anywhere on the cell works

如何解决此问题，以便获得自定义颜色，包括点击时的颜色，但整个单元仍可轻敲?

How can I fix this so that I get my custom colours, including the colour when tapped, but the whole cell is still tappable?

import SwiftUI

struct BlueButtonStyle: ButtonStyle {

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
        .font(.headline)
        .foregroundColor(configuration.isPressed ? Color.white.opacity(0.5) : Color.white)
        .listRowBackground(configuration.isPressed ? Color.blue.opacity(0.5) : Color.blue)
  }
}

struct ExampleView: View {

    var body: some View {
        NavigationView {
            List {
                Section {
                    Text("Info")
                }

                Section {
                    Button(action: {print("pressed")})
                    {
                        HStack {
                            Spacer()
                            Text("Save")
                            Spacer()
                        }

                    }.buttonStyle(BlueButtonStyle())
                }
            }
            .listStyle(GroupedListStyle())
            .environment(\.horizontalSizeClass, .regular)
            .navigationBarTitle(Text("Title"))
        }
    }
}

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView()
    }
}

推荐答案

在标准变体中，List会拦截并处理轻敲检测的内容区域，在您的自定义样式中，默认情况下，它是由不透明区域定义的，该区域仅是文本中的您的情况，因此更正的样式是

In standard variant List intercepts and handles content area of tap detection, in your custom style it is defined, by default, by opaque area, which is only text in your case, so corrected style is

通过Xcode 11.4/iOS 13.4测试

Tested with Xcode 11.4 / iOS 13.4

struct BlueButtonStyle: ButtonStyle {

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
        .font(.headline)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
        .contentShape(Rectangle())
        .foregroundColor(configuration.isPressed ? Color.white.opacity(0.5) : Color.white)
        .listRowBackground(configuration.isPressed ? Color.blue.opacity(0.5) : Color.blue)
  }
}

和用法，仅

Button(action: {print("pressed")})
{
    Text("Save")
}.buttonStyle(BlueButtonStyle())

甚至

Button("Save") { print("pressed") }
    .buttonStyle(BlueButtonStyle())

这篇关于SwiftUI列表中的自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！