HStack, VStack, ZStack
SwiftUIレイアウト: HStack, VStack, ZStackをマスターしよう! SwiftUIは、Appleプラットフォーム向けのUI構築のためのモダンなフレームワークです。この記事では、SwiftUIにおける基本的なレイアウトコンテナであるHStack、VStack、ZStackの使い方を、サンプルコードを交えながら詳しく解説します。これらのコンテナを理解することで、複雑なUIも柔軟に構築できるようになります。 SwiftUIとは? SwiftUIは、宣言的なUIフレームワークであり、従来の命令型UIフレームワークとは異なるアプローチでUIを構築します。コードはUIの状態を記述し、システムが自動的にUIを更新します。これにより、コードの可読性と保守性が向上し、UI開発の効率が大幅に向上します。SwiftUIは、iOS、macOS、watchOS、tvOSなどのAppleプラットフォームで利用可能です。 レイアウトの基本:HStack, VStack, ZStackの紹介 SwiftUIにおけるレイアウトは、コンテナと呼ばれる要素を使用して構築します。主要なコンテナとして、HStack、VStack、ZStackがあります。これらのコンテナを組み合わせることで、様々なUIレイアウトを実現できます。 HStack: 水平方向のレイアウト HStackは、子要素を水平方向に並べて配置します。子要素は、左から右の順に配置されます。 VStack: 垂直方向のレイアウト VStackは、子要素を垂直方向に並べて配置します。子要素は、上から下の順に配置されます。 ZStack: 重ね合わせのレイアウト ZStackは、子要素を重ねて配置します。デフォルトでは、後から追加された要素が手前に表示されます。 サンプルコードで学ぶHStack 基本的なHStackの記述方法は以下の通りです。 HStack { Text(...