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,

    );

  }

}