SwiftUI

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 .")
                            .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 .")
                            .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

您想要得到的 UI 是什么？因为，从您的示例来看， List 似乎不是必需的。事实上，List 是：

A container that presents rows of data arranged in a single column.

如果您真的不需要 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()
    }
}

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

SwiftUI - Tapping a Button changes VStack's background color

swiftui-list