SwiftUIでアプリ作成　〜Text&Button〜

こんにちは、賞味期限の近いマシュマロを押し付けられ気付いたら一人で食べ切っているcyanです。
もはや甘ったるくて気持ち悪くなってきました、、
と言いながら袋の底には二つしか残ってないんだから恐ろしいものです。
ノルマは残り一袋！

今回はSwiftUIを使用したテキストとボタンの簡単なアプリを作成しました。
storyboard版はこちらです。
0から始めるSwift! [Part1]　〜LabelとButton〜

今回のサンプルプロジェクト:
https://github.com/cyan-drop/TextViewApp/

SwiftUI

Swiftのバージョンアップで新しく登場したこのSwiftUIですが、
宣言構文から設計ツールまで以前と大幅に変化しています。
各パーツの名前も変化していて、慣れるまでもう少し時間がかかりそうです。
Viewで使用する変数の前に@Stateをつけなくてはいけない、というのも新しいですね

あとは canvas
画期的な仕組みでした。
これ旧storyboardって言ってしまったんですが、
まだstoryboard共存してましたので
Playgroundと掛け合わせたものとして語っていこうと思います。
resumeはそのまんまレジュメで良さそうです。
途中何を血迷ったのかレジュームと呼んでました←

公式ドキュメント: https://developer.apple.com/xcode/swiftui/

今回のまとめ

Stackを活用すべき

VStackとHStackという強力なものが出ましたので積極的に使っていこうと思います。
そして、Spacerやpaddingを加えることによって間隔をより細かく設定することもできます。
使用方法としては大きく以下の三つになります。

• パーツにつける
  既に存在するパーツにStackを加える（今回の方法）
  ⌘＋クリックで可能。
• コードから作成
  Stack{}を構造体内のコードに加えるだけ
• libraryからドロップ
  他のパーツと同じようにcanvasにドラッグ＆ドロップ

紐づける → コードと一緒に組み立てる

今までストーリーボードのパーツをコードに紐づけてきましたが
Canvasにパーツをドロップすればコードが追加され
コードにパーツを記述すればcanvasにパーツが表示されます。
コードとデザインが一体化してます。

あとがき

今回のプロジェクトで初めて触ったんですが面白い仕組みですね。
パーツの配置位置がコード上でわかるようになってます。
storyboardの際は
パーツが右にあろうが一番下にあろうがコード上ではわからなかったです。
（一応多少の気を使って変数は並べてました。）
が、SwiftUIなら一発です
コードを見ただけで大方のデザインを想像できる、というのは強いと思います。
ボタンひとつ押せばシュミレーター起動せずにデザイン見れますし!

タップアクションの記述もクロージャで処理が書けるようになってました。
存在とその処理内容が一緒に記述されているのは分かりやすいと思います。
ただ、膨大なコード量になってしまわないように気をつけたいです。

別ファイルとの連携がいまいち理解できてないので、次回はそこも触れられたらいいと思ってます。
次回もみてください！

参考にしたサイト

SwiftUIチュートリアル(公式)
How to create a tappable button
SwiftUI Button Tutorial