DartにおけるList型について

f# DartにおけるList型について

概要

Dartでは、配列のようなList型を扱うことが出来る。

以下にコード例を示す。

List _list = ["apple", "orage", "banana"];

大かっこで囲むようにして記述する。

構成要素

初期値

初期値を入れる際には、上記のような書き方もできるが、generateを使用することが出来る。

List _list = List.generate( Listの長さを決定する値, (index) => 値)

型

Dartのジェネリクスを使用するとListの中にある型を決めることが出来る。

List<String> _list = ["apple", "orage", "banana"];

不変な型からのコピー

fromメソッドを使用するとListのコピーが出来る。

List<String> _list1 = const ["apple", "orage", "banana"];
List<String> _list2 = List.from(_list1);

String ⇐> List

String ⇒ List

String型からList型への変換には、joinメソッドを使用する。
引数にどの文字で分割するかを指定する。

String str = "apple,banana,melon";
List<String> list = str.join(",");

List ⇒ String

List型からString型への変換には、splitメソッドを使用する。
引数にどの文字で分割するかを指定する。

List<String> list = ["apple","banana","melon"];
String str = list.split(",");

すべてに操作

Transclude of 20240512073340-TalkWithAI-phind-Log-FlutterのDartでListの要素すべてに変更を加えたい

ListView

List型はListViewウィジェットと相性が良い。

FlutterにおけるListViewウィジェットの使い方について

FlutterにおけるListViewの使い方について

概要

Flutterでは、ListViewを使用することが出来る。

ListViewはListView.builderを使用する。
要素の数をitemCountで指定する。

要素の数が静的

以下に要素が10個のリストのコード例を示す。

body: 
	ListView.builder( 
		itemBuilder: 
		(
			BuildContext context, int index
		) { 
			return Text(index.toString()); 
		}, 
		itemCount: 10,
	),

要素の数が動的(変数で指定)

以下にList型の変数の中身を静的に描画するコード例を示す。

listItem変数を宣言してから、List内の要素をlistItem.lengthでListの要素の数にしている。

class ListState extends State<HomeWidget> {
	var listItem = ["one", "two", "three"];
	
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: Text('List Test'),
			),
			body: ListView.builder(
				itemBuilder: (BuildContext context, int index) {
					return Text(listItem[index]);
				},
				itemCount: listItem.length,
			),
		);
	}
}

遅延改善

addAutomaticKeepAlivesを使用するとパフォーマンス向上を図ることが出来る。
再描画を防止する。

addAutomaticKeepAlives: true,

スクロール

スクロール制御は以下のノート参照。

Flutterにおけるスクロール制御について

Flutterにおけるスクロール制御について

概要

FlutterのListViewウィジェットには、scrollControllerプロパティが存在する。
これは、ListViewウィジェットを自動的にスクロールできるようにするものである。

final ScrollController _scrollController = ScrollController(); 
List<String> _list = List.generate(50, (index) => 'Item $index'); 
 
void _scrollToTop() { 
	_scrollController.animateTo( 
		0.0, // 一番上にスクロール 
		duration: Duration(milliseconds: 500), // アニメーションの時間 
		curve: Curves.easeInOut, // アニメーションカーブ 
	); 
}

元記事へのリンク

押された要素だけ変更する

押されたListTileウィジェットだけスタイルなどを変更する場合にはList型のselected変数を用意する。

以下にコード例を示す。

List fruitList = ["apple", "orrange", "banana", "grape", "nasi"];
List<bool> selected = List.generate(fruitList.length, (index) => false);
 
return Scaffold(
	body: ListView.builder(
		itemBuilder: (BuildContext context, Int index) {
			return ListTile(
				title: Text(fruitList[index]),
				tileColor: selected[index] ? red : blue,
				onTap: () => setState(() => 
					selected[i] = !selected[i]
				),
			);
		},
	),
);

押されたListTileの色が青から赤になるコードである。

元記事へのリンク

応用

重複要素削除

以下の関数を使用すると重複要素の削除が行える。

extension DuplicatesRemover on List {
  List<dynamic> get removeDuplicates {
    return this.toSet().toList();
  }
}