Atoms-BoxComponent

KotaroはAtomicデザインでコンポーネントを作成していきます。

AtomsとMoleculesにいくつかのコンポーネントを用意してあります。コンポーネントはAtomsからPagesまで全て自作可能です。また、SDL2を用いて直接オブジェクトの描画を操作できます。

CSSのように静的なスタイルではなくオブジェクトのパラメーターを決定した後に描画方法を指定するため、動的にスタイルの変更ができます。

KotaroTestではSliderComponentでパラメーターを決定しTestComponentを描画します。このためグラフィカルなComponentの網羅テストが可能になります。

標準コンポーネントの紹介後チュートリアルでコンポーネントの作成から描画まで解説します。

まずはコンポーネントの配置を決めるBoxComponentを紹介します。

BoxComponentは左上から右下まで９種類の配置を選択できます。

残りのパラメータは幅、高さ、背景色です。ページレイアウトを作成する場合に便利なAtomコンポーネントです。Atomコンポーネントの子要素を設定してアプリケーションを配置することができます。

RectComponentは９種類の配置を指定せずに直接親要素のマージンを指定して配置します。次回以降順番に各コンポーネントを解説します。