前言
更新还在继续... 这是我继续参加 第四期创作者训练营 的文章,继续不断总结自己的学习经历。点击查看活动链接。
今日学习鸡汤
: 借用人民日报上的话:请你努力,为了自己。
本章节我们学习关于SwiftUI中的 frame
修饰器,它主要涉及到SwiftUI组件的大小以及布局方面,通过本章的学习,我们可以对frame修饰器有一定的了解。
虽然它看似很简单,但是其实如果没有真正理解它,在后续的开发过程中会遇到很多的问题,因为它是我们页面布局的基础。
我们先了解下什么是frame?
官方给定的解释是我们将指定的视图放在隐形的指定大小的容器,在SwiftUI中,frame()
是一个modifier
,modifier
在SwiftUI中并不是真的修改了视图view。 在大多数情况下,当我们对某个view应用一个modifier
时,实际上会创建一个新的视图view。
正文
我们进入我们的工程项目点击Xcode顶部导航的 File > New > File from Template 选择 iOS > SwiftUI 模版创建新的SwiftUI文件
快捷键 Command + N
,我们新建文件名为 FrameBootcamp.swift
,本章我们主要通过结合简单的案例讲解下frame修饰器。
首先我们先看看frame
修饰器的基本参数.
swift 代码解读复制代码func frame(width: CGFloat? = nil, height: CGFloat? = nil, alignment: Alignment = .center)
通过查看修饰器参数我们知道当前修饰器支持三个参数:width(宽度),height(height),以及 alignment(对齐方式 ),那么现在我们开始我们的案例。
一步一步通过案例步骤,你就可以知道frame修饰器的布局方式以及对齐原理。
我们修改文本为 “SwiftUI 精通之路”,并且设置文本背景色为蓝色,文本前景色为白色。
swift 代码解读复制代码Text("SwiftUI 精通之路")
.background( Color .blue)
.foregroundStyle( Color .white)
现在我们开始应用frame
修饰器,我们设置frame修饰器的宽度为300,高度为200,对齐方式为居中对齐。
swift 代码解读复制代码Text("SwiftUI 精通之路")
.background(Color.blue)
.foregroundStyle(Color.white)
.frame(width: 200 , height: 100 , alignment: .center)
是不是发现设置后没有什么变化,哈哈哈哈哈哈哈!其实有变化,有没有想起前面提到的关于 frame
修饰器的概念,将视图放在指定大小的隐形的容器中。
那么我们给这个容器设置下背景色为黑色。
swift 代码解读复制代码Text("SwiftUI 精通之路")
.background(Color.blue)
.foregroundStyle(Color.white)
.frame(width: 200, height: 100, alignment: .center)
.background( Color .black)
我们可以看到蓝色背景的文本视图在当前设置的黑色背景的容器中居中对齐。我们再设置宽度为.infinity(无穷),高度容器内容自适应,对齐方式为.leading(左边对齐)的绿色背景容器。
swift 代码解读复制代码Text("SwiftUI 精通之路")
.background(Color.blue)
.foregroundStyle(Color.white)
.frame(width: 200, height: 100, alignment: .center)
.background(Color.black)
.frame(minWidth: 0 , maxWidth: .infinity, alignment: .leading)
.background( Color .green)
现在你应该对其容器的尺寸设置以及对齐方式有一定的概念了吧,没错,我们可以通过frame修饰器将当前容器置于新的设置的容器中,并且设置其在新的容器中的对齐的方式。
好的,那么我们进一步,我们添加新的frame, 将我们之前的居顶部对齐。
我们添加宽度为.infinity
, 高度为700, 设置其内容顶部对齐.top
的粉色的容器。
swift 代码解读复制代码Text("SwiftUI 精通之路")
.background(Color.blue)
.foregroundStyle(Color.white)
.frame(width: 200, height: 100, alignment: .center)
.background(Color.black)
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
.background(Color.green)
.frame(minWidth: 0 , maxWidth: .infinity, minHeight: 0 , maxHeight: 700 ,alignment: .leading)
.background( Color .pink)
好的!
关于frame
的内容就这些,深入详解frame
望后续分享,如果有什么不对的地方欢迎评论区指点出来,大家一起进步,下章再见?!
评论记录:
回复评论: