Flutter 应用程序中使用 GridTile 小部件

本文将带您了解在 Flutter 应用程序中使用 GridTile 小部件的几个示例

GridTile 可以帮助我们快速轻松地创建具有丰富内容（文本、图像和图标的组合）的磁贴。此小部件通常与GridView小部件一起使用，但它可以用作独立组件。

构造函数：

GridTile({
  Key? key, 
  Widget? header, 
  Widget? footer, 
  required Widget child
})

如果要制作一行或两行的页眉/页脚，可以使用GridTileBar小部件：

GridTileBar({
  Key? key, 
  Color? backgroundColor, 
  Widget? leading, 
  Widget? title, 
  Widget? subtitle, 
  Widget? trailing
})

现在是时候编写一些代码了。

例子

社交网络相框

这个例子创建了一个社交网络照片帖框架（就像你在 Instagram 上看到的那样）。

截屏：

代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:async/async.dart';
import 'package:flutter/scheduler.dart';
import 'package:url_strategy/url_strategy.dart';
​
void main() {
  setPathUrlStrategy();
  runApp(const MyApp());
}
​
class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: '坚果前端',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: const HomeScreen(),
    );
  }
}
​
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key key}) : super(key: key);
​
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
​
class _HomeScreenState extends State<HomeScreen> {
  String _imageUrl =
      'https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20211124085239175.png';
  double _progress = 10.0;
  bool _lights = false;
  List<String> _tabs = ['One', 'Two', 'Three'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple,
      body: Center(
        child: SizedBox(
          width: 360,
          height: 500,
          child: Card(
            elevation: 6,
            child: GridTile(
                header: GridTileBar(
                  backgroundColor: Colors.white,
                  leading: const CircleAvatar(
                    backgroundColor: Colors.deepOrange,
                    child: Text(
                      'J',
                      style: TextStyle(color: Colors.white, fontSize: 30),
                    ),
                  ),
                  title: const Text(
                    '坚果',
                    style: TextStyle(color: Colors.black),
                  ),
                  subtitle: const Text('5 minutes ago',
                      style: TextStyle(color: Colors.grey)),
                  trailing: IconButton(
                      onPressed: () {},
                      icon: const Icon(
                        Icons.more_vert_rounded,
                        color: Colors.black54,
                      )),
                ),
                child: Image.network(
                  _imageUrl,
                  fit: BoxFit.cover,
                ),
                footer: GridTileBar(
                  backgroundColor: Colors.white,
                  title: Row(
                    children: const [
                      Icon(
                        Icons.favorite_outline,
                        color: Colors.grey,
                      ),
                      Text('20', style: TextStyle(color: Colors.black)),
                      SizedBox(
                        width: 20,
                      ),
                      Icon(
                        Icons.chat_bubble_outline,
                        color: Colors.grey,
                      ),
                      Text(
                        '5',
                        style: TextStyle(color: Colors.black),
                      ),
                    ],
                  ),
                  trailing: const Icon(
                    Icons.bookmark_outline,
                    color: Colors.black,
                  ),
                )),
          ),
        ),
      ),
    );
    ;
  }
}
​

创建产品网格

此示例创建一个网格视图，显示一些小说产品。您可能会在商业应用程序中看到这一点。

应用预览：

完整代码：

import 'dart:math';
​
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:async/async.dart';
import 'package:flutter/scheduler.dart';
import 'package:url_strategy/url_strategy.dart';
​
void main() {
  setPathUrlStrategy();
  runApp(const MyApp());
}
​
class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: '坚果',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: const HomeScreen(),
    );
  }
}
​
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key key}) : super(key: key);
​
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
​
class _HomeScreenState extends State<HomeScreen> {
  String _imageUrl =
      'https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20211124085239175.png';
  final List<Map> _products = List.generate(
      100,
      (index) => {
            "id": index,
            "name": "Product $index",
            "price": Random().nextInt(100)
          }).toList();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('坚果'),
      ),
      body: GridView.builder(
          padding: const EdgeInsets.all(10),
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200,
              childAspectRatio: 2 / 3,
              crossAxisSpacing: 20,
              mainAxisSpacing: 20),
          itemCount: _products.length,
          itemBuilder: (BuildContext ctx, index) {
            return GridTile(
              key: ValueKey(_products[index]['id']),
              child: Image.network(
                _imageUrl,
                fit: BoxFit.cover,
              ),
              footer: GridTileBar(
                backgroundColor: Colors.black54,
                title: Text(
                  _products[index]['name'],
                  style: const TextStyle(
                      fontSize: 18, fontWeight: FontWeight.bold),
                ),
                subtitle: Text("\$${_products[index]['price'].toString()}"),
                trailing: const Icon(Icons.shopping_cart),
              ),
            );
          }),
    );
  }
}
​

结论

您已经学习了 GridTile 小部件的基础知识，并了解了几个在实践中实现它的示例。如果您想探索 Flutter 的更多新功能和很棒的功能，请查看以下文章：