主页 / coding / 问题 / 79226450
Accepted
Deepak Sharma
Asked: 2024-11-26 19:09:06 +0800 CST

使用新框架修饰符时的 SwiftUI 视图居中行为

  • 772

我有以下 SwiftUI 代码：

    Rectangle()
        .fill(Color.blue.opacity(0.5))
        .frame(width: 130)
        .frame(maxWidth: .infinity)
        .background(Color.orange.opacity(0.5))
        .padding()
        .frame(maxHeight:100)

这是输出。

在此处输入图片描述

可以清楚地看到，蓝色的内矩形已放置在外矩形的中心。我尝试对框架的对齐方式进行实验，发现只能通过改变外矩形的框架对齐方式来更改内矩形的对齐方式，如下所示：

  .frame(maxWidth: .infinity, alignment: .trailing)

但是如果我改变内部矩形的框架对齐属性，则什么都不会改变。

我想更清楚地理解这种行为——视图是否默认居中，以及为什么内部框架对齐修改没有任何改变。

2 个回答

    1. view居中是因为修改器alignment中参数的默认值frame是.center。

    2. 您可以想象.frame()用容器视图包裹当前视图。因此，更改alignment内部框架不起作用，因为Rectangle没有内容大小，它只会适应您width传入的。更改起作用的.frame()一个例子是使用。alignment.frameText

    Text("Hello")
    .border(.red)
    .frame(width: 200, alignment: .center)
    .border(.green)

    在此处输入图片描述

    这里，Text("Hello")有自己的内容大小，应用时.frame，red border只是环绕文本“Hello”而不是扩展到green border。

    您可以通过这个优秀的博客了解更多信息：https://fatbobman.com/en/posts/layout-dimensions-1/

    • 1
  2. Best Answer

    SwiftUI 中的布局工作方式是，父视图向其子视图建议一个尺寸，然后子视图根据建议选择它们想要的大小。请注意，某些视图可以完全忽略该建议。

    根据文档，frame(width:height:alignment:)​

    将此视图定位在具有指定大小的不可见框架内。

    我们可以理解为向正在修改的视图建议一个特定的尺寸frame。视图根据建议选择尺寸后，会根据 在框架中对齐。该参数alignment的默认值为，因此默认情况下视图在框架中居中。alignment.center

    选择其大小的方式Rectangle是，它将自身调整为与提议相同的大小（所有Shapes 的行为都如此）。因此，它将始终覆盖frame您指定的整个范围。这就是为什么更改alignment第一个frame修饰符不会产生任何影响的原因 - 覆盖整个框架的视图无论在框架内如何对齐，看起来都是一样的。

    修改器frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)还会将其修改的视图定位在框架中，但它会以不同的方式提供尺寸建议。它会获取从其父级收到的尺寸建议，并将其限制在最小值和最大值范围内。

    因此在这种情况下，

    • 屏幕首先向您的视图提供屏幕的宽度和高度
    • .frame(maxHeight:100)接收尺寸提案并创建一个不可见的框架，其屏幕宽度和高度为 100pt。它将尺寸提案的高度更改为 100 并将其向下传递。
    • .padding()接收尺寸提案并选择其尺寸与建议尺寸相同。它进一步将尺寸提案的宽度和高度减少一些系统定义的填充量，然后将提案向下传递。
    • .frame(maxWidth: .infinity)接收尺寸建议，并添加一个与尺寸建议大小相同的不可见框架。（橙色.background被添加到这个框架中。）它不会改变尺寸建议并将其传递下去。
    • .frame(width: 130)接收尺寸建议并忽略建议的宽度。它创建一个宽度为 130pt 且高度与尺寸建议相同的隐形框架。尺寸建议的宽度现在更改为 130pt。
    • 最后，Rectangle接收尺寸建议并选择其尺寸为 130pt 宽。

    值得注意的是， 由 添加的框架.frame(width: 130)比 由 c 添加的框架要窄.frame(maxWidth: .infinity)，因此将alignment较宽框架的参数从 更改为.center显然.trailing会产生影响。

    • 1

相关问题