正如标题所示,我希望偏移一些视图,HStack内部的Circle,然而这样做会导致HStack的框架不再正确包装内容的奇怪行为.我需要这个"偏移"操作,以便仍然允许适当的前导和尾随填充,而不存在空格.我也考虑过使用ZStack,但我觉得这可能很麻烦,因为我需要它来"包装"我的内容,而不是占用所有可用的空间.

enter image description here

HStack {
    ForEach(novaraUsers.indices, id: \.self) { index in
        let user = novaraUsers[index]
        
        if index < visibleUserCount + 1 {
            Group {
                if index < visibleUserCount {
                    Circle()
                        .fill(.white)
                        .stroke(Color.getRandomColor(from: user.username), lineWidth: 4)
                        .foregroundColor(.white)
                        .frame(width: 50, height: 50)
                        .overlay(
                            Text(user.username.prefix(1))
                                .font(.title)
                                .foregroundColor(.black)
                                .font(.h1)
                        )
                } else {
                    Circle()
                        .fill(.white)
                        .stroke(Color.getRandomColor(from: String(novaraUsers.count)), lineWidth: 4)
                        .foregroundColor(.white)
                        .frame(width: 50, height: 50)
                        .overlay(
                            Text("\(moreThanCount)+")
                                .font(.title)
                                .foregroundColor(.black)
                                .font(.h1)
                        )
                }
            }
            .offset(x: CGFloat(offsetPerCircle * index) * -1)
        }
    }
}
.frame(width: CGFloat(50 * (visibleUserCount + moreThanCount)))
.border(.black, width: 2)

推荐答案

实现此布局的一种方法是更改绘制圆的方式.使用文本作为基础视图并应用圆形作为背景,而不是使用圆形作为基础视图和文本作为覆盖.如果圆形比基础视图(文本)稍大,那么你就会得到你想要的重叠效果,根本不需要使用偏移.

就像这样:

Group {
    if index < visibleUserCount {
        Text(user.username.prefix(1))
            .font(.title)
            .foregroundColor(.black)
            .font(.h1)
            .frame(width: 35, height: 35)
            .background {
                Circle()
                    .fill(.white)
                    .stroke(Color.getRandomColor(from: user.username), lineWidth: 4)
                    .foregroundColor(.white)
                    .frame(width: 50, height: 50)
            }
    } else {
        Text("\(moreThanCount)+")
            .font(.title)
            .foregroundColor(.black)
            .font(.h1)
            .frame(width: 35, height: 35)
            .background {
                Circle()
                    .fill(.white)
                    .stroke(Color.getRandomColor(from: String(novaraUsers.count)), lineWidth: 4)
                    .foregroundColor(.white)
                    .frame(width: 50, height: 50)
            }
    }
}
// Not needed
//.offset(x: CGFloat(offsetPerCircle * index) * -1)

Players

Swift相关问答推荐

显示第二个操作紧接在另一个操作后的工作表在SwiftUI中不起作用

ARRaycast Query和前置摄像头(ARFaceTrackingConfiguration)

从Swift中的泛型类继承?

为什么 UITapGestureRecognizer 对于 Swift 集合视图中的单元格图像无法正常工作?

如何制作一个在 SceneKit 中投射阴影的透明物体?

避免 `(())` 显式指定 Void 类型的枚举关联值

如何制作具有 2 个视图的 3D 旋转动画?

SwiftUI 视图的默认成员初始化器 VS 自定义初始化器

`let case(value)` 和 `case(let value)` 之间的区别 (Swift)

如何在 SwiftUI 中正确实现Collection 夹?

将阻塞函数集成到 Swift 异步中

如何删除标签和步进按钮之间的间距是 SwiftUI Stepper?

AVPlayer 在 iOS 15.4 中寻求 completionHandler 返回 false

SwiftUI 中的 .primary 和 .secondary colored颜色 是什么?

从 NSData 对象在 Swift 中创建一个数组

如何在 Swift 中将 UILabel 居中?

SwiftUI - 呈现工作表后导航栏按钮不可点击

Facebook SDK 4.0 IOS Swift 以编程方式注销用户

Swift 中的 recursiveDescription 方法?

为什么枚举具有计算(computed)属性但在 Swift 中没有存储属性?