首页 > 解决方案 > NavigationLink 似乎只占用很小的空间

问题描述

我正在使用 NavigatonView 和 NavigationLink,我的观点是这样的:

ScrollView{
    VStack{
        // MARK: - Survey and tips Navigation
        HStack(spacing:9){
            NavigationLink(destination:Container.sharedContainer.resolve(SurveyListView.self,argument: $VM.occurrences)!){
                iconHome(image: "img-survey", icon: "icon-survey", text: "surveys_upper_case")}
            NavigationLink(destination:Container.sharedContainer.resolve(SurveyListView.self,argument: $VM.occurrences)!){
                iconHome(image: "img-tip", icon: "icon-tip", text: "tips_upper_case")}

        }
        .frame(maxWidth: .infinity,maxHeight: .infinity)
    }
    .padding(.horizontal,37)
    .background(Color.red)
}

iconHome 是另一个实现视图协议的结构:

struct iconHome : View{

    var image:String
    var icon:String
    var text:LocalizedStringKey
    var body : some View{
            GeometryReader{ geometry in
                ZStack{
                    Image(self.image)
                        .renderingMode(.original)
                        .resizable()
                        .frame(width: geometry.size.width ,height:geometry.size.width)
                        .aspectRatio(contentMode: .fit)
                        .cornerRadius(20)
                    VStack{
                        Image(self.icon)
                            .renderingMode(.original)
                            .resizable()
                            .frame(width: geometry.size.width / 5,height:geometry.size.width / 5 )
                            .aspectRatio(contentMode: .fit)
                        Text(self.text)
                            .foregroundColor(.white)
                            .modifier(OpenSansBoldModifier(fontSize: 12))
                    }
                }
                .shadow(radius: 5, x: 5, y: 5)
        }
    }
}

我有一个奇怪的结果: 我的结果

我不知道为什么,但我的 HStack 包含我的两个导航链接只有红色矩形高......所以很难点击他......关于为什么 HStack 没有好的高的任何想法?

标签: iosswiftswiftui

解决方案


似乎缺少填充模式geometry

  GeometryReader{ geometry in
   ....
   }.aspectRatio(contentMode: .fill)

推荐阅读