给定 maxWidth 的视图会自动占用 maxWidth 的空间。有没有办法让它只占用所需的空间？

Question

我正在尝试创建在必要时增长到最大宽度的按钮，此时它们使用“...”来截断其标题。我知道按钮框架有一些不寻常的事情，例如在

.buttonStyle

之前或之后应用框架的差异，但这种行为令我惊讶。

似乎应用

maxWidth

会使按钮占据该宽度，即使它不需要它。如果您应用为其提供背景的按钮样式，则按钮周围会有空白。

我发现这也适用于

Text()

。

struct TestButton: View {
    let title: String

    var body: some View {
        Button {
            print(title)
        } label: {
            Text(title)
                .lineLimit(1)
        }
        .frame(maxWidth: 180)
        .background(.purple)
        .buttonStyle(PlainButtonStyle())
        .focusable()
    }
}
HStack {
    TestButton(title: "Bears")
    TestButton(title: "Battlestar Galactica")
}

Answer 1

.frame(maxWidth: 180)

只是在按钮周围包裹了一个不可见的“框架”。这个框架非常灵活 - 如果它收到宽度最多为 180pt 的尺寸建议，它将选择其宽度与建议的宽度相同。否则，它将选择其宽度为 180pt，有效地“限制”提案。

这正是

HStack

向

frame

提出的建议。

HStack

首先会尝试为每个孩子提供相同的宽度，尝试将它们均匀地放置。

frame

接受这些建议，因为

HStack

的宽度恰好小于 360pt^*。

您可以将

fixedSize()

（或

fixedSize(horizontal:vertical:)

）添加到每个按钮，这样就不会向按钮建议特定宽度，而是将

.unspecified

提案发送到

frame

。

frame

会将其转发给按钮，按钮将选择适合其内容的尺寸。当然，如果他们选择的宽度大于180pt，它仍然会受到限制。

将

fixedSize()

添加到

HStack

也可以，因为

HStack

也会将

.unspecified

提案转发给其子节点，而不是尝试将子节点均匀地间隔开（它实际上无法做到这一点，因为没有建议的宽度） ).

但是，

fixedSize()

也不允许按钮收缩。如果

HStack

太窄，按钮将超出

HStack

的边界。如果这是不可取的，您可能需要编写自己的

Layout

。虽然在 2 个视图的情况下您想要做什么相对清楚，但一般情况下您希望如何工作还不是很清楚。

---

^* 更准确地说，

HStack

本身收到了宽度为< 360pt + default spacing of the

HStack

的尺寸建议。