flutter中的網格布局GridView

GridView使用，以及參數說明：

 

 代碼演示：

import 'package:flutter/material.dart';

class OnlineMall extends StatefulWidget {
  @override
  _OnlineMall createState() => _OnlineMall();
  
}

class _OnlineMall extends State<OnlineMall> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('在線商城'),
        centerTitle: true,
      ),
      body: renderBody(),
    );
  }

  renderBody() {
    return GridView.count(
      crossAxisCount: 2,
      padding: EdgeInsets.all(20.0),
      crossAxisSpacing: 20.0,
      mainAxisSpacing: 20.0,
      childAspectRatio: 0.7,
      children: <Widget>[
        Container(
          color: Colors.white70,
          child: Column(
            children: <Widget>[
              Image.network('http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'),
              SizedBox(height: 12),
              Text('OPPO Reno3 Pro雙模5G驍龍')
            ],
          ),
        ),
        Container(
          color: Colors.white70,
          child: Column(
            children: <Widget>[
              Image.network('http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'),
              SizedBox(height: 12),
              Text('OPPO Reno3 Pro雙模5G驍龍')
            ],
          ),
        ),
        Container(
          color: Colors.white70,
          child: Column(
            children: <Widget>[
              Image.network('http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'),
              SizedBox(height: 12),
              Text('OPPO Reno3 Pro雙模5G驍龍')
            ],
          ),
        ),
        Container(
          color: Colors.white70,
          child: Column(
            children: <Widget>[
              Image.network('http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'),
              SizedBox(height: 12),
              Text('OPPO Reno3 Pro雙模5G驍龍')
            ],
          ),
        ),
        Container(
          color: Colors.white70,
          child: Column(
            children: <Widget>[
              Image.network('http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'),
              SizedBox(height: 12),
              Text('OPPO Reno3 Pro雙模5G驍龍')
            ],
          ),
        )
      ],
    );
  }
}

效果：

 

   通過build方式動態實現網格：

代碼：

import 'package:flutter/material.dart';
import 'package:flutter_app_zfy/res/istData.dart';

class OnlineMall extends StatefulWidget {
  @override
  _OnlineMall createState() => _OnlineMall();
  
}

class _OnlineMall extends State<OnlineMall> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('在線商城'),
        centerTitle: true,
      ),
      body: renderBody(),
    );
  }

  renderBody() {
    return GridView.builder(
      itemCount: listData.length,
      itemBuilder: this._getListData,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 20.0,
        mainAxisSpacing: 20.0,
        childAspectRatio: 0.7,
      ),
    );
  }

  Widget _getListData(context, index) {
    return Container(
          color: Colors.white70,
          child: Column(
            children: <Widget>[
              Image.network(listData[index]['imageUrl']),
              SizedBox(height: 12),
              Text(listData[index]['title'])
            ],
          ),
        );
  }
}

List listData = [
  {
    'title': 'OPPO Reno3 Pro雙模5G驍龍',
    'source': 'JD',
    'imageUrl': 'http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'
  },
  {
    'title': 'OPPO Reno3 Pro雙模5G驍龍',
    'source': 'JD',
    'imageUrl': 'http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'
  },
  {
    'title': 'OPPO Reno3 Pro雙模5G驍龍',
    'source': 'JD',
    'imageUrl': 'http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'
  },
  {
    'title': 'OPPO Reno3 Pro雙模5G驍龍',
    'source': 'JD',
    'imageUrl': 'http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'
  },
  {
    'title': 'OPPO Reno3 Pro雙模5G驍龍',
    'source': 'JD',
    'imageUrl': 'http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'
  },
  {
    'title': 'OPPO Reno3 Pro雙模5G驍龍',
    'source': 'JD',
    'imageUrl': 'http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'
  },
  {
    'title': 'OPPO Reno3 Pro雙模5G驍龍',
    'source': 'JD',
    'imageUrl': 'http://gju2.alicdn.com/tps/i2/O1CN01qAE6Bm2L4FrYasvlA_!!0-juitemmedia.jpg'
  }
];

效果展示：