使用GridView.count创建(按照数量限制交叉轴显示个数)
import 'package:flutter/material.dart';
import 'dart:math';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.redAccent),
home: Home(),
);
}
}
class Home extends StatelessWidget {
//创建网格子元素
List<Widget> _buildGridItem(int count) {
List<Widget> results = [];
for (var i = 0; i < count; i++) {
results.add(MyContainer(getRandomColor(), i.toString()));
}
return results;
}
//创建随机颜色
Color getRandomColor() {
return Color.fromARGB(255, Random.secure().nextInt(255),
Random.secure().nextInt(255), Random.secure().nextInt(255));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Gecer')),
body: GridView.count(
//默认主轴竖直
crossAxisCount: 4, //交叉轴显示矿建个数
crossAxisSpacing: 16, //交叉轴间距
mainAxisSpacing: 16, //主轴间距
// scrollDirection: Axis.horizontal,//水平滚动
padding: EdgeInsets.all(16),
children: _buildGridItem(100),
));
}
}
class MyContainer extends StatelessWidget {
Color _color;
String _content;
MyContainer(this._color, this._content);
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment(0, 0),
color: _color,
child: Text(
_content,
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
),
);
}
}
使用GridView.extent创建(按照尺寸限制交叉轴显示个数)
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Gecer')),
body: GridView.extent(
//默认主轴竖直
maxCrossAxisExtent: 200,//子元素显示的尺寸
crossAxisSpacing: 16, //交叉轴间距
mainAxisSpacing: 16, //主轴间距
// scrollDirection: Axis.horizontal,//水平滚动
padding: EdgeInsets.all(16),
children: _buildGridItem(100),
));
}
}
使用GridView.builder创建(FixedCrossAxisCount)
class Home extends StatelessWidget {
var _datas = [];
var _colors = [];
//创建数据
void _buildDatas(int count) {
for (var i = 0; i < count; i++) {
_datas.add(i.toString());
_colors.add(getRandomColor());
}
}
//创建随机颜色
Color getRandomColor() {
return Color.fromARGB(255, Random.secure().nextInt(255),
Random.secure().nextInt(255), Random.secure().nextInt(255));
}
@override
Widget build(BuildContext context) {
_buildDatas(100);
return Scaffold(
appBar: AppBar(title: Text('Gecer')),
body: GridView.builder(
padding: EdgeInsets.all(16),
itemCount: _datas.length,
itemBuilder: (BuildContext context, int index) {
return MyContainer(_colors[index], _datas[index]);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, crossAxisSpacing: 16, mainAxisSpacing: 16)));
}
}
使用GridView.builder创建(FixedCrossAxisCount)
class Home extends StatelessWidget {
var _datas = [];
var _colors = [];
//创建数据
void _buildDatas(int count) {
for (var i = 0; i < count; i++) {
_datas.add(i.toString());
_colors.add(getRandomColor());
}
}
//创建随机颜色
Color getRandomColor() {
return Color.fromARGB(255, Random.secure().nextInt(255),
Random.secure().nextInt(255), Random.secure().nextInt(255));
}
@override
Widget build(BuildContext context) {
_buildDatas(100);
return Scaffold(
appBar: AppBar(title: Text('Gecer')),
body: GridView.builder(
padding: EdgeInsets.all(16),
itemCount: _datas.length,
itemBuilder: (BuildContext context, int index) {
return MyContainer(_colors[index], _datas[index]);
},
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
crossAxisSpacing: 16,
mainAxisSpacing: 16)));
}
}