Flutter-introduction-to-widgets

提供：Dev Guides
移動先:案内、検索

Flutter-ウィジェットの紹介

前の章で学んだように、ウィジェットはFlutterフレームワークのすべてです。 前の章で新しいウィジェットを作成する方法をすでに学びました。

この章では、ウィジェットを作成する背後にある実際の概念と、_Flutter_フレームワークで使用可能なさまざまなタイプのウィジェットを理解しましょう。

_Hello World_アプリケーションの_MyHomePage_ウィジェットを確認しましょう。 この目的のためのコードは以下のとおりです- 

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);

   final String title;
   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title), ),
         body: Center(child: Text( 'Hello World',)),
      );
   }
}

ここでは、_StatelessWidget_を拡張して新しいウィジェットを作成しました。

_StatelessWidget_では、派生クラスに実装される単一のメソッド_build_のみが必要であることに注意してください。 _build_メソッドは、_BuildContext_パラメーターを介してウィジェットをビルドするために必要なコンテキスト環境を取得し、ビルドしたウィジェットを返します。

コードでは、コンストラクター引数の1つとして_title_を使用し、別の引数として_Key_を使用しました。 _title_はタイトルを表示するために使用され、_Key_はビルド環境でウィジェットを識別するために使用されます。

ここで、_build_メソッドは_Scaffold_の_build_メソッドを呼び出し、_Scaffold_は_AppBar_および_Center_の_build_メソッドを呼び出して、そのユーザーインターフェイスを_build_します。

最後に、_Center_ビルドメソッドは_Text_ビルドメソッドを呼び出します。

より良い理解のために、同じものの視覚的表現を以下に示します-

視覚的表現

ウィジェットビルドの視覚化

_Flutter_では、以下にリストするように、ウィジェットを機能に基づいて複数のカテゴリにグループ化できます-

  • プラットフォーム固有のウィジェット
  • レイアウトウィジェット
  • 状態維持ウィジェット
  • プラットフォームに依存しない/基本的なウィジェット

それぞれについて詳しく説明しましょう。

プラットフォーム固有のウィジェット

Flutterには、特定のプラットフォーム（AndroidまたはiOS）に固有のウィジェットがあります。

Android固有のウィジェットは、Android OSの_Material design guideline_に従って設計されています。 Android固有のウィジェットは、_Materialウィジェット_と呼ばれます。

iOS固有のウィジェットは、Appleの_Human Interface Guidelines_に従って設計されており、_Cupertino_ウィジェットと呼ばれます。

最も使用される材料ウィジェットのいくつかは次のとおりです-

  • 足場
  • AppBar
  • BottomNavigationBar
  • TabBar
  • TabBarView
  • ListTile
  • RaisedButton
  • FloatingActionButton
  • フラットボタン
  • IconButton
  • DropdownButton
  • PopupMenuButton
  • ButtonBar
  • テキストフィールド
  • チェックボックス
  • 無線
  • スイッチ
  • スライダー
  • 日付と時刻のピッカー
  • SimpleDialog
  • AlertDialog

最も使用される_Cupertino_ウィジェットのいくつかは次のとおりです-

  • クパチーノボタン
  • クパチーノピッカー
  • クパチーノデイトピッカー
  • CupertinoTimerPicker
  • CupertinoNavigationBar
  • CupertinoTabBar
  • クパチーノタブ足場
  • CupertinoTabView
  • CupertinoTextField
  • クパチーノダイアログ
  • CupertinoDialogAction
  • CupertinoFullscreenDialogTransition
  • CupertinoPageScaffold
  • CupertinoPageTransition
  • クパチーノアクションシート
  • CupertinoActivityIndi​​cator
  • CupertinoAlertDialog
  • CupertinoPopupSurface
  • クパチーノスライダー

レイアウトウィジェット

Flutterでは、1つ以上のウィジェットを構成することでウィジェットを作成できます。 複数のウィジェットを単一のウィジェットに合成するために、_Flutter_はレイアウト機能を備えた多数のウィジェットを提供します。 たとえば、子ウィジェットは、_Center_ウィジェットを使用して中央に配置できます。

人気のあるレイアウトウィジェットのいくつかは次のとおりです-

  • コンテナ-背景、境界線、影付きの_BoxDecoration_ウィジェットを使用して装飾された長方形のボックス。
  • Center -子ウィジェットを中央に配置します。
  • 行-子を水平方向に配置します。
  • 列-子を垂直方向に配置します。
  • スタック-上下に並べます。

レイアウトウィジェットの詳細については、今後の「レイアウトウィジェットの紹介」の章で確認します。

