GridView 和 ListView 是 Flutter 中用于构建滚动列表的两种常见小部件。它们之间的主要区别在于它们的布局方式和如何显示其子小部件。
-
布局方式：
-
ListView是单列或单行的滚动列表，它垂直或水平滚动。可以根据需要垂直排列或水平排列子小部件。 -
GridView是一个二维网格列表，可以在垂直和水平方向上滚动。子小部件以行和列的形式进行排列。
-
-
子小部件排列：
-
ListView的子小部件是单列（或单行）排列的，依次从顶部到底部（或从左到右）排列。它适合于在一个方向上展示大量垂直或水平排列的数据。 -
GridView的子小部件是以二维网格的形式排列的，可以按行或列展示。根据不同的构造函数，可以设置子小部件在交叉轴上的方式，例如可以设置为垂直或水平方向。
-
-
子小部件数量：
-
ListView的子小部件数量可以是有限的或无限的。它可以使用一个List或Builder来动态构建子小部件列表。 -
GridView的子小部件数量也可以是有限的或无限的。它可以使用gridDelegate属性来配置网格的排列方式，以及使用children、childrenDelegate或Builder来设置子小部件。
-
-
适用场景：
-
ListView适用于在一个方向上展示大量的数据，例如聊天记录、商品列表等。 -
GridView适用于将数据以网格的形式展示，例如照片墙、图标展示等。
-
下面展示一个简单网格布局
代码实现也很简单
Widget build(BuildContext context) {
return GridView.count(crossAxisCount: 3,
children: [
Icon(ItyingFont.icon1,color: Colors.green,),
Icon(ItyingFont.icon2,color: Colors.amberAccent,),
Icon(ItyingFont.icon3,color: Colors.blue,),
Icon(Icons.add,color:Colors.pink,),
Icon(Icons.access_time,color: Colors.purple,),
Icon(Icons.add_alert_sharp,color: Colors.cyanAccent,),
Icon(Icons.ac_unit,color: Colors.cyanAccent,),
Icon(Icons.access_time_outlined,color: Colors.amber,),
Icon(Icons.access_time_filled,color: Colors.deepPurpleAccent,),
],
);
}crossAxisCount 是列组件的数量，由自己定义，再用children来装载内容
上面这个代码是通过GridView.count 来实现，下面用GridView.extent来实现，与GridView.count不同的是 GridView.extent 通过 maxCrossAxisExtent （组件的最大长度）来控制一行有多少个组件
Widget build(BuildContext context) {
return GridView.extent(maxCrossAxisExtent: 150.0, //每个组件的最大长度
children: [
Icon(ItyingFont.icon1,color: Colors.green,),
Icon(ItyingFont.icon2,color: Colors.amberAccent,),
Icon(ItyingFont.icon3,color: Colors.blue,),
Icon(Icons.add,color:Colors.pink,),
Icon(Icons.access_time,color: Colors.purple,),
Icon(Icons.add_alert_sharp,color: Colors.cyanAccent,),
Icon(Icons.ac_unit,color: Colors.cyanAccent,),
Icon(Icons.access_time_outlined,color: Colors.amber,),
Icon(Icons.access_time_filled,color: Colors.deepPurpleAccent,),
],
);
}那如果要实现下面的效果呢？
用 GridView.count 怎么实现呢，看代码
文章来源：https://www.toymoban.com/news/detail-770241.html
class Page extends StatelessWidget {
Page({Key? key}) : super(key: key);
List<Widget> _initGridViewData() {
List<Widget> temlist = [];
for (var i = 0; i < 12; i++) {
temlist.add(
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.amber,
),
child: Text(
"第${i}个元素",
style: TextStyle(
fontSize: 20.0,
),
),
),
);
}
return temlist;
}
@override
Widget build(BuildContext context) {
return GridView.count(
padding: EdgeInsets.all(10),
//一列排布的组件的个数
crossAxisCount: 3,
//水平子 Widget 之间的间距
crossAxisSpacing: 10.0,
//垂直子 Widget 之间的间距
mainAxisSpacing: 10.0,
// 宽高比
childAspectRatio: 0.7,
children: _initGridViewData());
}
}那要是用 GridView.extend 呢
@override
Widget build(BuildContext context) {
return GridView.extent(
padding: EdgeInsets.all(10),
//每个组件的最大长度
maxCrossAxisExtent: 120,
//水平子 Widget 之间的间距
crossAxisSpacing: 10.0,
//垂直子 Widget 之间的间距
mainAxisSpacing: 10.0,
// 宽高比
childAspectRatio: 0.7,
children: _initGridViewData());
}如何实现下面的效果呢
看看代码如下
文章来源地址https://www.toymoban.com/news/detail-770241.html
import 'package:flutter/material.dart';
// import 'package:hive/hive.dart';
import 'package:pivot_chat/widgets/button/_PCHomePageButton.dart';
class test extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {},
icon: Icon(
ItyingFont.icon1,
color: Colors.pinkAccent,
),
),
),
body: Page(),
),
);
}
}
class Page extends StatelessWidget {
Page({Key? key}) : super(key: key);
Widget _initGridViewData(context ,int index) {
return Container(
height: 200,
// 设置一个 外边框
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12
)
),
child: Column(
children: [
Image.network("${listData[index]["imageUrl"]}",height:180 ,),
SizedBox(height: 10,),
Text("${listData[index]["title"]}",
style: TextStyle(
fontSize: 18,
),
),
],
),
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
padding: EdgeInsets.all(10),
itemCount:listData.length ,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 0.7,
),
itemBuilder:_initGridViewData,
);
}
}
List listData = [
{
"title": 'Candy Shop',
"author": "Mohanmed Chin",
"imageUrl": "https://p.qqan.com/up/2021-7/16275387033501829.jpg",
},
{
"title": 'Candy Shop',
"author": "Mohanmed Chin",
"imageUrl":
"https://pic1.zhimg.com/v2-b59b1fe5c979f7cb7cdde7bf788a4f3a_r.jpg?source=1940ef5c",
},
{
"title": 'Candy Shop',
"author": "Mohanmed Chin",
"imageUrl":
"https://pic2.zhimg.com/v2-d6d0c956d30aa63894cc1cc96901ce07_r.jpg?source=1940ef5c",
},
{
"title": 'Candy Shop',
"author": "Mohanmed Chin",
"imageUrl":
"https://ts1.cn.mm.bing.net/th/id/R-C.0382d85bc77f87547a0d263d727ac78a?rik=DeEpYNkFDhNYwQ&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190815%2f2422bae53bbe495eadb8c35e4115f971.JPG&ehk=EXo1y564J33smY0E4iRbb%2b6Uf8x9szvNt480zkQXHyk%3d&risl=&pid=ImgRaw&r=0",
},
{
"title": 'Candy Shop',
"author": "Mohanmed Chin",
"imageUrl":
"https://tse1-mm.cn.bing.net/th/id/OIP-C.aBs3l0c_sS5UmTWOaK7wgAAAAA?pid=ImgDet&rs=1",
},
{
"title": 'Candy Shop',
"author": "Mohanmed Chin",
"imageUrl":
"https://pic2.zhimg.com/v2-8176dbd89ee8edecf5956bae2dd0642d_r.jpg?source=1940ef5c",
},
{
"title": 'Candy Shop',
"author": "Mohanmed Chin",
"imageUrl":
"https://ts1.cn.mm.bing.net/th/id/R-C.7538a1d27d1eb2bdaf4f7fe5171d3bb4?rik=Xo3lEaJdBdyZQQ&riu=http%3a%2f%2fdesk.fd.zol-img.com.cn%2fg5%2fM00%2f02%2f0F%2fChMkJlbK7JeIFhACAArOl2v-eCMAALKjgJtPOEACs6v923.jpg&ehk=o0LZfd%2fE2nk5E2n%2fxNapnr%2fCMkZLHYMbO25hE4LLq60%3d&risl=&pid=ImgRaw&r=0",
},
{
"title": 'Candy Shop',
"author": "Mohanmed Chin",
"imageUrl":
"https://ts1.cn.mm.bing.net/th/id/R-C.c316b5a061d2e6f534ea4669efaf4202?rik=CcnSN0WU9U1clA&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f6%2f1106.jpg&ehk=HKvV9IRto0udrSWZrpOzTssWQ3oJBuwMAbT1T%2bKEWQw%3d&risl=&pid=ImgRaw&r=0",
},
];
到了这里，关于flutter 实战 之 GridView的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
