GridView滚动列表的顶级用法【flutter20个实例之二】
GridView滚动列表的顶级用法【flutter20个实例之二】
sinnoo
发布于 2020-11-13 16:00:54
发布于 2020-11-13 16:00:54
一、老套路，先看样式
文章底部源码，是左侧样式，右侧是我实际开发中的展示
二、讲解（后附源码）
1.这里主要是用到GridView 组件
GridView是一个可滚动的，2D数组控件。
gridDelegate参数控制子控件的排列，有2个选择：
- SliverGridDelegateWithFixedCrossAxisCount：交叉轴方向上固定数量，对于垂直方向的GridView来说交叉轴方向指的是水平方向。
- SliverGridDelegateWithMaxCrossAxisExtent：交叉轴方向上尽量大，比如水平方上有500空间，指定此值为150，那么可以放3个，剩余一些空间，此时GridView将会缩小每一个Item，放置4个。
SliverGridDelegateWithFixedCrossAxisCount有属性介绍如下：
crossAxisCount：交叉轴方向上个数。mainAxisSpacing：主轴方向上2行之间的间隔。crossAxisSpacing：交叉轴方向上之间的间隔。childAspectRatio：子控件宽高比。
2.如果需要翻转滚动方向，比如从上到下，改为从下到上
需要设置属性：true表示翻转
reverse: false3.如果需要横向滚动，设置以下属性
scrollDirection: Axis.horizontal4.为了好像我们需要整体给gridview组件，增加一个padding
按Alt+Enter可以调出新增组件的快捷键，鼠标放在某个组件上，然后Alt+Enter可以给组件包裹一层padding
相关快捷键操作链接：Android Studio对flutter的一些快捷键
5.当然通过children的方式加载组件并不是个好方式
GridView提供了一些快速构建的方法 ，记住以下常用的两个就行
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemBuilder: (context, index) {
return Container(
height: 80,
color: Colors.primaries[index % Colors.primaries.length],
);
},
itemCount: 50,
)GridView.count(
crossAxisCount: 3,
children: List.generate(50, (i) {
return Container(
height: 80,
color: Colors.primaries[i % Colors.primaries.length],
);
}),
)三、源码
import 'package:flutter/material.dart';
class Mytest extends StatefulWidget {
@override
_MytestState createState() => _MytestState();
}
class _MytestState extends State<Mytest> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('songms'),
), //这个是顶部tab样式，如果不需要可以去掉
body: Padding(
padding: const EdgeInsets.all(8.0),
child: getItem(),
));
}
//列表
Widget getItem() {
return GridView.builder(
//scrollDirection: Axis.horizontal,//增加上这个就会横向滚动
reverse: false, //设置为true就会反向滚动，比如从下到上，从左到右
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, //这里代表每行显示几个
crossAxisSpacing: 10, //两列之间的距离(竖向滚动)
mainAxisSpacing: 4 //两行之间的距离（竖向滚动）
),
itemBuilder: (context, index) {
return _createGridViewItem(Colors.primaries[index]);
},
itemCount: 12,
);
//以下是最基础的方式
/*return GridView(
children: [
_createGridViewItem(Colors.primaries[0]),
],
);*/
}
//单个crad,这里可以自己定义一些样式
Widget _createGridViewItem(Color color) {
return Container(
height: 80,
color: color,
);
}
}持续更新......
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录