主页 / coding / 问题 / 77955779
Accepted
Swift
Asked: 2024-02-07 22:55:48 +0800 CST

SwiftUI 的 UI 设计面临的问题

  • 772

我在使用 SwiftUI 进行 UI 设计时一直遇到问题。我觉得 UIKit 比 SwiftUI 更好一些，因为使用 SwiftUI 我无法在每个堆栈单独计算空间时给出适当的空间。我不明白如何为其相邻元素提供空间。

我的主要问题是从其相邻元素获取空间，我们是否需要提供前导空间来减去其相邻元素宽度区域？

例如，我已将图像堆栈前导、顶部指定为 20，宽度和高度指定为 100。现在，如果我想添加指向该图像的标签，那么我是否需要将标签前导空格指定为 -100？空格如何提供正确的前导、尾随、顶部、底部？

我在这里使用 UIKit 做了这样的简单设计，如果您只将顶部蓝色视图人物图像置于顶部并导致 20 个，其余标签和图标应该导致该图像视图达到 15 个

在此输入图像描述

现在我只尝试了 SwiftUI 中相同的顶部蓝色设计：我是 UI 新手，所以我尝试了这种方式。如果有任何捷径请告诉我。

如果有任何不必要的代码，请告诉我，并指导我如何使用 SwiftUI 编写简短的代码。

您能否指导我如何将堆栈相互嵌入。有没有什么模式可以将一个模式添加到另一个模式中？

通过这段代码，我也没有得到正确的设计。请指导我修复它。

struct SecondView: View {
    var body: some View {
        ZStack{
            Color.yellow.ignoresSafeArea()
            
            ScrollView{
                VStack{
                    
                    ZStack {
                        Color.blue // Background color of the view
                        
                        VStack{
                            HStack (){
                                Image(systemName: "person.circle.fill")
                                
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 70, height: 70)
                                    .padding(.leading, 10)
                                    .padding(.top, 20)
                                
                                Spacer()
                            }
                            
                            Spacer()
                        }
                        
                        VStack(spacing: 10){
                            
                            Text("Jhon Thomas").foregroundColor(Color.white)
                                .padding(.bottom, 10).font(.system(size: 20))
                            
                            HStack (){
                                Image(systemName: "phone.fill")
                                
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 17, height: 17)
                                    .padding(.leading, 10)
                                Text("0000000000").foregroundColor(Color.white)
                            }
                            HStack (){
                                Image(systemName: "bag.fill")
                                
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 17, height: 17)
                                    .padding(.leading, 10)
                                Text("Singer").foregroundColor(Color.white)
                            }
                            HStack (){
                                Image(systemName: "location.fill")
                                
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 17, height: 17)
                                    .padding(.leading, 10)
                                Text("test loc").foregroundColor(Color.white)
                                Spacer()
                                Image(systemName: "map.fill")
                                
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 17, height: 17)
                                    .padding(.leading, 10)
                                Text("Jhon Thomas").foregroundColor(Color.white)
                            }
                        }.padding()
                        //  .padding(.leading, -80)
                     }.padding()
                     .frame(height: 200)
                }
            }
        }
    }
}

SwiftUI 仅蓝色设计：如何像上面的设计一样使所有名称和图标保持相同的对齐方式，并且仅将 15 个引导到 imageview？

在此输入图像描述

user-interface

1 个回答

  1. Best Answer

    我是来帮忙的！首先，我建议您学习 SwiftUI 的基础知识，请访问此处：SwiftUI 简介，以及此处：SwiftUI 教程。现在，处理手头的问题。我开始使用 SwiftUI 进行 iOS 开发，相信我，现在我已经学习并每天使用 UIKit 进行工作，没有比这更糟糕的事情了！关于您的代码，还有很多可以改进的地方。我借此机会编写了一些自定义修饰符，以避免一遍又一遍地对图像重复相同的修饰符。我删除了冗余堆栈，为那些重复的 HStack 创建了一个可重复使用的视图。我现在要向您展示：

    struct SecondView: View {
    var body: some View {
        ZStack {
            
            // This is ok but you can use .background() modifier too
            //Color.yellow.ignoresSafeArea()
            
            ScrollView {
                
                HStack {
                    //Color.white // Background color of the view
                    
                    VStack {
                        /// Alignment top to keep the imafge
                        HStack(alignment: .top) {
                            Image(systemName: "person.circle.fill")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .modifier(ImageModifier(width: 70, height: 79))
                                .padding(.top, 20)
                            
                            /// Removed this to avoid pushing the texts and icon to the right
                            //Spacer()
                            
                            /// I used this line to show you the separations of two
                            Rectangle()
                                .background(.red)
                                .frame(width: 1)
                        }
                        
                        /// I used the frame modifier instead
                        //Spacer()
                    }
                    /// I used this instead of the Spacer above to achieve the same result
                    .frame(maxHeight: .infinity, alignment: .top)
                    
                    VStack(spacing: 10) {
                        
                        Group {
                            
                            Text("Jhon Thomas")
                            //.foregroundColor(Color.white)
                                /// Another way of setting padding. I had to use padding leading 10 to match the RowItems
                                .padding(EdgeInsets(top: 0, leading: 10, bottom: 10, trailing: 0))
                                .font(.system(size: 20))
                            
                            RowItem(text: "000000000", icon: "phone.fill")
                            
                            RowItem(text: "Singer", icon: "bag.fill")
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                        
                        HStack {
                            RowItem(text: "Jhon Thomas", icon: "location.fill")
                            
                            Spacer()
                            
                            RowItem(text: "Jhon Thomas", icon: "map.fill")
                            
                            
                        }
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                }
                /// Padding placed here (before the frame) will push views to the inside. Modifier order matters in SwiftUI.
                .padding()
                .frame(height: 200)
                /// Padding placed here will make this view larger. The default padding value is 16.
                //.padding()
                .background(.white)
                .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
        .background(.yellow)
    }
    
    @ViewBuilder
    private func RowItem(text: String, icon: String) -> some View {
        HStack {
            Image(systemName: icon)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .modifier(ImageModifier())
            
            Text(text)
                .foregroundStyle(.black)
        }
    }
    
}

    这是图像的自定义修饰符：

    struct ImageModifier: ViewModifier {
    
    var width: CGFloat = 17
    var height: CGFloat = 17
    
    func body(content: Content) -> some View {
        content
            .frame(width: width, height: height)
            .padding(.leading, 10)
    }
}

    当然，这是为了让您了解如何在 SwiftUI 中完成任务。如果您现在知道如何使用它，您就可以非常非常快地构建 UI 。我的观点是，它为您提供了几乎无限的可能性来控制屏幕上的每个像素。

    详细介绍我所做的事情，我用框架修饰符替换了 Spacers，指定 maxWidth 或 maxHeight 以占用所有可用空间。框架修改器还允许您指定对齐方式。另外，除非您的目标是 iOS 14，否则您可以使用 foregroundStyle 来修改视图的颜色。对于背景，你可以做基本相同的事情，还有一个背景修改器。背景修改器用于在其应用的视图下方绘制内容，而覆盖修改器则在顶部绘制。您可以使用@ViewBuilder宏创建返回视图的函数。我在这里有一个谈论它的答案：ViewBuilder。

    有太多的话要说，但你能做的最好的事情就是亲自动手并大量编码！希望我的回答对朋友有用！

    • 1

相关问题