Виджет GridTile

Виджет GridTile кладут в GridView или сетку каталога. Фон - в child, нижняя полоса - GridTileBar в footer, верхняя - в header.

Синтаксис

GridTile(
	child: Image.network('https://example.com/a.png', fit: BoxFit.cover),
	footer: GridTileBar(title: Text('abcde')),
)

Параметры

Параметр	Описание
`child`	Основное содержимое ячейки.
`footer`	Полоса снизу, часто `GridTileBar`.
`header`	Полоса сверху ячейки.

Пример

Давайте покажем GridTile с цветным фоном:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: GridTile(
					color: Colors.blue.shade100,
					child: Center(child: Text('abcde')),
				),
			),
		),
	);
}

Ячейка с голубым фоном и текстом по центру.

Пример

Давайте добавим footer:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: SizedBox(
						width: 200,
						height: 200,
						child: GridTile(
							child: Container(color: Colors.grey),
							footer: GridTileBar(
								backgroundColor: Colors.black54,
								title: Text('12345'),
							),
						),
					),
				),
			),
		),
	);
}

Снизу полупрозрачная полоса с '12345'.

Смотрите также

виджет GridTileBar,
подпись на GridTile
виджет GridView,
сетка ячеек
виджет Card,
карточка вместо GridTile
виджет CarouselView,
горизонтальная лента элементов