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

Xnip2022-04-21_01-00-41.jpg

//
//  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)
        }
    }
    
}

全部源码地址: