【HarmonyOS開発】ArkTS超詳しく入門(1) オリジナル
序文：
このシリーズは、皆さんが ArkTS 言語を学ぶのに役立つ、私にとって最もわかりやすいシリーズです。
1.プロジェクトの作成
DevEco Studio を開き、次のインターフェイスに入ります。
「プロジェクトの作成」をクリックして作成します
ここではデフォルトで最初のものを選択しています。「次へ」をクリックするだけで次のステップに進み、作成を完了できます。
このようにして、新しいプロジェクトが作成されます
このようにして、プロジェクトが作成されます
2. 基本的な構文の概要
この Hello World を開いたとき、誰もが少し混乱するでしょうか? どこから始めればいいのかわかりませんよね？気にしないで、分解しましょう
これらの部分に分割できますが、理解できない場合は、以下のコロン以降の内容を一時的に無視しても問題ありません。
- **デコレータ:** クラス、構造体、メソッド、変数を装飾し、それらに特別な意味を与えるために使用されます。たとえば、上記の例では、@Entry、@Component、@State はすべてデコレータです。@Component はカスタム コンポーネントを表し、@Entry はエントリ コンポーネントとしてのカスタム コンポーネントを表し、@State はコンポーネント内の状態変数を表します。状態変数に を指定すると、UI がトリガーされます。
- **UI の説明:** build() メソッドのコード ブロックなど、UI の構造を宣言的な方法で記述します。
- **カスタム コンポーネント:** @Component で装飾された上記の構造体 Hello など、他のコンポーネントと組み合わせることができる再利用可能な UI ユニット。
- **システム コンポーネント:** ArkUI フレームワークにデフォルトで組み込まれている基本コンポーネントとコンテナ コンポーネント (例の Column、Text、Divider、Button など) は開発者が直接呼び出すことができます。
- **プロパティ メソッド:** コンポーネントは、fontSize()、width()、height()、backgroundColor() などのチェーン呼び出しを通じて複数のプロパティを設定できます。
- **イベント メソッド:** コンポーネントは、Button に続く onClick() などのチェーン呼び出しを通じて、複数のイベントの応答ロジックを設定できます。
これらについては説明がたくさんあり、初心者にとっては少しわかりにくいですが、この一般的な形式を覚えていれば次のようになります
@Entry
@Component
struct Index {
//放你写的数据
build() {
//放你写的页面代码
}
}1.2.3.4.5.6.7.8.9.10.
書きたい内容を直接記入するだけで大丈夫です。
3. レイアウト
以下の内容は少し複雑ですが、初心者の方は分からない場合は、とりあえず直線的なレイアウトだけ見ていただければ大丈夫です、これが最もよく使われるレイアウト方法です。
1. 直線的なレイアウト (行、列)
- **線形レイアウト (行、列):** レイアウト内に複数のサブ要素があり、それらを何らかの方法で線形に配置できる場合、このレイアウトが優先されます。
2. スタックレイアウト（スタック）
- カスケード レイアウト** (スタック): **コンポーネントにスタッキング効果が必要な場合、このレイアウトが優先されます。カスケード レイアウトのスタッキング効果は、同じコンテナ内の他のサブコンポーネントのレイアウト スペースを占有したり、影響を与えたりすることはありません。たとえば、パネルがサブコンポーネントとしてポップアップする場合、他のコンポーネントをカバーする方が合理的であるため、外側のレイヤーでスタック レイアウトを使用することが優先されます。
3. 柔軟なレイアウト（フレックス）
- フレキシブル レイアウト** (フレックス): **フレキシブル レイアウトは、リニア レイアウトに似たレイアウト方法です。違いは、エラスティック レイアウトではデフォルトで子コンポーネントを圧縮または拡張できることです。このレイアウトは、サブコンポーネントが伸縮率または圧縮率を計算する必要があるときに最初に使用され、複数のコンテナ内のサブコンポーネントがコンテナの視覚的な充填効果を向上させることができます。
4. 相対レイアウト(RelativeContainer)
- 相対レイアウト** (RelativeContainer):** 相対レイアウトは 2 次元空間上での配置方法であり、線形レイアウトのルールに従う必要がなく、より自由な配置方法です。サブコンポーネントにアンカー ルール (AlignRules) を設定することにより、サブコンポーネントは水平軸および垂直軸の位置をコンテナまたはコンテナ内の他のサブコンポーネントの位置に揃えることができます。設定されたアンカー ポイント ルールは、サブ要素の圧縮、ストレッチ、スタッキング、または複数行の効果を自然にサポートできます。ページ要素の分散が複雑な場合、または線形レイアウトによりコンテナのネスト レベルが深すぎる場合に、これを使用することをお勧めします。
5. グリッドレイアウト（GridRow、GridCol）
- グリッド レイアウト** (GridRow、GridCol): **グリッドは、スペースを規則的なグリッドに分割することにより、マルチデバイス シナリオにおける一般的な補助位置決めツールです。グリッドは、グリッドレイアウトの固定的な空間分割とは異なり、デバイスごとに異なるレイアウトを実現でき、空間分割はより任意であるため、異なる画面サイズに適応するための設計開発コストが大幅に削減され、全体的な設計開発プロセスが短縮されます。より整然としたリズム感を実現しながら、複数のデバイス上でのアプリケーション表示の調整と一貫性を確保し、ユーザー エクスペリエンスを向上させます。コンテンツは同じでレイアウトが異なる場合に使用することをお勧めします。
6. メディアクエリ (@ohos.mediaquery)
- メディア クエリ** (@ohos.mediaquery): **メディア クエリは、異なるデバイス タイプまたは同じデバイスの異なる状態に応じてアプリケーション スタイルを変更できます。例えば、デバイスとアプリケーションの異なる属性情報に基づいて異なるレイアウトを設計し、画面が動的に変化するときにアプリケーションのページレイアウトを更新します。
7. リスト
- リスト: リストを使用して、構造化されたスクロール可能な情報を簡単かつ効率的に表示します。ArkUI では、リストには縦横のレイアウト機能と、軸を横切る方向の項目数を適応的に配置する機能があり、画面を超えた場合にはスクロールすることができます。リストは、画像やテキストなど、同種のデータ型またはデータ型のセットを表すのに適しています。
8.グリッド
- グリッド** (グリッド): **グリッド レイアウトには、強力なページ均等化機能とサブコンポーネントの比率を制御する機能があり、重要な適応レイアウトです。グリッド レイアウトでは、要素が占めるグリッドの数を制御したり、複数の行または列にまたがるようにサブコンポーネントを設定したり、グリッド コンテナーのサイズが変化したときにすべてのサブコンポーネントと間隔を比例して調整したりできます。電卓、フォト アルバム、カレンダーなど、固定比率や均等なスペース配分が必要なレイアウト シナリオで使用することをお勧めします。
9.スワイパー
- カルーセル(スワイパー): カルーセル コンポーネントは通常、広告カルーセル、画像プレビュー、スクロール可能なアプリケーションなどを実装するために使用されます。
使用
まだ理解していなくても問題ありませんが、ここでは最も一般的に使用される直線レイアウトのみを見ていきます。
直線的なレイアウトには 2 つのタイプがあります。
1 つは縦方向の直線的なレイアウトです。
もう 1 つは水平直線レイアウトです。
作成したコードにそれらを追加します
@Entry
@Componentstruct Index {
//放你写的数据
build() {
Row() {
Column() {
//放你写的组件
}
}
}
}1.2.3.4.5.6.7.8.9.10.11.
このようにしてページレイアウトが記述できたので、ページレイアウト内にコンポーネントを記述していきます。
4.コンポーネント
次に、ページにコンポーネントを追加します
共通コンポーネントは、
- ボタン
- 単一ボックス
- トグルボタン
- プログレスバー
- テキスト表示
- テキスト入力
- カスタムポップアップウィンドウ
- プレイバック
- Xコンポーネント
今日はまずボタンとテキスト表示を見てみましょう
1.コンポーネントフォーマット
コンポーネントの形式は基本的に次のようになります
2. テキストコンポーネントの使用
右側の小さな目をクリックして効果をプレビューしましょう。
それがそのようです
同様に、線形レイアウトの下に変更を追加して、テキストが画面の中央に表示されるようにします。
.width('100%') は、垂直レイアウトの幅が画面の幅全体を占めるようにし、テキストが左右の中央に配置されるようにします。
同様に、.height('100%') は、横レイアウトの高さが画面全体の高さを占め、テキストを上下の中央に配置します。
3.ボタンコンポーネントの使用
次に、ボタン Bottom コンポーネントを追加します。
@Entry
@Component
struct Index {
@State message: string = 'Hello World‘
build() {
Row() {
Column() {
//文本组件
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
//按钮组件
Button('按钮中的内容')
.onClick(() => { //点击
//点击按钮后发生的事情
})
}
.width('100%')
}
.height('100%')
}
}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.
たとえば、これは私がデモに使用したものです
ボタンをクリックするとメッセージの内容が変わります。ボタンをクリックした後の効果は次のとおりです。
今日の内容は以上です
終わり
今日からArkTSを始めて、コンポーネントの適用などの事前打ち合わせをしてきましたが、間違いがあればコメント欄で修正していただければと思いますので、早くArkTSマスターになっていただければ幸いです。
ここでは、「Hongmeng (HarmonyOS) 開発学習ガイド」を作成し、Hongmeng を学びたいが方向性が分からない人に役立つことを願っています。(内容が多すぎるため、皆様の読書体験に影響を与えないよう、スクリーンショットでは内容の一部のみを掲載しています。詳細な完全版を無料で入手する方法は記事の最後にあります。)
『HarmonyOS開発学習ガイド』
第 1 章 クイックスタート
1. 開発準備
2. 最初の ArkTS アプリケーション (ステージ モデル) を構築する
3. 最初の ArkTS アプリケーション (FA モデル) を構築する
4. 最初のJSアプリケーション（FAモデル）をビルドする
5、…
第2章 開発の基礎
1. アプリケーションパッケージの基礎知識
2. アプリケーション構成ファイル（ステージモデル）
3. アプリケーション設定ファイル概要（FAモデル）
4、…
第 3 章 リソースの分類とアクセス
1. リソースの分類とアクセス
2. リソースディレクトリとリソースファイルを作成する
3. リソースへのアクセス
4、…
第 4 章 ArkTs 言語の学習
1. ArkTS 言語の最初の紹介
2. 基本的な文法
3. ステータス管理
4. その他のステータス管理
5. レンダリング制御
6、…
第5章 UI開発
1. Ark開発フレームワーク(ArkUI)の概要
2. ArkTS 宣言型開発パラダイムに基づく
3. JSと互換性のあるWebライクな開発パラダイム
4…
第6章 ウェブ開発
1. Webコンポーネントの概要
2. Web コンポーネントを使用してページをロードします
3. 基本的なプロパティとイベントを設定する
4. アプリケーションでフロントエンド ページ JavaScript を使用する
5. ArkTS言語基本クラスライブラリの概要
6. 同時実行性
7…
11. ネットワークと接続
12. 電話サービス
13.データ管理
14.ファイル管理
15.バックグラウンドタスク管理
16.デバイス管理
17…
第7章 アプリケーションモデル
1. アプリケーションモデルの概要
2.ステージモデル開発指導
3.FAモデル開発指導
4…
下のQRコードをスキャンして「Hongmeng Study Guide」を無料で入手してください
|
