Question

当我点击OrderButton时，所有VStack的背景颜色都变为灰色，然后像分配的click事件一样转回。我该如何预防？

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

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

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

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

如果您需要使用List视图，则可以将SceneDelegate中的单元格的选择样式设置为none（但这会影响您的所有{{ 1}}在项目中）：

List

SwiftUI-轻按一个按钮即可更改VStack的背景色

1 个答案: