Create a grid list
In some cases, you might want to display your items as a grid rather than a normal list of items that come one after the next. For this task, use the GridView
widget.
時にはアイテムを通常のリストの代わりにグリッドビューによって次々と表示したいこともあるでしょう。そのためにはウィジェットをGridView
使いましょう。
The simplest way to get started using grids is by using the GridView.count()
constructor, because it allows you to specify how many rows or columns you’d like.
グリッドを使う最もシンプルな方法は、GridView.count()
コンストラクタを使うことです。これにより必要な行数又は列数を指定できます。
To visualize how GridView
works, generate a list of 100 widgets that display their index in the list.
GridView
がどのように機能するかを見るために、100のウィジェットのリストを生成し、そのリストのindexを表示してみます。
GridView.count( // Create a grid with 2 columns. If you change the scrollDirection to // horizontal, this produces 2 rows. // 2列のグリッドを生成する。scrollDirectionをhorizontalに変更した場合、 // 2行のグリッドが生成される。 crossAxisCount: 2, // Generate 100 widgets that display their index in the List. // リストのindexを表示するウィジェットを100生成する。 children: List.generate(100, (index) { return Center( child: Text( 'Item $index', style: Theme.of(context).textTheme.headline5, ), ); }), ),
Interactive example
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { const title = 'Grid List'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: const Text(title), ), body: GridView.count( // Create a grid with 2 columns. If you change the scrollDirection to // horizontal, this produces 2 rows. crossAxisCount: 2, // Generate 100 widgets that display their index in the List. children: List.generate(100, (index) { return Center( child: Text( 'Item $index', style: Theme.of(context).textTheme.headline5, ), ); }), ), ), ); } }
参考