GridView-网格布局-builder-count-两种方式
作者:互联网
1
import 'package:flutter/material.dart'; import 'res/listData.dart';void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text("flutterDemo")), body: HomeContent(), )); } }
class HomeContent extends StatelessWidget { List<Widget> _getListData() { var tempList = listData.map((value) { return Container( child: Column( children: [ Image.network(value['imageUrl']), SizedBox(height: 15), // 让图片和文字之间有10 的间距 Text( value["title"], textAlign: TextAlign.center, style: TextStyle(fontSize: 16), ), ], ), decoration: BoxDecoration( border: Border.all( color: Color.fromRGBO(233, 233, 233, .9), width: 1, )), ); });
return tempList.toList(); }
@override Widget build(BuildContext context) { return GridView.count( crossAxisSpacing: 10.0, //水平 左右的间距 mainAxisSpacing: 10.0, // 垂直 上下的间距 padding: EdgeInsets.all(10), // padding 间距 crossAxisCount: 2, // 一行的 Widget 数量 // childAspectRatio: 0.7, // 宽度和高度的比例 children: this._getListData(), ); } } -------------------------------- 2 import 'package:flutter/material.dart'; import 'res/listData.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text("flutterDemo")), body: HomeContent(), )); } }
class HomeContent extends StatelessWidget { Widget _getListData(contenxt, index) { return Container( child: Column( children: [ Image.network(listData[index]['imageUrl']), SizedBox(height: 15), // 让图片和文字之间有10 的间距 Text( listData[index]["title"], textAlign: TextAlign.center, style: TextStyle(fontSize: 16), ), ], ), decoration: BoxDecoration( border: Border.all( color: Color.fromRGBO(233, 233, 233, .9), width: 1, )), ); }
@override Widget build(BuildContext context) { return GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisSpacing: 10.0, mainAxisSpacing: 10.0, crossAxisCount: 2, ), itemCount: listData.length, itemBuilder: this._getListData, ); } }
标签:count,10.0,Widget,GridView,return,title,listData,builder,233 来源: https://www.cnblogs.com/eric-share/p/15086177.html