SwiftUI NavigationView和List的使用

1. 基本应用

稍微了解一点SwiftUI的都知道,SwiftUI中一些控件的子视图数量(⚠️这里说的数量是指写成特别死的一个一个子视图)是有限制的,一般不超过10
例如:
VStack
HStack
ZStack
Group
List
未来的容器

本博客就是一个记录关于List中子视图数量超过10个的解决方案

我这里结合了NavigationLink的使用,一般在网上找到的都是同一个视图循环,向里面塞内容,我这里有点特殊,每一个导航进去的新视图都是一个单独swift文件,实现的时候遇到的问题是每一个视图不知道用什么类型,后来查了很多地方才找到解决方法。使用AnyView类型的擦除包装器,另外创建对象的时候需要显式使用AnyView

//
//  VLAPUIView.swift
//  SwiftUI_Base
//
//  Created by 先森 L on 2021/5/9.
//

import SwiftUI
struct MyLink: Identifiable{
    var id = UUID()
    let linkName: String
    //下面使用AnyView类型的擦除包装器
    let linkView: AnyView
}
struct NLinks{
    var links: [MyLink]
}

struct VLAPUIView: View {
    var nLinks = NLinks(links: [
        //下面创建对象是需要显式使用AnyView
        MyLink(linkName: "Stacks 和 Lazy Stacks", linkView: AnyView(StacksUIView())),
        MyLink(linkName: "Grids", linkView: AnyView(GridsUIView())),
        MyLink(linkName: "Displaying Data in Lists", linkView: AnyView(DataInListsUIView())),
        MyLink(linkName: "Lists and Scroll Views", linkView: AnyView(ListsAndScrollUIView())),
        MyLink(linkName: "Container Views(Form)", linkView: AnyView(CV_FormUIView())),
        MyLink(linkName: "Container Views(Group)", linkView: AnyView(CV_GroupUIView())),
        MyLink(linkName: "Container Views(GroupBox)", linkView: AnyView(CV_GroupBoxUIView())),
        MyLink(linkName: "Container Views(Section)", linkView: AnyView(CV_SectionUIView())),
        MyLink(linkName: "Hierarchical Views", linkView: AnyView(HierarchicalUIView())),
        MyLink(linkName: "Architectural Views", linkView: AnyView(ArchitecturalUIView())),
        MyLink(linkName: "Presentations", linkView: AnyView(PresentationsUIView()))
    ])
    
    var body: some View {
        List{
            ForEach(nLinks.links){link in
                NavigationLink(
                    destination: link.linkView,
                    label: {
                        Text(link.linkName)
                    })
            }
        }
        .navigationBarTitle(Text("View Layout And Pressentation"))
    }
}

struct VLAPUIView_Previews: PreviewProvider {
    static var previews: some View {
        VLAPUIView()
    }
}

2. 禁用NavigationLink、Button默认点击高亮效果

  • 自己写一个Button样式
struct StaticButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
    }
}
  • 然后在NavigationLinkButton上设置buttonStyle
.buttonStyle(StaticButtonStyle())

注:
禁用NavigationLink、Button默认点击高亮效果】部分是本人遇到此类问题时从网上找到并整理到自己的博客中的。
原文链接:https://blog.csdn.net/sunzeshan/article/details/113408586

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值