質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

ウィジェット

ウィジェットとはユーザインタフェイスの要素(GUI widget)であるか、もしくは、独立した比較的サイズの小さいソフトウェアアプリケーション(desktop widget)のことを指します。

Q&A

解決済

1回答

1306閲覧

Flutter ListView一意な値の保持方法

HS1111

総合スコア91

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

ウィジェット

ウィジェットとはユーザインタフェイスの要素(GUI widget)であるか、もしくは、独立した比較的サイズの小さいソフトウェアアプリケーション(desktop widget)のことを指します。

0グッド

0クリップ

投稿2022/01/04 04:37

編集2022/01/04 04:54

Flutter初学者です。

JSONからEntityオブジェクトを介してListView.builderウィジェットで一覧表示しています。
そのリストのonTapイベントで該当行の詳細画面を遷移させたいのですが、一意なレコードキーの保持方法がわかりません。

JSですと、domにdata-hogehogeなどの独自属性を追加して管理していますが、同じ様な考え方で問題ないでしょうか?

<ul id='hoge-list'> <li data-hogehoge='1'>aaaa</li> <li data-hogehoge='2'>bbbb</li> <li data-hogehoge='3'>cccc</li> </ul> <script> const _li = document.querySelector('#hoge-list > li') for(i = 0;i < _li.length;++i) { _li[i].addEventListener(() => { const _id = this.target.getAttribute('data-hogehoge'); /* _idを使って非同期処理して画面表示の処理を書く */ }); } </script>

その場合、各一覧にレコードキーをどの様に保持しますか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

flutterのListViewを使う場合、ネタ元になるデータリストがあるはずで、その中に必要なものをMapで管理するとか、データの持ち方工夫して上手くやれば何でもいいんじゃないでしょうか。

dart

1 static const itemList = [ // 行ごとにデータまとめて持っているなら、 2 {'val': '犬', 'key': '1'}, 3 {'val': '猫', 'key': '2'}, 4 {'val': '猿', 'key': '3'}, 5 ]; 6 7 8 Widget build(BuildContext context) { 9 10 .... 11 12 child: ListView.separated( 13 itemCount: itemList.length, 14 itemBuilder: (ctx, i) { 15 var val = itemList[i]['val'].toString(); // 行番号だけで何とでもなるはず

Web画面のDom上で各行にデータを持たせるやり方は別に必須というわけでは無く、要は「各行に表示した内容とデータの関連が、プログラム的に管理出来ていれば何でもいい」だと思うので、まずレコードにデータを独自属性的なもので埋め込む、というイメージは一旦リセットして考えていいんじゃないかと。

(ちなみにWebでDOMに属性で追加して管理するやり方自体は、それが分かりやすくて簡単だからという事で、ダメと言っているわけでは無いので悪しからず。Flutterに同機能があるかどうかは知らないです)

試しにListViewから画面遷移するコードを書いてみたので参考に置いておきます。

DartPad (Runボタンで実行可能)

※僕もFlutterはさわり始めたばかりなので、もっといいやり方、いろんな方法があると思います。あくまで参考ということで。

投稿2022/01/04 12:21

umau

総合スコア805

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HS1111

2022/01/04 14:42

ご丁寧に有難御座います。 お陰さまで解決出来ました! 私の実装に問題がありました。 画面が少々複雑でwidgetツリーが大きく見通しが悪かったので、部品ごとにコンポーネントに切り出しておりましたが、関数コンポーネントで作ってしまっていたため値の受け渡しに難がありました。 クラスコンポーネントに変更し対応しました。 にせよwidget構造は初学者の壁ですね・・ (慣れかもしれませんが、ロジック以外の所で立ち止まってしまいますw)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問