结合图像和在线状态指示器

结合图像和在线状态指示器，让你的 SwiftUI 用户头像组件更上一层楼！🚀 让我们一起看看如何实现这个功能，让你的应用界面更加生动。

添加图像

首先，你需要一个图像视图来显示用户的头像。你可以使用 Image 视图来加载和显示图像。确保你的图像资源已经添加到你的项目中。你可以从本地资源或者网络加载图像。

Image("user_avatar") // 本地资源
    .resizable()
    .scaledToFit()
    .frame(width: 50, height: 50)
    .clipShape(Circle())

这段代码会加载名为 "user_avatar" 的图像，调整其大小以适应指定的框架，并将其裁剪成圆形。是不是很简单？😎

添加在线状态指示器

接下来，我们需要添加一个在线状态指示器。这通常是一个小圆点，显示在头像的角落，表示用户的在线状态。你可以使用 Circle 形状来创建这个指示器。

Circle()
    .fill(Color.green)
    .frame(width: 12, height: 12)
    .overlay(
        Circle()
            .stroke(Color.white, lineWidth: 2)
    )
    .offset(x: 18, y: 18)

这段代码创建了一个绿色的圆形，并添加了一个白色的边框，使其看起来更清晰。offset 用于调整指示器的位置，使其位于头像的右下角。

组合图像和指示器

现在，我们需要将图像和在线状态指示器组合在一起。你可以使用 ZStack 来实现这个目的。ZStack 允许你将多个视图叠加在一起。

ZStack(alignment: .bottomTrailing) {
    Image("user_avatar")
        .resizable()
        .scaledToFit()
        .frame(width: 50, height: 50)
        .clipShape(Circle())
    
    Circle()
        .fill(Color.green)
        .frame(width: 12, height: 12)
        .overlay(
            Circle()
                .stroke(Color.white, lineWidth: 2)
        )
        .offset(x: 18, y: 18)
}

通过使用 ZStack，你可以轻松地将图像和在线状态指示器叠加在一起，创建一个完整的用户头像组件。🎉

动态更新在线状态

为了使在线状态指示器真正有用，你需要能够动态地更新它的颜色。你可以使用 @State 变量来控制指示器的颜色，并根据用户的在线状态更新这个变量。

@State private var isOnline: Bool = true

var body: some View {
    ZStack(alignment: .bottomTrailing) {
        Image("user_avatar")
            .resizable()
            .scaledToFit()
            .frame(width: 50, height: 50)
            .clipShape(Circle())
        
        Circle()
            .fill(isOnline ? Color.green : Color.gray)
            .frame(width: 12, height: 12)
            .overlay(
                Circle()
                    .stroke(Color.white, lineWidth: 2)
            )
            .offset(x: 18, y: 18)
    }
    .onTapGesture {
        isOnline.toggle()
    }
}

在这个例子中，我们使用 isOnline 变量来控制指示器的颜色。当 isOnline 为 true 时，指示器是绿色的；否则，它是灰色的。通过点击头像，你可以切换用户的在线状态。是不是很酷？😎

通过这些步骤，你可以创建一个功能完善的用户头像组件，它不仅显示用户的头像，还显示用户的在线状态。这会让你的应用界面更加友好和信息丰富。加油！💪