带有文字的文字。

Question

我想创建一个由SwiftUI视图呈现的并发症，其中包含标签和计时器值。

我希望标签位于并发症背景层上，并且计时器值位于并发症前景层上，以便它们分开着色。

我希望这条文本由2个部分组成，以中心为中心。

问题是，当使用text.datestyle.timer时，文本在正常视图中的并发症与并发症中的行为不同。

在正常视图中，文本框架的行为就像其他任何文本一样，只能占用所需的空间。

当以复杂性显示时，文本框架会扩展以填充它可以填充的所有空间，并且内部的文本将对齐。

这使得我找不到将两个文本组为中心的方法。

我尝试使用无限间隔者的某种刺耳的方法来尝试从具有扩展框架的文本中窃取额外的空间。这可以使内容集中，但会导致文本截断。

HStack {
    Text("T:")
        .foregroundColor(.accentColor)

    Text(Date(), style: .timer)
        .complicationForeground()
}

HStack {
    Spacer()
        .frame(maxWidth: .infinity)

    HStack {
        Text("T:")
            .foregroundColor(.accentColor)

        Text(Date(), style: .timer)
            .complicationForeground()
    }

    Spacer()
        .frame(maxWidth: .infinity)
}

正常预览：

复杂性中渲染的预览：

CLKComplicationTemplateGraphicExtraLargeCircularView(
    ExtraLargeStack()
)
.previewContext(faceColor: .multicolor)

---

编辑以显示完整代码

import ClockKit
import SwiftUI

struct ExtraLargeStack: View {
    var body: some View {
        VStack(alignment: .center) {
            HStack {
                Text("T:")
                    .foregroundColor(.accentColor)

                Text(Date(), style: .timer)
                    .complicationForeground()
            }

            HStack {
                Spacer()
                    .frame(maxWidth: .infinity)

                HStack {
                    Text("T:")
                        .foregroundColor(.accentColor)

                    Text(Date(), style: .timer)
                        .complicationForeground()
                }

                Spacer()
                    .frame(maxWidth: .infinity)
            }
        }
        .font(.system(size: 18, weight: .regular))
        .lineLimit(1)
    }
}

struct ExtraLargeStack_Previews: PreviewProvider {
    static var previews: some View {
        /// Preview normal view
        // ExtraLargeStack()
        
        /// Preview as Complication
        CLKComplicationTemplateGraphicExtraLargeCircularView(
            ExtraLargeStack()
        )
        .previewContext(faceColor: .multicolor)
    }
}

---

编辑：另一部分 基于@YRB的建议的解决方案

，覆盖层提供了一个部分解决方案，对于我的用例来说可能足够好。

以下内容并未完全居中2部分，但是非常接近。

HStack {
    // Use placeholder text to create a view with the appropriate size for _most_ timer values that I need to support
    Text("L: 00:00 ").hidden()
}
.overlay(
    // overlay the real content, which is constrained to the frame created by the hidden placeholder.
    HStack(spacing: 5) {
        Text("L:")
            .foregroundColor(.accentColor)

        Text(Date() - 3599, style: .timer)
            .complicationForeground()
    }
)

Answer 1

因此，我弄清楚了对齐text（date（），样式：.timer） is的问题。计时器格式从小时开始。该文档以此为例：2:59 36:59:01。看来.timer保留所需的所有可能空间，然后在该可能的空间上格式化，而不是实际使用的空间。即使您的目标是5分钟的倒计时计时器，似乎也没有任何改变此行为的方法。

我认为您需要考虑轻微的UI更改。我确实发现您可以通过使用.timer将显示的文本的对齐方式通过.multilineTextAlignment（）进行。你可以做。以下代码证明了这一点：

struct ExtraLargeStack: View {
    var body: some View {
        // I removed (alignment: .center) as it is redundant. VStacks default to center
        VStack {
            // I put the negative spacing to tighten the T: with the timer
            VStack(spacing: -6) {
                Text("T:")
                    .foregroundColor(.accentColor)
                
                Text(Date(), style: .timer)
                    // If you center with .multilineTextAlignment the timer
                    // will be centered
                    .multilineTextAlignment(.center)
                    .complicationForeground()
            }
            
            HStack {
                 HStack {
                    Text(Date(), style: .timer)
                        .multilineTextAlignment(.center)
                        .complicationForeground()
                        .overlay(
                            Text("T:")
                                .foregroundColor(.accentColor)
                                // This offset would need to be computed
                                .offset(x: -30, y: 0)
                        )
                }
            }
        }
        .font(.system(size: 18, weight: .regular))
    }
}

我将第二个计时器作为hstack，但我将您的text（“ t”）作为.overlay（） 代码>带有.offset（）。我并不特别喜欢这种情况，因为如果您尝试在额外的时间单元中调整偏移量，那将是脆弱的，但是如果您的范围有限，则可能足够好。另外，如果您在计时器文本上使用.monoptaced，则该计算应为线性量。