SwiftUI 学习之fixedSize

fixedSize

fixedSize() 会 强制让视图采用其理想尺寸(ideal size),忽略父视图的布局约束。

视图层级的布局过程中,每个视图会向其所包含的子视图提议一个尺寸。子视图会根据建议,结合自己的情况来调整自己的大小。

       Text("测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试")
        .frame(width: 200, height: 40)
        .border(Color.gray)
        

上面这个例子,Text长文本会被限制在宽 200、高40的区域内,而被截断。


截屏2025-06-26 11.49.09.png

fixedSize() 修饰符就可以按照视图的理想大小进行布局 ,从而忽略父视图提出的布局约束。

struct ContentView: View {
    var body: some View {
        Text("测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试")
        .fixedSize()
        .frame(width: 200, height: 40)
        .border(Color.gray)
        }
}

像上面Text添加修饰符fixedSize,视图会忽略父视图的约束,按内容实际需要的大小渲染。


截屏2025-06-26 11.52.04.png
截屏2025-06-26 14.01.35.png

小结一下:fixedSize() 的核心作用 强制让视图(如 Text、Image)使用它的理想尺寸布局,忽略父视图或 frame 传递的约束。理想尺寸对于Text,就是完整显示全部文字内容所需的最小尺寸,也就是固有大小、
下面我们用更多的例子去理解它

  • 1、没有frame的限制,使用fixedSize
struct ContentView: View {
   var body: some View {
       Text("测试测试测试")
       .fixedSize()
       .border(Color.gray)
   }
}

这里使用了fixedSize确保Text使用它的理想尺寸,然而本身就没有任何尺寸的约束限制,默认text就使用的使用固有大小本来就是理想尺寸,所以fixedSize在这里是多余的,没有什么作用

  • 2、先使用fixedSize,再使用.frame限制尺寸
struct ContentView: View {
    var body: some View {
        Text("测试测试测试测试测试测试测试测试")
         .fixedSize()
         .frame(width: 100,height: 100)
        .border(Color.gray)
    }
}

这里使用了fixedSize确保Text使用它的理想尺寸,打破了.frame的尺寸限制,最终显示结果Text的文本会超出灰色的边框完

  • 3、先使用再使用.frame限制尺寸,再使用fixedSize
struct ContentView: View {
    var body: some View {
        Text("测试测试测试测试")
        .frame(width: 100,height: 100)
         .fixedSize()
        .border(Color.gray)

    }
}

这里改变了上一个例子修饰符的顺序,先用frame限制了尺寸,而后才用fixedSize去强制使用理想尺寸。由于修饰符顺序的影响,修饰符是从内到外的应用:.frame 会先生效将text限制在width: 100,height: 100的框架里;再使用.fixedSize()的话,虽然它尝试让文本使用理想尺寸,但已经晚了text已经被限制了尺寸,就无法frame的限制了

  • 4、指定理想尺寸,并fixedSize
struct ContentView: View {
    var body: some View {
        Text("测试测测试测试测试测试测试测试测试测试测试测试测试测试试测试测试")
        .frame(idealWidth: 100,idealHeight: 30)
        .fixedSize()
         .background(.red)
    }
}

frame(idealWidth:idealHeight:)为视图提供一个"建议的"理想尺寸(100×30),又使用.fixedSize() 强制采用,最终文本视图会严格按照 100×30 的尺寸布局,过长的文本会被截断(显示省略号...)

  • 5、只指定理想尺寸
struct ContentView: View {
    var body: some View {
        Text("测试测测试测试测试测试测试测试测试测试测试测试测试测试试测试测试")
        .frame(idealWidth: 100,idealHeight: 30)
         .background(.red)
     
    }
}

idealWidth/Height 只是给布局系统的建议值,不会强制约束视图(是"软性建议"),最终尺寸可能大于或小于这个值。所以一般情况下frame(idealWidth:idealHeight:)和.fixedSize() 一起使用

  • 5、指定维度(水平或者垂直方向的)fixedSize

.fixedSize(horizontal: Bool = true, vertical: Bool = true)

horizontal:是否固定水平方向尺寸(默认 true,强制水平方向返回理想宽度)。
vertical:是否固定垂直方向尺寸(默认 true,强制垂直方向返回理想高度)。

struct ContentView: View {
    var body: some View {
        Text("测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试")
        .fixedSize(horizontal: false, vertical: true)
        .frame(width: 100,height: 30)
        .border(Color.gray)
     
    }
}

.fixedSize(horizontal: false, vertical: true),只强制使垂直方向返回理想高度,水平方向的宽度不强制,会受frame的width限制


struct ContentView: View {
    var body: some View {
        Text("测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试")
        .fixedSize(horizontal: true, vertical: false)
        .frame(width: 100,height: 30)
        .border(Color.gray)
     
    }
}

.fixedSize(horizontal: true, vertical: false),只强制使水平方向返回宽度,垂直方向的高不强制,会受frame的height限制


struct ContentView: View {
    var body: some View {
        Text("测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试")
        .fixedSize(horizontal: false, vertical: false)
        .frame(width: 100,height: 30)
        .border(Color.gray)
     
    }
}

.fixedSize(horizontal: false, vertical: false),水平和垂直方向都不强制使用理想尺寸,都会会受frame的限制,该修饰符确实不会对视图的尺寸产生任何强制作用,其效果等价于不添加 .fixedSize()

  • 6、 width和idealWidth区别
struct ContentView: View {
    var body: some View {
     
            VStack(spacing: 20) {
                    // 1. 强制固定宽度(截断内容)
                    Text("Hello World! This is a very long text that should demonstrate the difference.")
                        .frame(width: 200)
                        .background(.red.opacity(0.3))
                        .border(.red)
                    // 2. 理想宽度+强制完整(宽度限制为200,高度会自适应换行)
                    Text("Hello World! This is a very long text that should demonstrate the difference.")
                        .frame(idealWidth: 200)
                        .fixedSize()
                        .background(.blue.opacity(0.3))
                        .border(.blue)
                }
            .frame(height: 100)
         
    }
}
截屏2025-06-26 16.30.51.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

相关阅读更多精彩内容

  • """1.个性化消息: 将用户的姓名存到一个变量中,并向该用户显示一条消息。显示的消息应非常简单,如“Hello ...
    她即我命阅读 5,665评论 0 6
  • 为了让我有一个更快速、更精彩、更辉煌的成长,我将开始这段刻骨铭心的自我蜕变之旅!从今天开始,我将每天坚持阅...
    李薇帆阅读 2,272评论 1 4
  • 似乎最近一直都在路上,每次出来走的时候感受都会很不一样。 1、感恩一直遇到好心人,很幸运。在路上总是...
    时间里的花Lily阅读 1,778评论 1 3
  • 1、expected an indented block 冒号后面是要写上一定的内容的(新手容易遗忘这一点); 缩...
    庵下桃花仙阅读 1,144评论 1 2
  • 一、工具箱(多种工具共用一个快捷键的可同时按【Shift】加此快捷键选取)矩形、椭圆选框工具 【M】移动工具 【V...
    墨雅丫阅读 1,740评论 0 0

友情链接更多精彩内容