状態維持ウィジェット

Flutterでは、すべてのウィジェットは_StatelessWidget_または_StatefulWidget_から派生します。

_StatelessWidget_から派生したウィジェットには状態情報はありませんが、_StatefulWidget_から派生したウィジェットを含めることができます。 アプリケーションの動的な性質は、ウィジェットの対話型動作と対話中の状態の変化によるものです。 たとえば、カウンターボタンをタップすると、カウンターの内部状態が1つずつ増加/減少し、_Flutter_ウィジェットの反応性により、新しい状態情報を使用してウィジェットが自動的に再レン​​ダリングされます。

_StatefulWidget_ウィジェットの概念については、今後の_State管理の章で詳しく学習します。

プラットフォームに依存しない/基本的なウィジェット

_Flutter_は、プラットフォームに依存しない方法で単純なユーザーインターフェイスと複雑なユーザーインターフェイスを作成するための多数の基本的なウィジェットを提供します。 この章の基本的なウィジェットのいくつかを見てみましょう。

テキスト

_Text_ウィジェットは、文字列を表示するために使用されます。 文字列のスタイルは、_style_プロパティと_TextStyle_クラスを使用して設定できます。 この目的のためのサンプルコードは次のとおりです- 

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

_Text_ウィジェットには、_Text.rich_という特別なコンストラクターがあり、_TextSpan_型の子を受け入れて、異なるスタイルの文字列を指定します。 _TextSpan_ウィジェットは本質的に再帰的であり、_TextSpan_をその子として受け入れます。 この目的のためのサンプルコードは次のとおりです- 

Text.rich(
   TextSpan(
      children: <TextSpan>[
         TextSpan(text: "Hello ", style:
         TextStyle(fontStyle: FontStyle.italic)),
         TextSpan(text: "World", style:
         TextStyle(fontWeight: FontWeight.bold)),
      ],
   ),
)

_Text_ウィジェットの最も重要なプロパティは次のとおりです-

  • maxLines、int -表示する最大行数
  • overflow、TextOverFlow -_TextOverFlow_クラスを使用して視覚的なオーバーフローを処理する方法を指定します
  • style、TextStyle -_TextStyle_クラスを使用して文字列のスタイルを指定します
  • textAlign、TextAlign -_TextAlign_クラスを使用した、右、左、両端揃えなどのテキストの配置
  • textDirection、TextDirection -フローするテキストの方向、左から右または右から左

画像

_Image_ウィジェットは、アプリケーションで画像を表示するために使用されます。 _Image_ウィジェットは、複数のソースから画像をロードするためのさまざまなコンストラクタを提供し、それらは次のとおりです-

  • 画像-_ImageProvider_を使用した汎用画像ローダー
  • Image.asset -flutterプロジェクトのアセットから画像を読み込みます
  • Image.file -システムフォルダから画像をロード
  • Image.memory -メモリから画像をロード
  • Image.Network -ネットワークから画像をロード

_Flutter_に画像を読み込んで表示する最も簡単なオプションは、画像をアプリケーションのアセットとして含め、オンデマンドでウィジェットに読み込むことです。

  • プロジェクトフォルダーにフォルダーとアセットを作成し、必要な画像を配置します。
  • 以下に示すように、pubspec.yamlでアセットを指定します-
flutter:
   assets:
      - assets/smiley.png
  • 次に、アプリケーションに画像をロードして表示します。
Image.asset('assets/smiley.png')
  • hello worldアプリケーションの_MyHomePage_ウィジェットの完全なソースコードと結果は、以下のようになります-
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar( title: Text(this.title), ),
         body: Center( child: Image.asset("assets/smiley.png")),
      );
   }
}

ロードされた画像は以下のようになります-

Hello Worldアプリケーション出力

_Image_ウィジェットの最も重要なプロパティは次のとおりです-

  • image、ImageProvider -ロードする実際の画像
  • width、double -画像の幅
  • height、double -画像の高さ
  • alignment、AlignmentGeometry -境界内で画像を配置する方法

アイコン

_Icon_ウィジェットは、_IconData_クラスで説明されているフォントからグリフを表示するために使用されます。 シンプルなメールアイコンをロードするコードは次のとおりです- 

Icon(Icons.email)

Hello Worldアプリケーションに適用する完全なソースコードは次のとおりです- 

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center( child: Icon(Icons.email)),
      );
   }
}

ロードされたアイコンは以下のとおりです-

ホームページ

「https://www.finddevguides.com/index.php?title=Flutter-introduction-to-widgets&oldid=23553」から取得
Powered by MediaWiki