Flutter组件-GridView-网格组件
网格组件效果图
示例代码
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'GridView组件',
home: new Scaffold(
appBar: new AppBar(
title: new Text('GridView组件'),
),
body: DemoPage(),
),
);
}
}
class DemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new DemoPageState();
}
}
class DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Center(
child: _buildGridCustom(),
);
}
Widget _buildGridExtent() {
return GridView.extent(
//横轴的最大长度
maxCrossAxisExtent: 180.0,
//内边距
padding: EdgeInsets.all(4.0),
//垂直方向的间距
mainAxisSpacing: 4.0,
//水平方向的间距
crossAxisSpacing: 4.0,
children: _buildGridTitleList(30),
);
}
//创建指定列数的Grid
Widget _buildGridCount() {
return GridView.count(
//指定多少列
crossAxisCount: 4,
//内边距
padding: EdgeInsets.all(4.0),
//垂直方向的间距
mainAxisSpacing: 4.0,
//水平方向的间距
crossAxisSpacing: 4.0,
children: _buildGridTitleList(30),
);
}
//可懒加载的Grid 只有可见的部分加载
Widget _buildGridSliver() {
return CustomScrollView(
primary: false,
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.all(20.0),
sliver: SliverGrid.count(
crossAxisCount: 2,
crossAxisSpacing: 10.0,
children: _buildGridTitleList(30),
),
),
],
);
}
//SliverGridDelegateWithFixedCrossAxisCount可以指定列的个数的Grid
//SliverGridDelegateWithMaxCrossAxisExtent根据每个宽度自动计算的Grid
Widget _buildGridCustom() {
return GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
childrenDelegate: SliverChildBuilderDelegate(
(context, index) {
return Image.asset('assets/cat.jpeg');
},
childCount: 30,
),
);
}
List<Container> _buildGridTitleList(int count) {
return List.generate(
count,
(int index) => Container(
child: Image.asset('assets/cat.jpeg'),
));
}
}
文档来源：51CTO技术博客https://blog.51cto.com/u_13943015/3033073
页:
[1]