🍠

.fixedSize()と.frame(maxWidth:)の順番によって結果が違う

2024/10/20に公開

環境

Sequoia 15.0.1
Xcode16

前半と後半に分ける
言いたいことは後半だが、何か迷うことがあるかもしれないので前半を付け足す。

前半コード

HStack {
    Spacer()
    Color.red
        .frame(width: 100, height: 20)
}
HStack {
    Text("長い長い長い長い長い")
        .frame(maxWidth: .infinity)
        .border(.black)
    Text("12345")
        .frame(maxWidth: 100)
        .border(.black)
}
HStack {
    Text("長い長い長い長い長い")
        .frame(maxWidth: .infinity)
        .border(.black)
    Text("12345678901234567890")
        .frame(maxWidth: 100)
        .border(.black)
}
HStack {
    Text("長い長い長い長い長い長い長い長い長い長い")
        .frame(maxWidth: .infinity)
        .border(.black)
    Text("12345")
        .fixedSize() //⭐️
        .border(.black)
}
HStack {
    Text("長い長い長い長い長い長い長い長い長い長い")
        .frame(maxWidth: .infinity)
        .border(.black)
    Text("12345678901234567890")
        .fixedSize() //⭐️
        .border(.black)
}

前半結果

後半コード

HStack {
    Spacer()
    Color.red
        .frame(width: 100, height: 20)
}
HStack {
    Text("長い長い長い長い長い長い長い長い長い長い")
        .frame(maxWidth: .infinity)
        .border(.black)
    Text("12345")
        .frame(maxWidth: 100) //⭐️
        .fixedSize() //⭐️
        .border(.black)
    
}
HStack {
    Text("長い長い長い長い長い長い長い長い長い長い")
        .frame(maxWidth: .infinity)
        .border(.black)
    Text("12345678901234567890")
        .frame(maxWidth: 100) //⭐️
        .fixedSize() //⭐️
        .border(.black)
}
HStack {
    Text("長い長い長い長い長い長い長い長い長い長い")
        .frame(maxWidth: .infinity)
        .border(.black)
    Text("12345")
        .fixedSize() //⭐️
        .frame(maxWidth: 100) //⭐️
        .border(.black)
}
HStack {
    Text("長い長い長い長い長い長い長い長い長い長い")
        .frame(maxWidth: .infinity)
        .border(.black)
    Text("12345678901234567890")
        .fixedSize() //⭐️
        .frame(maxWidth: 100) //⭐️
        .border(.black)
}

後半結果

Discussion