FlutterにおけるListTileは、タイトル、サブタイトル、アイコンなどの要素を含む、一般的なリストアイテムを表します。このウィジェットは、ListViewのリストビュー内で使用されることが一般的です。ListViewについては以下の記事にまとめていますので、よかったら見てみてください。
以下に、ListTileウィジェットの主要なプロパティとその使い方を紹介します。
ListTileの主要なプロパティ
title
titleプロパティは、リストアイテムの主要なテキストを表します。通常は、フォントサイズや色などのスタイルを指定するために、Textウィジェットで包むことが多いです。例えば、以下のようになります。
ListTile(
title: Text('タイトル'),
)subtitle
subtitleプロパティは、リストアイテムのサブテキストを表します。タイトルと同様に、通常はTextウィジェットで包まれ、サブテキストのスタイルを設定するために使用されます。
ListTile(
title: Text('タイトル'),
subtitle: Text('サブタイトル'),
)leading
leadingプロパティは、リストアイテムの先頭に表示されるアイコンを表します。アイコンを表示するために、通常はIconウィジェットを使用します。
ListTile(
leading: Icon(Icons.check),
title: Text('タイトル'),
subtitle: Text('サブタイトル'),
)ここまでのプロパティを利用したサンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Navigator',
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
},
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView Example'),
),
body: ListView(
children: [
ListTile(
leading: Icon(Icons.check),
title: Text('John Doe'),
subtitle: Text('johndoe@example.com'),
),
ListTile(
leading: Icon(Icons.check),
title: Text('Michel Shawn'),
subtitle: Text('michelshawn@example.com'),
),
],
),
);
}
}
これ以降のサンプルコードは、ListView ブロックのみ抜粋して記載します。
trailing
trailingプロパティは、リストアイテムの末尾に表示されるアイコンを表します。例えば、ListTile内でCheckboxウィジェットを使用する場合、trailingプロパティを使用してチェックボックスを配置できます。
ListTile(
title: Text('タイトル'),
trailing: Checkbox(
value: true,
onChanged: (bool value) {},
),
)onTap
onTapプロパティは、リストアイテムがタップされたときに実行されるコールバック関数を指定します。通常、このプロパティを使用して、リストアイテムをタップすると別の画面に遷移するなどのアクションを実行します。
ListTile(
title: Text('タイトル'),
onTap: () {
// 画面遷移などのアクションを実行する
},
)ここまでのプロパティを利用したサンプルコード
ListView(
children: [
ListTile(
leading: Icon(Icons.check),
title: Text('John Doe'),
subtitle: Text('johndoe@example.com'),
trailing: Checkbox(
value: false,
onChanged: (value) {},
),
),
ListTile(
leading: Icon(Icons.circle),
title: Text('Michel Shawn'),
trailing: Checkbox(
value: true,
onChanged: (value) {},
),
),
],
)
selected
selectedプロパティは、リストアイテムが選択されたときに、選択状態を表示するために使用されます。通常、このプロパティはListViewの選択モードと一緒に使用されます。
ListTile(
title: Text('タイトル'),
selected: true,
onTap: () {
// 選択アクションを実行する
},
)enabled
enabledプロパティは、リストアイテムが有効か無効かを示します。無効なリストアイテムは、通常、グレーアウトされて表示され、タップされたときに何も起こりません。
ListTile(
title: Text('タイトル'),
enabled: false,
)selected/enabled を利用したサンプルコード
ListView(
children: [
ListTile(
leading: Icon(Icons.circle),
selected: true,
title: Text('John Doe'),
subtitle: Text('johndoe@example.com'),
),
ListTile(
leading: Icon(Icons.circle),
enabled: false,
title: Text('Michel Shawn'),
),
],
),
contentPadding
contentPaddingプロパティは、リストアイテムの内部余白を調整するために使用されます。これは、リストアイテムが大きすぎる場合に、テキストやアイコンが画面外にはみ出るのを防ぐのに役立ちます。
ListTile(
title: Text('タイトル'),
contentPadding: EdgeInsets.all(16.0),
)dense
denseプロパティは、リストアイテムの高さを縮小するために使用されます。これは、通常、リストアイテムが密に配置される場合に使用されます。
ListTile(
title: Text('タイトル'),
dense: true,
)isThreeLine
isThreeLineプロパティは、リストアイテムが3行テキストを含む場合に使用されます。これは、タイトル、サブタイトル、および2行目のサブタイトルを含むようにリストアイテムをレイアウトします。
ListTile(
title: Text('タイトル'),
subtitle: Text('サブタイトル1\nサブタイトル2'),
isThreeLine: true,
)まとめ
以上が、ListTileウィジェットの主要なプロパティです。これらを組み合わせて、カスタムリストアイテムを作成することができます。Flutterは、豊富なウィジェットライブラリを備えており、開発者がモバイルアプリをより簡単に開発できるように支援しています。