NavigationLink 似乎只占用很小的空间

Posted 2023-02-25

【中文标题】NavigationLink 似乎只占用很小的空间

【英文标题】：NavigationLink seems to take only a fiew space

【发布时间】：2019-12-24 15:44:37

【问题描述】：

我正在使用 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 没有好的高的任何想法？

【参考方案1】：

geometry 似乎缺少填充模式

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