PR
Shuichi-Y
Unityでゲームを制作してみました… unityroomに公開できました… よろしくお願いいたします… m(__)m
Calendar
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(0)作成（Terrain）
(7)作成（ProBuilder）
(3)作成（Cube, Sphere）
(18)作成（Title, GAMEOVER）
(2)作成（VRoid）
(2)作成（Blender）
(26)作成（VRoid → Blender → Unity）
(15)作成（TreeIt）
(10)作成（TreeIt → Blender → Unity）
(3)作成（Unity_Scene）
(2)作成（調整）
(24)作成（その他）
(9)unityroom
(4)Led点灯（Arduino）
(2)C#のプログラミングのツボとコツ（書籍）
(4)Unity勉強（XR-Hub_小技集）
(39)Unity勉強（XR-Hub_ゲーム作成）
(12)Unity勉強（XR-Hub_C#）
(10)Unity勉強（本格入門）
(37)Unity勉強（Learn）
(189)作成（Blender → Unity）
(8)Flutter実践入門…
(28)Flutter入門講座
(55)LED Photos
(73)Comments
2024.01.20
カテゴリ： Flutter実践入門…
ボタンを追加する
「ビジネス ロジック」からは離れて、今度はまたユーザー インターフェースに関する作業を行いましょう。[Like] ボタンを [Next] ボタンの左に配置するには、Row が必要です。Row ウィジェットは、先程の Column と同等ですが、こちらは水平方向です。
まず、既存のボタンを Row で包みます。MyHomePage の build() メソッドに移動し、ElevatedButton にカーソルを置いて、[Refactor] メニューを Ctrl+. または Cmd+. で呼び出し、[Wrap with Row] を選択します。
保存すると、Row が Column と同じような働きをして、子を左にまとめているのがわかります（Column は子を上にまとめていました）。これを修正するために、前と同じ方法を使えますが、今回は mainAxisAlignment で行います。しかし、教育の目的で mainAxisSize を使用します。これは、Row に対して水平方向のスペースをすべて埋めないように指示するものです。
mainAxisSize: MainAxisSize.min, // ← Add this.
次に [Like] ボタンを追加し、それを toggleFavorite() に接続します。まず試しに、次のコードブロックを見ずに、自分でやってみてください。
出来たような、カンニングをしたような感じですね…
以下は、MyHomePage に 2 つ目のボタンを追加する方法の 1 つです。今回は ElevatedButton.icon() コンストラクタを使用してアイコン付きのボタンを作成します。また build メソッドの最初では、現在の単語ペアがすでにお気に入りにあるかどうかに応じて適切なアイコンを選びます。さらに、SizedBox を再度使用し、2 つのボタンの間隔を少し広げています。
| // ↓ Add this. |
|---|
| IconData icon; |
| if (appState.favorites.contains(pair)) { |
| icon = Icons.favorite; |
| } else { |
| icon = Icons.favorite_border; |
| } |
| // ↓ And this. |
|---|
| ElevatedButton.icon( |
| onPressed: () { |
| appState.toggleFavorite(); |
| }, |
| icon: Icon(icon), |
| label: Text('Like'), |
| ), |
動作しているだけです…
お気に入りの記事を「いいね！」で応援しよう
Last updated
2024.01.20 19:00:10 コメントを書く
[Flutter実践入門…] カテゴリの最新記事
-
flutterでアプリの作成…？（初めての Flut… 2024.01.27
-
flutterでアプリの作成…？（初めての Flut… 2024.01.26
-
flutterでアプリの作成…？（初めての Flut… 2024.01.25
【毎日開催】
15記事にいいね！で1ポイント
・2026.05
・2026.04
・2026.03
・2026.04
・2026.03
・2026.02
・2026.01
・2026.01
© Rakuten Group, Inc.
