8ce04337ff9af8798c6772d4ab9aed97
SwiftUI 界面大全之宠物领养管理App(教程含源码)

实战需求

SwiftUI 界面大全之宠物领养管理App

本文价值与收获

看完本文后,您将能够作出下面的界面

SwiftUI 界面大全之宠物领养管理App

SwiftUI 界面大全之宠物领养管理App

SwiftUI 界面大全之宠物领养管理App

SwiftUI 界面大全之宠物领养管理App

看完本文您将掌握的技能

1、首页内容filter筛选
2、自定义列表内容
3、scrollview 设置滚动背景
4、图文混合


实战代码

1、主界面

import SwiftUI

struct HomeView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    ToolbarView()

                    LocationHeaderView()

                    ScrollView (.horizontal, showsIndicators: false) {
                        FiltersView()
                    }

                    ForEach(ModelData.pets.indices) { i in
                        let pet = ModelData.pets[i]
                        NavigationLink(destination:DetailsView(pet: pet)) {
                            PetListItemView(
                                petImageName: pet.picture,
                                mapColor: (i.isMultiple(of: 2)
                                ? Color.yellowBackground
                                : Color.pinkBackground).opacity(0.5))
                        }
                    }
                }
            }
            .navigationBarHidden(true)
        }
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

2、filter组件
```
import SwiftUI

struct FiltersView: View {
var body: some View {
HStack(spacing: 25) {
Button(action: {}) {
Image(systemName: "slider.horizontal.3")
.foregroundColor(Color.accentColor)
.font(.system(size: 20))
}

        Button(action: {}) {
            Text("Cats")
        }
        .buttonStyle(CategoryButtonStyle())

        Button(action: {}) {
            Text("Dogs")
        }
top Created with Sketch.