Skip to content

SwiftUI_ui_basic

Jump to bottom
kobayashiharuto edited this page Aug 8, 2021 · 4 revisions

基本的なUIの組み方

SwiftUI で UI を作っていきましょう


基本的な話

基本的に、今 Text("Hello, World!") と書いてあるところに UI を書いていけば UI が完成します

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, swiftUI!")
        	.padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

.padding ってなに？

.padding() というのが Text にくっついていますね？
これはテキストに対して余白を作ります。

Text("Hello, swiftUI!")
	.padding()

エディタ上で、Text("Hello, World!") のどこかをクリックしてみてください。
すると以下のように青枠が表示されると思います。（表示されない場合はプレビューエリアの上の Resume を押しましょう）

img

では、この .padding() を消してみてください。すると、以下のように余白が消えるはずです。

img

さらに、.padding(50) というように数字を指定してみましょう。これにより、余白が 50 の範囲で取られます。

img

これは、テキスト以外でもボタンやリストなどなど、なんにでも付けることが出来る物になります。
SwiftUI では、このように UI を宣言した後にピリオドでオプションを追加していくことで、UI をカスタマイズできるわけです。
もちろん padding 以外にもいろいろあります。それはおいおい触れていきましょう。


テキストを並べよう

さて、現状はテキストが1つしかないので、並べてみましょう。
縦に並べる場合は以下のように VStack で囲みます。

VStack {
    Text("Hello, swiftUI!")
    	.padding()
    Text("Hello, text2!")
    	.padding()
}

以下のように並びました！

img

padding をいじったり、Text をさらに増やしたりしてみましょう。挙動が確認できると思います。
また、横方向には HStack で並べられます。試してみましょう。


他にも UI のパーツや使い方を知りたい！

カピ通信
↑ このサイトが神過ぎるので、これ見とけば何とかなります。
ただ内容が多いので、いくつかピックアップしていきます
とりあえず、以下の順で見ていってください

Back to Top

Clone this wiki locally