Flutter 应用程序中使用 GridTile 小部件
作者：坚果前端
- 2021 年 12 月 23 日
本文字数：3324 字
阅读完需：约 11 分钟
本文将带您了解在 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 的更多新功能和很棒的功能，请查看以下文章：
划线
评论
复制
发布于: 2021 年 12 月 23 日
版权声明: 本文为 InfoQ 作者【坚果前端】的原创文章。
原文链接:【http://xie.infoq.cn/article/db7f74568daf13b5e7b07547e】。文章转载请联系作者。
坚果前端
关注
此间若无火炬，我便是唯一的光 2020.10.25 加入
公众号：“坚果前端”，华为云享专家，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。
评论