GridView-网格布局-builder-count-两种方式

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,     );   } }
上一篇:Flutter 布局控件完结篇,Android开发面试题


下一篇:2-9 网格视图 GridView