SwiftUIでグラデーションのListを作る

対象者

• SwiftUIを勉強してる人.
• UI/UXデザインに興味がある人.

やること/やらないこと

やること:

• Listの背景色をグラデーションにする.
• Textのカラーを白にする.

やらないこと:

• OSごとにUIの背景色変更するの違うらしいから、深掘りしません.
• まずは、こう設定すればUIが変わると覚えておく.

プロジェクトの説明

新しくPJを作って、ContentViewを修正してビルドしてみてください。そうすると美しいUIがiOSシュミレーターに表示されるはずです。

import SwiftUI

struct ContentView: View {
    var body: some View {
        List(0..<5) {(row: Int) in
            Text("リスト \(row)")
                .foregroundColor(Color.white)
                .listRowBackground(Color.clear)
        }
        .scrollContentBackground(.hidden)
        .background(LinearGradient(
            stops: [
                Gradient.Stop(color: Color(red: 0.45, green: 0.78, blue: 0.94), location: 0.00),
                Gradient.Stop(color: Color(red: 0, green: 0.31, blue: 0.56), location: 1.00),
            ],
            startPoint: UnitPoint(x: 0, y: 0.5),
            endPoint: UnitPoint(x: 1, y: 0.5)
        ))
    }
}
 

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

これがUIですね。美しいでしょう💁

感想

Listを複数表示するのには、ランジと呼ばれるメソッドを使いました。Kotlilnでもあるのですが、JavaScriptではないようで、...スプレッド演算子とかで表現するみたいです。是非是非参考にして皆様もおしゃれなUI/UXデザインを作ってみてください。