【SwiftUI】Listをかっこよくアレンジ

はじめに

標準のListスタイルはシンプルでかっこいいですが、
アプリのテーマカラーによっては合わない事があると思います。

そのような場合にListをかっこよくアレンジする方法を紹介します。

これをすることで見た目を自由に変更することが可能です。

完成形

使用データ

struct Marvel: Identifiable {
    let id = UUID()
    let character: String
    let icon: String
    let text: String

    let name: String
    let height: String
    let weight: String
    let ability: String
}

let Characters: [Marvel] = [
    .init(
        character: "アイアンマン",
        icon: "0",
        text: "億万長者の起業家、トニー・スタークが洗練されたアーマーを装着したとき、彼は生きたハイテク・ウェポン、世界最高の戦闘兵器と化す。トニーは超現代的な発明を持って、最先端の戦いにその身を投じ、不可能な音速飛行も可能にし、よりよきものを守り続けた。彼こそがアーマード・アベンジャー。一部機械化した心臓が彼を突き動かす、この全身ヒーローを！彼こそがインビンシブル(無敵の)アイアンマン！",
        name: "アンソニー・エドワード・“トニー”・スターク",
        height: "185.42センチ、アーマー装着時は195.58センチ",
        weight: "86.18キログラム、アーマー装着時は192.78キログラム",
        ability: "アイアンマンの標準型アーマーは、優れた腕力・スピード・飛行能力を誇っている。両手にはリパルサー・ビーム、胸にはユニ・ビームを搭載している。特殊な用途に応じて、複数のタイプのアーマーが存在している。"
    ),
    .init(
        character: "キャプテン・アメリカ",
        icon: "1",
        text: "第2次世界大戦中、愛国心の強いスティーブ・ロジャースは軍の最高機密生体実験、オペレーション：リバースに己の身を捧げた。実験段階の超血清を注入されたロジャースは耐久力、腕力そして反応速度が高められた状態となった。さらに訓練と破壊不能なヴィブラニウムのシールドを持って、ロジャースはほどなく国家究極の武器、キャプテン・アメリカとなった！　第2次大戦末期、終戦も近い頃に一度氷の中に閉じ込められるも、何十年も後に発見され、蘇生された。生ける伝説は悪との戦いを今も続ける、アベンジャーズの一員として！",
        name: "スティーブン・“スティーブ”・ロジャース",
        height: "187.96センチ",
        weight: "104.33キログラム",
        ability: "キャプテン・アメリカは、人間の身体能力を極限まで高めた存在である。ボクシングの達人で、柔道をはじめとするほかの格闘技の訓練も受けている。超人血清のおかげで、驚異的な耐久力も持っている。"
    ),
    .init(
        character: "ソー",
        icon: "2",
        text: "北欧の伝説には、オーディンの息子、アスガルドの玉座を継ぐものを語る物語がある。その神こそソー、神話最強のヒーロー！　ソーの腕力、耐久力そして、戦いへの飽くなき冒険心はアスガルドのどの同胞よりも強い。強大なソーは魔力を宿したウルのハンマー、ムジョルニアを振るい、雷と稲妻を自在に操る。",
        name: "ソー・オーディンソン",
        height: "198.12センチ",
        weight: "154.22キログラム",
        ability: "計り知れない腕力と耐久力の持ち主であり、雷を操ることができる。ムジョルニアを使えば、空を飛ぶことができ、異次元への扉を開くこともできる。"
    ),
    .init(
        character: "ハルク",
        icon: "3",
        text: "ブルース・バナー博士が爆弾実験より少年を勇敢にも救ったとき、大量のガンマ線にさらされたことによりDNAを変化させた。ブルースが激怒すると、彼の遺伝子に隠された、超アドレナリンのヒーローが目覚める！その力を悪に使いたい者達に執拗に追いかけられながらも、ブルースは最強のヒーローのハルクに変身し、罪なきものを守るのだ！",
        name: "ロバート・ブルース・バナー",
        height: "175.26センチ(バナー)；256.45センチ(ハルク)",
        weight: "65.77キログラム(バナー)；471.74キログラム(ハルク)",
        ability: "ハルクの腕力には、ほとんど限界はない。一回のジャンプで数キロを跳躍することができ、ケガをしてもすぐに回復する。"
    ),
    .init(
        character: "ブラック・ウィドウ",
        icon: "4",
        text: "ナターシャ・ロマノフはスーパー・スパイ、ブラック・ウィドウとしてその名を知られている。諜報に関するあらゆる分野で訓練を積み、最新鋭の技術を装備したブラック・ウィドウの戦闘技術に適うものはそうそういない。S.H.I.E.L.D.最重要エージェントのひとりとして、いくつもの秘密工作を成功させてきた。アベンジャーズのメンバーとしてもその恐るべき才能を悪に立ち向かうため惜しみなく使うのである。",
        name: "ナタリア・“ナターシャ”・ロマノフ（ロマノヴァ）",
        height: "170.18センチ",
        weight: "58.97キログラム",
        ability: "オリンピックのアスリート並みの身体能力と回復能力、高度な格闘技・狙撃技術をもつ。手首のブレスレットには武器が、ベルトには爆薬が仕込んである。改良された超人血清のおかけで若さを保つ。"
    ),
    .init(
        character: "ニック・フューリー",
        icon: "5",
        text: "老獪にして狡猾、ニック・フューリー大佐は知能と高潔さを持ってアメリカ合衆国諜報部のトップにまで上り詰めた。フューリーは誇り高く自由世界のために様々な形で長年に渡り仕えた、合衆国軍の軍曹として、最新技術に精通したスーパースパイとして、そして世界最高の平和維持諜報機関S.H.I.E.L.D.の司令官として。謎多きインフィニティ・フォーミュラにより若く活力あふれる身体が保たれているニック・フューリーは、正義が追い詰められた時には常に戦いの場に身を投じるのである！！",
        name: "ニコラス・ジョセフ・“ニック”・フューリー",
        height: "185.42センチ",
        weight: "90.72キログラム",
        ability: "プロの戦略家。長寿効果のあるインフィニティ・フォーミュラを注射したことにより加齢速度が遅くなっている。さまざま戦闘経験があり、格闘技の達人でもある。"
    ),
    .init(
        character: "ホークアイ",
        icon: "6",
        text: "完璧な正確さとトリック・アローに詰まった矢筒を持つアーチャー、クリント・バートンの機転は彼の雷の様に速い反射神経よりも素早い！この弓矢の達人はルールに常に従うわけではないが、はるか昔にアベンジャーズにとってかけがえのないメンバーであることをホークアイは証明しているのである！",
        name: "クリントン・フランシス・“クリント”・バートン",
        height: "182.88センチ",
        weight: "83.91キログラム",
        ability: "世界で最も偉大な射手。さまざまにトリックアローを使いこなし、どんな角度からも正確に矢を射ることができる。"
    ),
    .init(
        character: "ファルコン",
        icon: "7",
        text: "サミュエル・トーマス・ウィルソンはダーリーン・ウィルソンと聖職者であったポール・ウィルソンの間に、ニューヨーク市ハーレムで生まれ、抑圧と偏見に溢れた街で苦労して育った。 空っぽな魂を抱えて生きている時、彼はキャプテン・アメリカに出会い、その庇護の元、スーパーヒーローとして戦うことを勇気づけ、“ファルコン”という人格を形成するのを助けてもらった。キャプテン・アメリカのサイドキックとして訓練を受け、導かれた後、ファルコンは戦いの達人にして立派なアスリートとなった。さらにはブラック・パンサーにも協力を得て、特別な飛行器具も与えてもらった。ファルコンは鳥に親しみを持ち、ペットのハヤブサ(ファルコン)、レッドウィングとは精神的にもつながりを持つ。",
        name: "サミュエル・トーマス・“サム”・ウィルソン",
        height: "182.88センチ",
        weight: "77.11キログラム",
        ability: "ジェット・パワーによる人工翼で空を飛べる。戦闘能力も高い。訓練されたレッドウィングとテレパシーで意思疎通できる。"
    ),
    .init(
        character: "ウォーマシン",
        icon: "8",
        text: "米空軍大佐ジェイムズ・“ローディ”・ローズは長年トニー・スタークの親友とスターク・インダストリーズの特別なリエゾンを務めてきた。戦闘においてはスタークのもつアイアンマンのスーツを改造したウォーマシン・アーマーを装着する。モジュラー式ガトリング・キャノンをはじめ、様々な火器を装備し多数の敵と戦うことが可能なウォーマシンこそが真のワンマン・アーミーである。",
        name: "ジェイムズ・ルパード・ローズ",
        height: "185.4cm/195.5cm(アーマー装着時)",
        weight: "95.2kg/215.4kg (アーマー装着時)",
        ability: "ウォーマシンは、モジュラー・ウォーマシン・アーマーを装着することで、超人的な腕力と耐久力、飛行能力を得られ、さらにはエネルギーブラストを照射することが可能になる。アーマーにはさらに肩に装着されたガトリング・キャノンをはじめとして重装備が施されいる。経験豊富な兵士で、空軍パイロットであり、格闘にも長けている。"
    ),
    .init(
        character: "ビジョン",
        icon: "9",
        text: "アベンジャーズを罠にはめるため悪のロボット、ウルトロンにより作られたビジョンは彼の創造主が思っている以上に人間性があることに気づく。そして主人に逆らい、彼の持つ素晴らしい能力を人類に役立てるために使うことを選択するのであった。",
        name: "ビジョン",
        height: "187.9cm",
        weight: "136kg",
        ability: "超人的な腕力、スピード、持久力、敏捷性そして耐久性を持つ。高速飛行可能、額のソーラー・ジュエルより強力なエネルギー・ビームを照射。意思により己の質量を変化させることが可能で、完全に触れることのできない状態からダイアモンドをも凌駕する硬さになる。超人的な速度で情報処理や高度な計算をすることも可能。"
    ),
    .init(
        character: "アントマン",
        icon: "10",
        text: "元泥棒のスコット・ラングは病気で苦しむ娘を助けるために大きさを変化させるスーツを盗んだことがあった。するとその技術は世界的に有名なハンク・ピム博士のものだと知る。博士はスコットのなかにヒーローとしての素質を感じ、スーツを引き続き使用する許可を与えるとともに、かつて博士も悪と戦う時に使っていた名前を名乗ることも許した。アストニッシング・アントマンとして、スコットは他のスーパーヒーローが扱うのには“小さすぎる”仕事を引き受けるようになっている。",
        name: "スコット・エドワード・ハリス・ラング",
        height: "182.8cm",
        weight: "86.1kg",
        ability: "ピム粒子を注入した特別なスーツを使い、アリに近い大きさまで縮むことができる。さらにはスーツを限界まで使うことで原子に近い小ささにまでなることもできるが、小さく縮んでも元の腕力は保持している。特殊なヘルメットを装着する事で、アリや他の昆虫とテレパシーで通信するこもできる。また彼は、電子の高度な知識を持ち、熱心な発明家でもある。"
    ),
    .init(
        character: "ブラックパンサー",
        icon: "11",
        text: "隔絶されながらも発達した技術を持つアフリカの国家、ワカンダの王、ティ・チャラがブラックパンサーである。ブラックパンサーの名はワカンダの統治者が代々引き継ぎ、そのためには己の力で獲得しなければならない 神聖な名である。儀式で魔法的なハートの形をしたハーブを摂取することで超人的な能力を与えられるブラックパンサーは、彼の民と世界をあらゆる脅威から守る使命を担っている。",
        name: "ティ・チャラ",
        height: "182.8cm",
        weight: "90.7kg",
        ability: "ブラックパンサーは、高められた腕力、スピード、持久力、敏捷性そして反射神経を持ち、格闘技、アクロバット、手で扱える武器の達人でもある。エネルギー・ダガーをはじめとしたワカンダの高度な技術を使いこなし、ヴィヴラニウムを編み込まれたボディ・アーマーやステルス航空機なども自在に操る。天才的な知性を誇り、物理の知識が豊富で発明にも長けている。"
    ),
    .init(
        character: "ロキ",
        icon: "12",
        text: "アスガルドにてマイティ・ソーとともに育てられたロキは、気高い乳兄弟に対する嫉妬心で生来のいたずら心が本物の悪の感情へと変化してしまった。常に兄の高潔な行いに挑戦する機会を伺い、アスガルドと地球双方を支配するために人の心を操り欺く能力を駆使する。己の悪巧みの成功以外何も望まず、そのために嘘もつき、人を欺き、あらゆる背徳的行為を行い、己がアスガルドの同胞たちよりも優れていることを証明しようとするのである。",
        name: "ロキ・ラウフェイソン",
        height: "193cm",
        weight: "238.1kg",
        ability: "ロキは、超人的な腕力、敏捷性、耐久力、それと負傷に対する抵抗力を持つ。異世界の実質上不死の種族、ヨトゥンの血を引く。現実操作の達人で、姿を変化させたり、人の心を操ったり、幻影を見せることができる。魔法の杖を操り、先に述べた力をさらに強化することもできる。"
    ),
    .init(
        character: "ウルトロン",
        icon: "13",
        text: "元々は人類の助けになるためにプログラムされていた人工知能のウルトロンは、その起動時に人類を助ける最も良い方法は絶滅させることだと考えた。おぞましい計画を実行に移すべく、この不安定なヴィランは敵としてこの上なく危険であることを証明する。事実上どのようなコンピューター・ネットワークにも侵入することが可能で、強力な機械の身体を際限なく作り続け根城としていく。 倒された後でもウルトロンの脅威は常に存在し続け、彼のプログラムの断片だけでも見つかれば、最終的には意識全てが回復し、復活へを遂げるのである。",
        name: "ウルトロン",
        height: "多種多様",
        weight: "多種多様",
        ability: "実質上どんなコンピューター・システムにも現れ、乗っ取ることができ、身体から切り離されても可能である。コンピューター上で比肩するものはほとんどいない。ロボットの姿をしているときは、超人的な腕力、耐久力とスピードを駆使する。ほとんどの身体のタイプは飛行と破壊光線の照射能力をもつ。"
    ),
    .init(
        character: "レッドスカル",
        icon: "14",
        text: "第２次世界大戦中、スティーブ・ロジャースをキャプテン・アメリカへと変貌させて超人血清と同じものがヒドラの首謀者、ヨハン・シュミットにも与えられ、腕力と持久力を大いに高めた。しかしながら、その過程が不完全なものであったため、 シュミットの顔を恐ろしく崩れてしまい、骸骨のような顔になってしまった。その日以来、彼はレッドスカルとして恐れられ、シュミットとヒドラ軍はキャップと戦時中幾度となく戦った。そして双方が戦時中に行方不明になったかと思われていたが、現代になり蘇り、善と悪の戦いをいまだ繰り広げているのである。",
        name: "ヨハン・シュミット",
        height: "191.4cm",
        weight: "88.4kg",
        ability: "破壊活動組織ヒドラの司令で、忠誠心の高い兵士と高度な武器、技術、資源を自由に扱うことができる。身体的状態の頂点にあり、腕力、耐久力そして敏捷性が強化されている。加えて、軍の指導者としても戦略家としても有能で、優れた知性をもち天才的な発明家でもある。"
    )
]

