Flutter コンポーネントの基本 ——GridView#
GridView はグリッドレイアウトで、iOS の UICollectionView に似ており、各行のアイテム数、個々のオブジェクトのアスペクト比、オブジェクトの水平方向の間隔、垂直方向の間隔などを設定できます。
GridView の一般的な属性#
- GridView
- scrollDirection: スクロール方向
- Axis.horizontal: 水平方向にスクロール
- Axis.vertical: 垂直方向にスクロール、デフォルトはこれです。
- padding: GridView の親ビューに対するマージン
- crossAxisCount: 各行のアイテム数
- mainAxisSpacing: スクロール方向に垂直な方向の間隔、例：横方向にスクロールする場合、これは垂直方向のオブジェクト間の間隔を表します；
- crossAxisSpacing: スクロール方向に平行な方向の間隔、例：横方向にスクロールする場合、これは水平方向のオブジェクト間の間隔を表します；
- childAspectRatio：個々の要素のアスペクト比（または高幅比）、scrollDirection が vertical の場合、アスペクト比を表します；scrollDirection が horizontal の場合、高幅比を表します。
- scrollDirection: スクロール方向
簡単な使用法#
コードは以下の通りです：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GridViewウィジェット',
home: Scaffold(
body: GridView.count(
scrollDirection: Axis.vertical,
childAspectRatio: 2,
padding: const EdgeInsets.all(40.0),
crossAxisSpacing: 10.0,
mainAxisSpacing: 20.0,
crossAxisCount: 2,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Text("彼はあなたをすべて解きほぐすでしょう"),
color: Colors.teal[100],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('群衆に注意を払うな'),
color: Colors.teal[200],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('叫び声の音だが'),
color: Colors.teal[300],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('叫ぶ者たち'),
color: Colors.teal[400],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('革命が来ている...'),
color: Colors.teal[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('革命、彼らは...'),
color: Colors.teal[600],
),
],
),
));
}
}
効果は以下の通りです：
動的リスト#
コードは以下の通りです：
class MyGridView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.builder(
padding: EdgeInsets.all(40.0),
scrollDirection: Axis.horizontal,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 20.0,
crossAxisSpacing: 10.0,
childAspectRatio: 2.0),
itemCount: 6,
itemBuilder: (BuildContext context, int index) {
return Card(
color: Colors.amber,
child: Center(
child: Text('$index'),
),
);
});
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: new AppBar(
title: new Text('GridViewビルダー'),
),
body: MyGridView(),
),
);
}
}
効果は以下の通りです：
