主页 / coding / 问题 / 77267153
Accepted
xTwisteDx
Asked: 2023-10-10 23:35:49 +0800 CST

如何在 HStack 中偏移视图但仍约束框架与偏移量匹配？

  • 772

正如标题所示，我希望偏移一些视图，即Circle的内部HStack，但是这样做会导致奇怪的行为，其中 HStack 的框架不再正确地包装内容。我需要这个“偏移”操作来仍然允许正确的前导和尾随填充，而没有空白。我也考虑过使用 a ZStack，但是我觉得这可能很麻烦，因为我需要它来“包装”我的内容，而不是占用所有可用空间。

在此输入图像描述

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)
swift

2 个回答

  1. Best Answer

    实现此布局的一种方法是切换圆圈的绘制方式。不要使用圆形作为基本视图并使用文本作为叠加层，而是使用文本作为基本视图并将圆形应用为背景。如果圆圈比基本视图（文本）稍大，那么您将获得所需的重叠效果，并且根本不需要使用偏移。

    像这样：

    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)

    玩家

    • 2

  2. 解决办法是在偏移HStack中的之后再偏移HStack Circle()。

        var totalOffset: CGFloat {
        var offset = 0
        for index in 0 ..< visibleUserCount + 1 {
            offset += offsetPerCircle * index
        }
        return CGFloat(offset)
    }

    然后将修改器添加到HStack

    HStack {
   //Content
}
.offset(x: totalOffset / CGFloat((visibleUserCount + 1)))
    • 0

相关问题