消息 SwiftUI 上的 cornerRadius

Question

我遇到了这个问题，我的消息在另一边没有圆角半径。它是这样的：

还有它的代码：

HStack {
    HStack {
        Text(text)
            .fixedSize(horizontal: false, vertical: true)
            .foregroundColor(isSender ? Color.white : Color(.label))
            .padding()
        }
    .background(isSender ? Color.blue : Color(.systemGray5))
    .padding(isSender ? .leading : .trailing,
             isSender ? UIScreen.main.bounds.width*0.28 : UIScreen.main.bounds.width*0.2)
}
.cornerRadius(10)

如何让它的另一边也变圆？

Answer 1

修饰符的顺序很重要。

您首先应用填充，然后应用 cornerRadius。这给（不可见的）填充一个圆角。如果你反过来做——先是 cornerRadius，然后是填充——它有效：

            HStack {
                Text(text)
                    .fixedSize(horizontal: false, vertical: true)
                    .foregroundColor(isSender ? Color.white : Color(.label))
                    .padding()
            }
            .background(isSender ? Color.blue : Color(.systemGray5))
            .cornerRadius(10) // << first radius, then padding
            .padding(isSender ? .leading : .trailing,
                     isSender ? UIScreen.main.bounds.width*0.28 : UIScreen.main.bounds.width*0.2)

Answer 2

实际上你正在做的是在背景之后应用填充，这样你的填充将应用到你的背景视图，现在你的背景视图不再位于角落，这就是为什么特定一侧没有圆角，你可以在背景前放置内边距以达到您的要求：

HStack {
        HStack {
            Text(text)
                .fixedSize(horizontal: false, vertical: true)
                .foregroundColor(isSender ? Color.white : Color(.label))
                .padding()
            }
        .padding(isSender ? .leading : .trailing,
                 isSender ? UIScreen.main.bounds.width*0.28 : UIScreen.main.bounds.width*0.2) //HERE
        .background(isSender ? Color.blue : Color(.systemGray5))
    }
    .cornerRadius(10)

您也可以为现有代码实现圆角，但只需将 cornerRadius 从 HStack 移动到您的背景视图，如下所示：

HStack {
        HStack {
            Text("text")
                .fixedSize(horizontal: false, vertical: true)
                .foregroundColor(isSender ? Color.white : Color(.label))
                .padding()
            }
        .background(isSender ? Color.blue : Color(.systemGray5))
        .cornerRadius(10) //HERE
        .padding(isSender ? .leading : .trailing,
                 isSender ? UIScreen.main.bounds.width*0.28 : UIScreen.main.bounds.width*0.2)
    }

消息 SwiftUI 上的 cornerRadius

cornerRadius on message SwiftUI

ios

swift

swiftui