Flutter レイアウトの基本 ——Card#
Card、カードスタイルのレイアウトで、少し丸みを帯びた角と影があります。通常、関連情報の表示に使用されます。例えば：アルバム情報、緯度経度、連絡先情報などです。
Card の使用#
では、一般的なリスト要素のコントロールを作成する方法を見てみましょう。左側にはアイコンがあり、その上にタイトル、次に説明、最下部にはボタンがあります。これは注文リストによく見られます。
実現したい効果は以下の通りです：
次に、実現方法を見てみましょう：
ListTile#
ここではListTileについて紹介します。Flutter が提供する固定高さの、左側または右側にアイコンとテキストを持つコントロールです。
実現できる効果は以下の通りです：
コードは以下の通りです：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: new AppBar(
title: new Text('ListTile View'),
),
body: ListView(
children: [
Card(
child: ListTile(
title: Text('ワンラインListTile'),
),
),
Card(
child: ListTile(
leading: FlutterLogo(),
title: Text('リーディングウィジェット付きのワンライン'),
),
),
Card(
child: ListTile(
title: Text('トレーリングウィジェット付きのワンライン'),
trailing: Icon(Icons.more_vert),
),
),
Card(
child: ListTile(
leading: FlutterLogo(),
title: Text('両方のウィジェット付きのワンライン'),
trailing: Icon(Icons.more_vert),
),
),
Card(
child: ListTile(
title: Text('密なワンラインListTile'),
dense: true,
),
),
Card(
child: ListTile(
leading: FlutterLogo(
size: 56.0,
),
title: Text('ツーラインlistTile'),
subtitle: Text('ここに2行目があります'),
trailing: Icon(Icons.more_vert),
),
),
Card(
child: ListTile(
leading: FlutterLogo(),
title: Text('スリーラインListTile'),
subtitle:
Text('十分に長いサブタイトルは3行を必要とします'),
trailing: Icon(Icons.more_vert),
isThreeLine: true,
),
)
],
),
),
);
}
}
上記のコードはListTileの使用を紹介しており、非常に包括的です。
次に、最初に実現したい効果を見てみましょう。既知の基本コントロールに分割すると以下のようになります：
アイコンと右側のタイトルおよび説明は、上で紹介したListTileを使用できます。下の単一ボタンはTextButtonを使用できます（ああ、まだ紹介していません、少々お待ちください。現在はTextを使用できます）、2 つのボタンを水平に配置するにはRowを使用し、ListTileとRowの上下配置にはColumnを使用し、最外層にCardを使用します。カードオブジェクトをまとめるので、最終的なコードは以下の通りです：
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Card View';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Card View',
home: Scaffold(
appBar: new AppBar(title: new Text(_title)),
body: const MyStatelessWidget(),
));
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Card(
child: Column(
children: [
const ListTile(
leading: Icon(Icons.album),
title: Text('魔法のナイチンゲール'),
subtitle: Text('音楽：ジュリー・ゲイブル、歌詞：シドニー・ステニック'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(onPressed: () {}, child: Text('チケットを購入')),
SizedBox(
width: 8,
),
TextButton(onPressed: () {}, child: const Text('聞く')),
SizedBox(width: 8),
],
)
],
mainAxisSize: MainAxisSize.min,
),
),
);
}
}
最終的な効果は上記の通りです。Cardの使用に注意してください。通常はColumnやRowなどの他の集合コンポーネントと組み合わせて実現されます。