SwiftUI 中的图表标签设计答案

【问题标题】：Chart Labels design in SwiftUISwiftUI 中的图表标签设计
【发布时间】：2022-11-03 01:54:54
【问题描述】：

我想为我的图表设计类似的东西。使用我的代码，我实现了这样的目标。

文本未与垂直线居中对齐。愿我实现这一目标的方法完全错误。任何帮助表示赞赏。

我使用了以下代码。

struct FirstFormatterIndicator: View {
    var text: String
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Rectangle().frame(width: 1, height: 5)
                    .foregroundColor(Color.black)
            Text(text)
                .font(.system(size: 9))
        }
    }
}

struct EndFormatterLabel: View {
    var text: String
    var body: some View {
        VStack(alignment: .trailing, spacing: 0) {
            HStack(alignment: .top, spacing: 0) {
                Rectangle().frame(height: 1)
                    .foregroundColor(Color.gray)
                Rectangle().frame(width: 1, height: 5)
                    .foregroundColor(Color.gray)
            }
            Text(text)
                .font(.system(size: 9))
        }
    }
}

struct WeeklyFormatterView: View {
    var texts = ["S", "M", "T", "W", "T", "F", "S"]
    var body: some View {
        ZStack(alignment: .leading) {
            FirstFormatterIndicator(text: texts.first!)
            HStack(alignment: .top, spacing: 0) {
                ForEach(1..<texts.count, id: \.self) { index in
                    EndFormatterLabel(text: texts[index])
                        .frame(maxWidth: .infinity)
                }
            }
        }
        .padding(.horizontal)
    }
}

【问题讨论】：

标签： ios swiftui

【解决方案1】：

使用 .offset 修饰符。例如，这会将所有字母向右移动 10：

struct FirstFormatterIndicator: View {
    var text: String
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Rectangle().frame(width: 1, height: 5)
                    .foregroundColor(Color.black)
            Text(text)
                .font(.system(size: 9))
        }
    }
}

struct EndFormatterLabel: View {
    var text: String
    var body: some View {
        VStack(alignment: .trailing, spacing: 0) {
            HStack(alignment: .top, spacing: 0) {
                Rectangle().frame(height: 1)
                    .foregroundColor(Color.gray)
                Rectangle().frame(width: 1, height: 5)
                    .foregroundColor(Color.gray)
            }
            Text(text)
                .font(.system(size: 9))
                .offset(x:10, y:0) //<-- HERE!
//This will accept X and Y offset values, along with giving a CGSize.
//You can also use the .position modifier, but this will set position, 
//and it is not relative
        }
    }
}

struct WeeklyFormatterView: View {
    var texts = ["S", "M", "T", "W", "T", "F", "S"]
    var body: some View {
        ZStack(alignment: .leading) {
            FirstFormatterIndicator(text: texts.first!)
            HStack(alignment: .top, spacing: 0) {
                ForEach(1..<texts.count, id: .self) { index in
                    EndFormatterLabel(text: texts[index])
                        .frame(maxWidth: .infinity)
                }
            }
        }
        .padding(.horizontal)
    }
}

在此处查看offset 修饰符的文档：https://developer.apple.com/documentation/swiftui/view/offset(x:y:)

还有来自 Apple 关于如何对视图进行细微调整的文章：https://developer.apple.com/documentation/swiftui/making-fine-adjustments-to-a-view-s-position

但是，看起来您的 S 文本实际上可以向左移动一点。此代码将起作用：

struct FirstFormatterIndicator: View {
    var text: String
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Rectangle().frame(width: 1, height: 5)
                    .foregroundColor(Color.black)
            Text(text)
                .font(.system(size: 9))
        }
    }
}

struct EndFormatterLabel: View {
    var text: String
    var body: some View {
        VStack(alignment: .trailing, spacing: 0) {
            HStack(alignment: .top, spacing: 0) {
                Rectangle().frame(height: 1)
                    .foregroundColor(Color.gray)
                Rectangle().frame(width: 1, height: 5)
                    .foregroundColor(Color.gray)
            }
            Text(text)
                .font(.system(size: 9))
                .offset(x:text != "S" ? 10 : -5, y:0) //<-- HERE!
//You can adjust these values as needed
//Example using a CGSize below
//.offset(CGSize(width: text != "S" ? 10 : -5, height: 0))
//This is from Apple's Docs - see full example below
        }
    }
}

struct WeeklyFormatterView: View {
    var texts = ["S", "M", "T", "W", "T", "F", "S"]
    var body: some View {
        ZStack(alignment: .leading) {
            FirstFormatterIndicator(text: texts.first!)
            HStack(alignment: .top, spacing: 0) {
                ForEach(1..<texts.count, id: .self) { index in
                    EndFormatterLabel(text: texts[index])
                        .frame(maxWidth: .infinity)
                }
            }
        }
        .padding(.horizontal)
    }
}

在this link 上使用Apple's Docs 中的.offset 和CGSize 的示例。

【讨论】：