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)
}
}
}
全部源码地址:
