P12. Flutter GridView网格列表组件
列表组件已经学会了,那还有一种常用的列表,叫做网格列表。网格列表经常用来显示多张图片,比如我们经常使用的手机里的相册功能,大部分形式都是网格列表。
简单例子演示
我们先不做一个相册的应用,而是使用文字,作一个最简单的网格列表,目的是先熟悉一下GridView
的基本语法,代码如下:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'GridView widget', home: Scaffold( body: GridView.count( padding: const EdgeInsets.all(20.0), crossAxisSpacing: 10.0, crossAxisCount: 3, children: <Widget>[ const Text('I am Mybj'), const Text('I love Flutter'), const Text('mybj123.com'), const Text('我喜欢写博客'), const Text('我喜欢码云笔记'), const Text('我喜欢听音乐') ], ) ), ); } }
效果如下:
我们在 body 属性中加入了网格组件,然后给了一些常用属性:
padding
:表示内边距,这个小伙伴们应该很熟悉。crossAxisSpacing
:网格间的空当,相当于每个网格之间的间距。crossAxisCount
:网格的列数,相当于一行放置的网格数量。
图片网格列表
加入文字作网格列表总是怪怪的,也不是很直观,我们利用图片来作一些网格列表。当然我们用一种更原生的方法,现在官方已经不鼓励使用这种方法了,但是为了你碰到时,不至于不知道怎么回事,所以我们写一下这种形式,但主要是为了作图片布局。
import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context ){ return MaterialApp( title:'ListView widget', home:Scaffold( body:GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 2.0, crossAxisSpacing: 2.0, childAspectRatio: 0.7 ), children: <Widget>[ new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover), ], ) ), ); } }
效果如下:
childAspectRatio
:宽高比,这个值的意思是宽是高的多少倍,如果宽是高的 2 倍,那我们就写 2.0,如果高是宽的 2 倍,我们就写 0.5。希望小伙伴们理解一下。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P12. Flutter GridView网格列表组件
码云笔记 » P12. Flutter GridView网格列表组件