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

Posted 2023-02-24

【中文标题】SwiftUI - 点击按钮更改 VStack 的背景颜色

【英文标题】：SwiftUI - Tapping a Button changes VStack's background color

【发布时间】：2019-09-22 10:54:34

【问题描述】：

当我点击 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)

【参考方案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()
    

【讨论】：

是的。我只想制作一个详细信息页面。所以，使用ScrollView(.vertical, showsIndicators: false) 是更合乎逻辑的方式。 Text 需要更多参数。我将为其他人添加以下问题的更改。也很高兴知道防止该选择问题的不同解决方案。谢谢。