SwiftUI는 웹 개발에 가까운 곳을 느꼈다.

기사의 기간이 비어 버렸습니다. 또한 최근 앱을 만들고 있습니다. 이번에는 직장에서 SwiftUI를 사용하는 환경이 되었기 때문에 혼자 공부한 소량의 어드밴티지와 함께 일에 힘쓰고 있습니다. Storyboard와 비교하면 역시 SwiftUI쪽이 간단할까 생각합니다.

나에게 SwiftUI는 HTMLCSS에 가까운 언어 감각을 가지고 있기 때문에 얼마나 기사를 쓸 수 있는지 모르겠지만 느낀 것을 정리해 가고 싶습니다.

HStack, VStack, ZStack 정보

전회의 기사에서 HStack등으로 둘러싸지 않으면 2행 이상, 2열 이상 텍스트등을 둘 수 없다고 하는 것을 깨달았습니다만, 둘러싸지 않으면 안 되는 이유는 찾아낼 수 없습니다. 이유를 알고 싶은 기분은 있습니다만 그런 것이라고 생각해 개발하고 있습니다()

이 HStack, VStack, ZStack은 웹 개발의 이미지와 가까운 곳이있었습니다.

VStack의 CSS 이미지

VStack은 웹에서 말하는 블록 요소를 세로로 늘어놓는 거동으로 보였습니다. SwiftUI에서는 자동으로 centering되어 있으므로 css로 표기하면 이런 이미지일까.

<div class="vstack">
    <p>A</p>
    <p>B</p>
    <p>C</p>
</div>

.vstack {
    text-align: center;
}

SwiftUI

HTML,CSS

HStack의 CSS 이미지

HStack은 요소를 정렬하기 때문에 내가 좋아하는 flex의 행동으로 보였습니다. 앞으로 나란한 요소는 한가운데에 들리므로 justify-content의 center가 자동으로 붙는 이미지입니다.

<div class="hstack">
    <p>A</p>
    <p>B</p>
    <p>C</p>
</div>

.hstack {
    display: flex;
    justify-content: center;
}

SwiftUI

HTML,CSS

ZStack의 CSS 이미지

ZStack은 Photoshop이라고 말하는 레이어를 이미지하고 있습니다. css라면 position의 relative와 absolute를 세트하고 z-index로 조정이라는 느낌입니다만, ZStack의 요소는 아래에 써 있는 요소가 위의 레이어에 오므로 html로 표현하면 복잡하게 되었습니다.

<div class="zstack">
    <p>A</p>
    <p>B</p>
    <p>C</p>
</div>

.zstack {
    position: relative;
    z-index: 0;
}

.zstack p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.zstack p:nth-child(1) {
    z-index: 1;
}

.zstack p:nth-child(2) {
    z-index: 2;
}

.zstack p:nth-child(3) {
    z-index: 3;
}

SwiftUI

HTML,CSS

원래 HTML이나 CSS로 나란히 가는 것이 즐겁기 때문에 SwiftUI의 3개도 가까운 것을 느꼈기 때문에 개발 이미지가 붙기 쉽습니다.

참고

htps : //에서 ゔぇぺぺr. 아 ぇ. 코 m / 도쿠 멘 타치 온 / 수프 f / vs ck
htps : //에서 ゔぇぺぺr. 아 ぇ. 코 m / 도쿠 멘 타치 온 / 수프 f / hs ck
htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / 도쿠 멘 타치 온 / 슈 f 타이 / zs ck