属性
属性 | 释义 |
---|
scrollDirection | 滚动方向 |
padding | 内边距 |
resolve | 组件反向排序 |
crossAxisSpacing | 控件水平间距 |
mainAxisSpacing | 控件垂直边距 |
crossAxisCount | 每行控件数量 |
childAspectRatio | 每个控件的宽高比 |
gridDelefate | 一般在GridView.builder中使用SliverGridDelegateWithFixedCrossAxisCount来使用上述属性 |
通过GridView.count创建网格布局
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2, //网格布局的列数
children: <Widget>[
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本')
],
);
}
使用GridVIew.count创建动态网格
class HomeContent extends StatelessWidget {
List<Widget> _getListData() {
List<Widget> list = new List();
for (var i = 0; i < 20; i++) {
list.add(Container(
alignment: Alignment.center,
child: Text("$i"),
));
}
return list;
}
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 20.0,
mainAxisSpacing: 20.0,
childAspectRatio: 0.7,
children: this._getListData(),
padding: EdgeInsets.all(10),
);
}
}
使用GridView.builder创建网格
class HomeContent extends StatelessWidget {
Widget _getListData(context, index) {
return Container(
child: Column(
children: <Widget>[
Image.network(listData[index]["imageUrl"]),
SizedBox(height: 12),
Text(
listData[index]["title"],
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20),
)
],
),
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 20.0,
mainAxisSpacing: 20.0,
),
itemBuilder: this._getListData,
itemCount: listData.length,
);
}
}