Flutter 布局基礎 ——Card#
Cardは、少しの角丸と影を持つカード型のレイアウトです。通常、関連情報の表示に使用されます。例えば、写真アルバムの情報、緯度経度、連絡先情報などです。
Card の使用方法#
まず、一般的なリスト要素のウィジェットを作成する方法を見てみましょう。左側にはアイコン、上部にはタイトル、その下には説明文、最下部にはボタンがあります。これは注文リストなどでよく見られるものです。
実現したい効果は以下の通りです：
それでは、実現方法を見てみましょう：
ListTile#
ここでは、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('One-line ListTile'),
),
),
Card(
child: ListTile(
leading: FlutterLogo(),
title: Text('One-line with leading widget'),
),
),
Card(
child: ListTile(
title: Text('One-Line with trailing widget'),
trailing: Icon(Icons.more_vert),
),
),
Card(
child: ListTile(
leading: FlutterLogo(),
title: Text('One-line with both widgets'),
trailing: Icon(Icons.more_vert),
),
),
Card(
child: ListTile(
title: Text('One-line dense ListTile'),
dense: true,
),
),
Card(
child: ListTile(
leading: FlutterLogo(
size: 56.0,
),
title: Text('Two-line listTile'),
subtitle: Text('Here is a second line'),
trailing: Icon(Icons.more_vert),
),
),
Card(
child: ListTile(
leading: FlutterLogo(),
title: Text('Three-line ListTile'),
subtitle:
Text('A sufficiently long subtitle warrants three lines'),
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('The Enchanted nigtingale'),
subtitle: Text('Music by Julie Gable, Lyrics By Sidney Stenic'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(onPressed: () {}, child: Text('BUY TICKETS')),
SizedBox(
width: 8,
),
TextButton(onPressed: () {}, child: const Text('LISTEN')),
SizedBox(width: 8),
],
)
],
mainAxisSize: MainAxisSize.min,
),
),
);
}
}
最終的な効果は、上記の効果となります。Cardの使用に注意してください。通常、ColumnやRowなどの他のコレクションクラスのウィジェットと組み合わせて使用されます。