Flutter - GridView1 - 简单布局

demo 地址: https://github.com/iotjin/jh_flutter_demo

效果图

GridViewTest1.png

代码

import 'package:flutter/material.dart';


List<String> dataArr;

List getData(){

  dataArr = new List();
  for(int i = 0; i < 10; i++){
    var str ="${i}";
    dataArr.add(str);
  }
  print(dataArr);
  return dataArr;
}

class GridViewTest1 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
          title:Text('GridViewTest1')
      ),
      body:ContentBody(),
    );
  }
}


class ContentBody extends StatelessWidget {

      ContentBody({Key key}){
        getData();
      }

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.yellow,
        child:
        GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,//一行的Widget数量
              crossAxisSpacing: 5.0, //水平间距
              mainAxisSpacing: 5.0, //垂直间距
              childAspectRatio: 1.0,//子Widget宽高比例
            ),
            padding: EdgeInsets.all(10.0),//GridView内边距
            itemCount: dataArr.length,
            itemBuilder: (context, index) {
              return item(dataArr,index);
            }
        )

    );
  }
}

Widget item(List data,int index){

  return Container(
    alignment: Alignment.center,
    child: Text(
      data[index],
      style: TextStyle(color: Colors.white, fontSize: 20),
    ),
    color: Colors.blue,
  );
}