文章目录

• • SizeCategory
  • PreviewDevice
  • ColorScheme-LightAndDark
  • Context Menu
  • Debug

---

SizeCategory

---

struct ContentView : View
{
    var body: some View
    {
        VStack
        {
            Text("Dynamic Type sizes")
                .font(.system(size: 36))
            
            Text("Dynamic Type sizes")
        }
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider
{
    static var previews: some View
    {
        VStack
        {
            Spacer()

            ContentView()
                .environment(\.sizeCategory,
                             .extraSmall)

            Spacer()

            ContentView()

            Spacer()

            ContentView()
               .environment(\.sizeCategory,
                            .accessibilityExtraExtraExtraLarge)

            Spacer()
        }
    }
}
#endif

---

PreviewDevice

struct ContentView : View
{
    var body: some View
    {
        VStack
        {
            Text("Dynamic Type sizes")
                .font(.system(size: 48))
            
            Text("Dynamic Type sizes")
        }
        
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider
{
    static var previews: some View
    {
        Group
        {
           ContentView()
              .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
              .previewDisplayName("Device-8")
            
        Spacer()
            
           ContentView()
              .previewDevice(PreviewDevice(rawValue: "iPhone 11 Pro Max"))
              .previewDisplayName("Device-XS Max")
        }
    }
}
#endif

---

ColorScheme-LightAndDark

---

struct ContentView : View
{
    var body: some View
    {
        VStack(alignment: .center, spacing: 20)
        {
            Text("Dynamic Type sizes")
                .font(.system(size: 48))
                .foregroundColor(Color.secondary)
            
            Text("Dynamic Type sizes")
                .foregroundColor(Color.accentColor)
            
            Image(systemName: "star.fill")
                .foregroundColor(Color.secondary)
                .font(.system(size: 64))
            
            Image("couples")
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        .background(Color.black)
        .edgesIgnoringSafeArea(.all)
        
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider
{
    static var previews: some View
    {
        HStack(spacing:0)
        {
           ContentView()
              .environment(\.colorScheme, .light)

           ContentView()
              .environment(\.colorScheme, .dark)
        }
    }
}
#endif

---

Context Menu

https://developer.apple.com/documentation/swiftui/contextmenu

---

struct ContentView : View
{
    var body: some View
    {
        VStack(spacing: 20)
        {
            Image(systemName: "gear")
                .font(.system(size: 64))
            
            Text("Settings")
                .font(.system(size: 14))
        }
        .contextMenu
        {
            VStack
            {
                Button(action: {
                    print("Leave a message.")
                }){
                    Text("Leave a message")
                    Image(systemName: "message")
                }
                
                Button(action: {})
                {
                    Text("Rate the app")
                    Image(systemName: "star")
                }
            }
        }
    }
}
 

---

Debug

struct ContentView : View
{
    @State var isAnimating = false
    
    var body: some View
    {
        ZStack
        {
            Rectangle()
                .fill(LinearGradient(gradient: Gradient.init(colors: [Color.init(red: 55/255, green: 67/255, blue: 109/255),Color.init(red: 54/255, green: 98/255, blue: 127/255)]), startPoint: .top, endPoint: .bottom))
                .edgesIgnoringSafeArea(.all)
            
            VStack
            {
                TopBarView()
                    .opacity(isAnimating ? 1 : 0)
                    .animation(Animation.spring().delay(0))
                
                SplitterView()
                    .opacity(isAnimating ? 1 : 0)
                    .animation(Animation.spring().delay(0.2))
                
                TopMenuView()
                    .opacity(isAnimating ? 1 : 0)
                    .animation(Animation.spring().delay(0.4))
                
                PieChartView()
                    .opacity(isAnimating ? 1 : 0)
                    .animation(Animation.spring().delay(0.6))
                
                CountryListView()
                    .opacity(isAnimating ? 1 : 0)
                    .animation(Animation.spring().delay(0.8))
            }
        }
    }
}

struct CircleView: View
{
    var diameter = chartWidth
    var color = activeColor
    var startPoint : CGFloat = 0
    var endPoint : CGFloat = 0.5
    var angle = -45.0
    
    @State var isAnimation = false
    
    var body: some View
    {
        ZStack
        {
            Circle()
                .stroke(lineWidth: 2)
                .fill(inactiveColor)
                .frame(width:diameter, height:diameter)
            
            Circle()
                .trim(from: isAnimation ? startPoint : 0, to: isAnimation ? endPoint : 1)
                .stroke(lineWidth: 4)
                .fill(color)
                .frame(width:diameter, height:diameter)
                .rotationEffect(.degrees(isAnimation ? angle : -720))
                .animation(.easeInOut(duration: 3))
                .onAppear {
                    self.isAnimation.toggle()
                }
        }
    }
}

struct TopBarView: View
{
    var body: some View
    {
        HStack
        {
            Image(systemName: "list.bullet.indent")
            
            Spacer()
            
            Text("STATISTICS")
                .bold()
            
            Spacer()
            
            Image(systemName: "magnifyingglass")
        }
        .padding(.leading,30)
        .padding(.trailing,30)
        .foregroundColor(.white)
    }
}

struct TopMenuView: View
{
    @State private var currentIndex : Int = 1
    
    var body: some View
    {
        VStack
        {
            HStack
            {
                Button(action:
                {
                    self.currentIndex = 1
                }){
                    Text("TODAY")
                        .font(.system(size: regularFontSize))
                        .frame(width: menuWidth, height: 40)
                        .foregroundColor(self.currentIndex == 1 ? activeColor : regularColor)
                }
                Button(action:
                {
                    self.currentIndex = 2
                }){
                    Text("WEEK")
                        .font(.system(size: regularFontSize))
                        .frame(width: menuWidth, height:40)
                        .foregroundColor(self.currentIndex == 2 ? activeColor : regularColor)
                }
                Button(action:
                {
                    self.currentIndex = 3
                }){
                    Text("MONTH")
                        .font(.system(size: regularFontSize))
                        .frame(width: menuWidth, height:40)
                        .foregroundColor(self.currentIndex == 3 ? activeColor : regularColor)
                }
                Button(action:
                {
                    self.currentIndex = 4
                }){
                    Text("ALL TIME")
                        .font(.system(size: regularFontSize))
                        .frame(width: menuWidth, height:40)
                        .foregroundColor(self.currentIndex == 4 ? activeColor : regularColor)
                }
            }
            
            ZStack(alignment: .leading)
            {
                SplitterView()
                Rectangle()
                    .fill(activeColor)
                    .frame(width: UIScreen.main.bounds.width/4, height:1)
                    .offset(x: menuWidth * CGFloat(currentIndex-1), y: 0)
                    .animation(.spring())
            }
        }
    }
}

struct PieChartView: View
{
    var body: some View
    {
        ZStack
        {
            CircleView()
            CircleView(diameter: chartWidth - 40, color: .purple, startPoint: 0, endPoint: 0.4, angle: 70)
            CircleView(diameter: chartWidth - 80, color: .green, startPoint: 0, endPoint: 0.3, angle: 190)
            CircleView(diameter: chartWidth - 120, color: .yellow, startPoint: 0, endPoint: 0.2, angle: 135)
            VStack
            {
                Text("1383")
                    .font(.system(size: 32))
                Text("Visits")
                    .font(.system(size: 14))
                    .foregroundColor(Color.white.opacity(0.5))
                    
            }
            .foregroundColor(.white)
        }
        .padding(.top, 30)
        .padding(.bottom, 30)
    }
}

struct CountryListView: View
{
    @State var isAnimating = false
    
    var body: some View
    {
        ScrollView
        {
            VStack
            {
                ForEach(0 ..< 7)
                { i in
                    VStack
                    {
                        HStack
                        {
                            Circle()
                                .fill(colors[i])
                                .frame(width: 10, height: 10)
                            Text(titles[i])
                            Spacer()
                            Text("\(visits[i])")
                        }
                        .padding(.leading, 30)
                        .padding(.trailing, 30)
                        .padding(.top, 10)
                        .padding(.bottom, 10)
                        .foregroundColor(.white)
                        .opacity(self.isAnimating ? 1 : 0)
                        .animation(Animation.spring().delay(Double(i) * 0.2 + 0.8))
                        
                        Rectangle()
                            .fill(inactiveColor)
                            .frame(width:UIScreen.main.bounds.width - 40, height:1)
                    }
                }
            }
            .onAppear
            {
                self.isAnimating.toggle()
            }
        }
    }
}

struct SplitterView: View
{
    var body: some View
    {
        Rectangle()
            .fill(inactiveColor)
            .frame(width: UIScreen.main.bounds.width, height:1)
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider
{
    static var previews: some View
    {
        ContentView()
    }
}
#endif

---