当前位置：首页 > news >正文

Flutter---GridView+自定义控件

news 2025/10/16 6:22:01

概念：GridView 是 Flutter 中用于创建网格布局的滚动组件，类似于表格但支持滚动。

GridView有四种创建方式

①GridView.count - 固定列数

②GridView.extent - 固定最大宽度

③GridView.builder - 动态创建（推荐用于大量数据）

④GridView.custom - 完全自定义

这里主要分享第一种GridView.count

效果图，如果要看滚动的效果，就把数据多复制几次

步骤：

这个项目的点击事件用到了fluttertoast，所以需要导入fluttertoast外部类。

1.在pubspec.yaml中导入依赖（注意空格的缩进）。

dependencies:fluttertoast: ^8.2.2  # 检查最新版本

2.在需要的页面导入这个类

import 'package:fluttertoast/fluttertoast.dart';

3.自定义控件

//自定义控件Widget buildItem({required String icon, //图片1required String title, //文本1required String subtitle,//文本2required List<Color> colors,//颜色1required 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),),//使用传入的文字1Text(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});@overrideState<StatefulWidget> createState() => _HomePageState();}class _HomePageState extends State<HomePage>{//自定义控件Widget buildItem({required String icon, //图片1required String title, //文本1required String subtitle,//文本2required List<Color> colors,//颜色1required 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),),//使用传入的文字1Text(subtitle,style: const TextStyle(color: Colors.white,fontSize: 10),),//使用传入的文字2],),//右侧图标Image.asset(icon,width: 40,height: 40,),//使用传入的图片1],),],),),),),),);}//UI构建@overrideWidget 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: "你点击了三国演义！！！");}),],),),),],),),);}}

查看全文

http://www.dtcms.com/a/486047.html