SwiftUI 初体验 6 实现复杂界面

原创

于 2019-10-03 13:59:59 发布 · 970 阅读

CC 4.0 BY-SA版权

这篇博客探讨了在SwiftUI中如何实现一个复杂的界面，特别是遇到List中嵌套ScrollView并包含NavigationLink的问题。作者指出，这种情况下NavigationLink无法正常工作，并建议使用替代方案。目标是创建一个列表，列表项可以横向滑动，头部有一个Banner区域。文章通过定义Item、Row和List的组件，详细说明了如何调整渲染模式、边缘边距和滚动方向来达到预期效果。

提示：如果List中嵌套ScrollView，而ScrollView包含NavigationLink，那么NavigationLink是不会导航成功的，有这类需求时，需要用其他方法。

首先看目标效果是实现一个列表，嵌套可以横向滑动的Row，头部是Banner（暂时占位，后面的章节实现）
在这里插入图片描述
定义最小的单位Item: renderingMode设置original是显示图像本身，resizable必须在frame修改前设置，padding可以调整item之间的位置关系

struct SpeciesItem: View {
   
   
    
    var data: Species
    
    var body: some View {
   
   
        VStack {
   
   
            data.image()
                .renderingMode(.original)
                .resizable()
                .frame(width: 100, height: 100, alignment: .center)
                .cornerRadius(15)

最低0.47元/天解锁文章