Chat聊天App第6节课创建主聊天静态页面

Chat聊天App第6节课创建主聊天静态页面

核心源码:

//
// MainMessageView.swift
// LuJunChatDemo
//
// Created by lujun on 2022/4/20.
//
import SwiftUI
struct MainMessageView: View {
    
    
    @State var shouldShowLogOutOptions  = false
    
    var body: some View {
    
        NavigationView{
    
            VStack {
    
               
                customNavBar
                
                messagesView
                
                .overlay(newMessageButton,alignment: .bottom)

                   
            }
            .navigationBarHidden(true)
            .navigationTitle("消息")
        }
    }
}

struct MainMessageView_Previews: PreviewProvider {
    
    static var previews: some View {
    
        MainMessageView()
    }
}


extension MainMessageView {
    
    
    private var customNavBar: some View {
    
        HStack{
    
            Image(systemName: "person.fill")
                .font(.system(size: 34,weight: .heavy))
            VStack(alignment: .leading,spacing: 4){
    
                Text("鲁军")
                    .font(.system(size: 24,weight: .bold))
                HStack{
    
                    Circle()
                        .foregroundColor(.green)
                        .frame(width: 14, height: 14)
                    Text("在线")
                        .font(.system(size: 12))
                        .foregroundColor(Color(.lightGray))
                }
               
            }
            Spacer()
            Button {
    
                shouldShowLogOutOptions.toggle()
            } label: {
    
                Image(systemName: "gear")
                    .foregroundColor(.black)
                    .font(.system(size: 24, weight: .bold))
            }

        }
        .padding()
        
        .confirmationDialog(
              "注销警告？",
               isPresented: $shouldShowLogOutOptions,
               titleVisibility: .visible) {
    
                Button("注销", role: .destructive) {
    
                                // Handle empty trash action.
                }
            
            
            
               } message: {
    
                   Text("你想做什么?")
               }
    }
    
    private var messagesView: some View {
    
        ScrollView{
    
            ForEach(0...12,id:\.self){
     item in
                VStack{
    
                    HStack{
    
                        Image(systemName: "person.fill")
                            .font(.system(size: 32))
                            .padding(8)
                            .overlay(
                                RoundedRectangle(cornerRadius: 44)
                                    .stroke(Color.black,lineWidth: 1)
                            
                            )
                            
                        VStack(alignment: .leading){
    
                            Text("用户名")
                                .font(.system(size: 16,weight: .bold))
                            Text("发消息给xxx")
                                .font(.system(size: 14))
                                .foregroundColor(Color(.lightGray))
                        
                        }
                        Spacer()
                        Text("xxx")
                            .font(.system(size: 14,weight: .semibold))
                    }
                    Divider()
                        .padding(.vertical,8)
                }
                .padding(.horizontal)
             }
            .padding(.bottom,50)
            
            
        }
    }
    
    private var newMessageButton: some View {
    
        Button {
    
            
        } label: {
    
            HStack{
    
                Spacer()
                Text("+ 新消息")
                    .font(.system(size: 16,weight: .bold))
                Spacer()
            }
            .foregroundColor(.white)
            .padding(.vertical)
            .background(Color.blue)
            .cornerRadius(32)
            .padding(.horizontal)
            .shadow(radius: 15)
        }
    }
    
}

希望点赞收藏！