效果图
原理
使用GridView.count实现
实现步骤
这个项目的点击事件用到了fluttertoast，所以需要导入fluttertoast外部类。
1.在pubspec.yaml中导入依赖（注意空格的缩进）。
dependencies: fluttertoast: ^8.2.2 # 检查最新版本2.在需要的页面导入这个类
import 'package:fluttertoast/fluttertoast.dart';3.自定义控件
//自定义控件 Widget buildItem({ required String icon, //图片1 required String title, //文本1 required String subtitle,//文本2 required List<Color> colors,//颜色1 required VoidCallback callback,//VoidCallback:无参数无返回值的函数类型 }){ return Container( //容器基础样式 height: 85, width: 155, decoration: BoxDecoration( borderRadius: BorderRadius.circular(10),//圆角 gradient: LinearGradient(//垂直渐变 begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: colors ), ), //使用Material Ink InkWell 组合 点击波纹效果 //点击效果实现 child: Material( //提供材质 color: Colors.transparent, child: Ink(//墨水效果容器 child: InkWell(//实际产生波纹效果的组件 borderRadius: BorderRadius.circular(10), onTap: callback,//点击时传入的回调函数 //内部布局结构 child: Padding( padding: const EdgeInsets.only(left: 15,top: 12.5,bottom:10,right:15), child: Column( crossAxisAlignment: CrossAxisAlignment.start,//子组件左对齐 children: [ const Expanded(child: SizedBox()),//弹性撑开空间，Expanded会占据所有可用空间，将后面的Row推向底部 Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,//两端对齐 children: [ //左侧文本列 Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(title,style: const TextStyle(fontSize:18,fontWeight: FontWeight.bold),),//使用传入的文字1 Text(subtitle,style: const TextStyle(color: Colors.white,fontSize: 10),),//使用传入的文字2 ], ), //右侧图标 Image.asset(icon,width: 40,height: 40,),//使用传入的图片1 ], ), ], ), ), ), ), ), ); }自定义框架的整体布局层级
Padding (内边距)
└── Column (垂直布局)
└── Expanded (弹性空间)
└── Row (水平布局)
├── Column (文本列)
│ ├── Text (主标题)
│ └── Text (副标题)
└── Image.asset (图标)
4.在UI中使用自定义控件
return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Expanded( child: Padding( padding: EdgeInsets.symmetric(horizontal: 10), child: GridView.count( crossAxisCount: 2,//固定列数 crossAxisSpacing: 8,//列间距 mainAxisSpacing: 8,//行间距 childAspectRatio: 1.823,//子项的宽高比 children: [ buildItem( icon: "assets/images/apple.png", title: "红楼梦", subtitle: "作者：曹雪芹", colors: const [Color(0xFF8EE6FE),Color(0xFF2BBDE7)], callback: (){ Fluttertoast.showToast(msg: "你点击了红楼梦！！！"); } ), buildItem( icon: "assets/images/banana.png", title: "西游戏", subtitle: "作者：吴承恩", colors: const [Color(0xFFFFCC91),Color(0xFFFF8a65)], callback: (){ Fluttertoast.showToast(msg: "你点击了西游记！！！"); } ), buildItem( icon: "assets/images/cherry.png", title: "水浒传", subtitle: "作者：施耐庵", colors: const [Color(0xFF77FA76),Color(0xFF31F0A3)], callback: (){ print("点击事件触发"); Fluttertoast.showToast( msg: "你点击了水浒传！！！", ); } ), buildItem( icon: "assets/images/mango.png", title: "三国演义", subtitle: "作者：罗贯中", colors: const [Color(0xFFCC9EF7),Color(0xFFA973F0)], callback: (){ Fluttertoast.showToast(msg: "你点击了三国演义！！！"); } ), ], ), ), ), ], ), ), );点击效果的流程
用户点击 → InkWell检测点击 → 产生波纹动画 → 执行callback函数
性能优化
这个只能做短列表，因为每一个项都需要加入一个列表子项，有没有方法优化这个问题呢？
代码实例
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; class HomePage extends StatefulWidget{ const HomePage({super.key}); @override State<StatefulWidget> createState() => _HomePageState(); } class _HomePageState extends State<HomePage>{ //自定义控件 Widget buildItem({ required String icon, //图片1 required String title, //文本1 required String subtitle,//文本2 required List<Color> colors,//颜色1 required VoidCallback callback,//VoidCallback:无参数无返回值的函数类型 }){ return Container( //容器基础样式 height: 85, width: 155, decoration: BoxDecoration( borderRadius: BorderRadius.circular(10),//圆角 gradient: LinearGradient(//垂直渐变 begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: colors ), ), //使用Material Ink InkWell 组合 点击波纹效果 //点击效果实现 child: Material( //提供材质 color: Colors.transparent, child: Ink(//墨水效果容器 child: InkWell(//实际产生波纹效果的组件 borderRadius: BorderRadius.circular(10), onTap: callback,//点击时传入的回调函数 //内部布局结构 child: Padding( padding: const EdgeInsets.only(left: 15,top: 12.5,bottom:10,right:15), child: Column( crossAxisAlignment: CrossAxisAlignment.start,//子组件左对齐 children: [ const Expanded(child: SizedBox()),//弹性撑开空间，Expanded会占据所有可用空间，将后面的Row推向底部 Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,//两端对齐 children: [ //左侧文本列 Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(title,style: const TextStyle(fontSize:18,fontWeight: FontWeight.bold),),//使用传入的文字1 Text(subtitle,style: const TextStyle(color: Colors.white,fontSize: 10),),//使用传入的文字2 ], ), //右侧图标 Image.asset(icon,width: 40,height: 40,),//使用传入的图片1 ], ), ], ), ), ), ), ), ); } //UI构建 @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Expanded( child: Padding( padding: EdgeInsets.symmetric(horizontal: 10), child: GridView.count( crossAxisCount: 2,//固定列数 crossAxisSpacing: 8,//列间距 mainAxisSpacing: 8,//行间距 childAspectRatio: 1.823,//子项的宽高比 children: [ buildItem( icon: "assets/images/apple.png", title: "红楼梦", subtitle: "作者：曹雪芹", colors: const [Color(0xFF8EE6FE),Color(0xFF2BBDE7)], callback: (){ Fluttertoast.showToast(msg: "你点击了红楼梦！！！"); } ), buildItem( icon: "assets/images/banana.png", title: "西游戏", subtitle: "作者：吴承恩", colors: const [Color(0xFFFFCC91),Color(0xFFFF8a65)], callback: (){ Fluttertoast.showToast(msg: "你点击了西游记！！！"); } ), buildItem( icon: "assets/images/cherry.png", title: "水浒传", subtitle: "作者：施耐庵", colors: const [Color(0xFF77FA76),Color(0xFF31F0A3)], callback: (){ print("点击事件触发"); Fluttertoast.showToast( msg: "你点击了水浒传！！！", ); } ), buildItem( icon: "assets/images/mango.png", title: "三国演义", subtitle: "作者：罗贯中", colors: const [Color(0xFFCC9EF7),Color(0xFFA973F0)], callback: (){ Fluttertoast.showToast(msg: "你点击了三国演义！！！"); } ), ], ), ), ), ], ), ), ); } }