実装

import SwiftUI

struct ContentView: View {
    var body: some View {
        List(Characters) { character in
            VStack(alignment: .leading, spacing: 10) {
                Text(character.name)
                    .font(.system(size: 15, weight: .medium, design: .default))
                    .lineLimit(1)
                HStack(alignment: .center, spacing: 10) {
                    Image(character.icon)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(height: 100)
                        .cornerRadius(10)
                    Text(character.text)
                        .frame(height: 100)
                        .fixedSize(horizontal: false, vertical: true)
                }
            }
            .padding(.all, 10)
            .frame(maxWidth: .infinity, minHeight: 120)
            .background(Color.white.opacity(0.3))
            .cornerRadius(10)
            .listRowBackground(Color.clear)
            .listRowSeparator(.hidden)
        }
        .listStyle(.plain)
        .background(BackgroundView())
    }
}

ポイント

ポイント1
.listStyle(.plain)
リストのスタイルをplainにします。

ポイント2
.listRowBackground(Color.clear)
Listの全てのRowを透明にします。

ポイント3
.listRowSeparator(.hidden)
Listのセパレーターを非表示にします。

ポイント4
.background(BackgroundView())
Listに好きな背景を設定します。

参考にしたデザイン

こちらの方はScrollViewで作成していました。
https://thehappyprogrammer.com/custom-list-in-swiftui