GridView能實現(xiàn)類似相冊的功能。
GridView的屬性列表如下：
GridView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required this.gridDelegate,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
})
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build (BuildContext context) {
return MaterialApp(
title: 'This is a Flutter Demo',
home: Scaffold(
appBar: AppBar(title: Text('ListView Widget')),
body: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, //每行顯示3列
mainAxisSpacing: 2.0,//每行的間距
crossAxisSpacing: 2.0, //每列的間距
childAspectRatio: 0.7 //寬高比腥光，如果為1表示不變形丁存，如果為2表示寬是高的2倍
),
children: <Widget>[
new Image.network('http://img5.mtime.cn/mg/2020/03/18/071546.22519737_285X160X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mg/2020/01/06/144226.95498850.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mg/2019/12/24/172628.72586301.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mg/2019/12/24/172743.73758749.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mg/2019/11/19/095516.52126673_220X124X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mg/2019/12/11/164436.50928841_220X124X4.jpg',fit: BoxFit.cover),
],
),
),
);
}
}
運(yùn)行結(jié)果如下：
