SwiftUI - 点击按钮更改 VStack 的背景颜色

Question

当我点击 OrderButton 时，所有 VStack 的背景颜色都变为灰色，然后像分配了点击事件一样返回。我怎样才能防止这种情况发生？

import SwiftUI

struct DrinkDetail : View {

    var drink: Drink

    var body: some View {

        List {

            ZStack (alignment: .bottom) {
                Image(drink.imageName)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Rectangle()
                    .frame(height: 80)
                    .opacity(0.25)
                    .blur(radius: 10)
                HStack {
                    VStack(alignment: .leading, spacing: 3) {
                        Text(drink.name)
                            .foregroundColor(.white)
                            .font(.largeTitle)
                        Text("It is just for $5.")
                            .foregroundColor(.white)
                            .font(.subheadline)
                    }
                    .padding(.leading)
                    .padding(.bottom)
                    Spacer()
                }

            }
            .listRowInsets(EdgeInsets())

            VStack(alignment: .leading) {
                Text(drink.description)
                    .foregroundColor(.primary)
                    .font(.body)
                    .lineLimit(nil)
                    .lineSpacing(12)

                HStack {
                    Spacer()
                    OrderButton()
                    Spacer()
                }
                .padding(.top, 50)
                .padding(.bottom, 50)

            }
            .padding(.top)
        }
        .edgesIgnoringSafeArea(.top)
        .navigationBarHidden(true)
    }
}


struct OrderButton : View {
    var body: some View {
        Button(action: {}) {
            Text("Order Now")
        }
        .frame(width: 200, height: 50)
        .foregroundColor(.white)
        .font(.headline)
        .background(Color.blue)
        .cornerRadius(10)
    }
}


#if DEBUG
struct DrinkDetail_Previews : PreviewProvider {
    static var previews: some View {
        DrinkDetail(drink: LoadModule.sharedInstance.drinkData[3])
    }
}
#endif

通过使用 ScrollView 并添加更多参数来自动调整 Text 的大小解决了这个问题：

        ScrollView(.vertical, showsIndicators: false) {

            ZStack (alignment: .bottom) {
                Image(drink.imageName)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Rectangle()
                    .frame(height: 80)
                    .opacity(0.25)
                    .blur(radius: 10)
                HStack {
                    VStack(alignment: .leading, spacing: 3) {
                        Text(drink.name)
                            .foregroundColor(.white)
                            .font(.largeTitle)
                        Text("It is just for $5.")
                            .foregroundColor(.white)
                            .font(.subheadline)
                    }
                    .padding(.leading)
                    .padding(.bottom)
                    Spacer()
                }

            }
            .listRowInsets(EdgeInsets())

            VStack(alignment: .leading) {
                Text(drink.description)
                    .foregroundColor(.primary)
                    .font(.body)
                    .lineLimit(nil)
                    .fixedSize(horizontal: false, vertical: true)
                    .lineSpacing(12)
                    .padding(Edge.Set.leading, 15)
                    .padding(Edge.Set.trailing, 15)

                HStack {
                    Spacer()
                    OrderButton()
                    Spacer()
                }
                .padding(.top, 50)
                .padding(.bottom, 50)

            }
            .padding(.top)
        }
        .edgesIgnoringSafeArea(.top)
        .navigationBarHidden(true)

Answer 1

您想要获得的用户界面是什么？因为，从您的示例来看，List 似乎没有必要。确实，List 是：

一个容器，显示排列在单个列中的数据行。

如果您真的不需要List，您可以将其替换为VStack（如果您的内容必须适合屏幕）或ScrollView（如果您的内容高于屏幕）。替换 List 将解决您的问题，该问题取决于其单元格的列表选择样式。

如果您需要使用List 视图，另一种方法是将SceneDelegate 中的单元格的选择样式设置为none（但这会影响您在项目中的所有List）这个方式：

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    let contentView = ContentView() //replace this with your view

    if let windowScene = scene as? UIWindowScene {
        UITableViewCell.appearance().selectionStyle = .none

        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = UIHostingController(rootView: contentView)
        self.window = window
        window.makeKeyAndVisible()
    }
}