Flutter組件學習（19）GridView

介紹

GridView和ListView的大多數參數都是相同的，它們的含義也都相同，

唯一需要關注的是gridDelegate參數，類型是SliverGridDelegate，它的作用是控制GridView子組件如何排列(layout)

Flutter中提供了兩個SliverGridDelegate的子類SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithFixedCrossAxisCount

該子類實現了一個橫軸爲固定數量子元素的layout算法

crossAxisCount	橫軸子元素的數量
mainAxisSpacing	主軸方向的間距
crossAxisSpacing	橫軸方向子元素的間距
childAspectRatio	子元素在橫軸長度和主軸長度的比例。 由於crossAxisCount指定後，子元素橫軸長度就確定了，然後通過此參數值就可以確定子元素在主軸的長度

可以發現，子元素的大小是通過crossAxisCount和childAspectRatio兩個參數共同決定的。注意，這裏的子元素指的是子組件的最大顯示空間，注意確保子組件的實際大小不要超出子元素的空間。

可以有以下兩種定義方式

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3, //橫軸三個子widget
      childAspectRatio: 1.0 //寬高比爲1時，子widget
  )
)



GridView.count( 
  crossAxisCount: 3,
  childAspectRatio: 1.0,
)

SliverGridDelegateWithMaxCrossAxisExtent

該子類實現了一個橫軸子元素爲固定最大長度的layout算法

maxCrossAxisExtent爲子元素在橫軸上的最大長度，之所以是“最大”長度，是因爲橫軸方向每個子元素的長度仍然是等分的，舉個例子，如果ViewPort的橫軸長度是450，那麼當maxCrossAxisExtent的值在區間[450/4，450/3)內的話，子元素最終實際長度都爲112.5，而childAspectRatio所指的子元素橫軸和主軸的長度比爲最終的長度比。其它參數和SliverGridDelegateWithFixedCrossAxisCount相同。

兩種方式是等價的

GridView(
  padding: EdgeInsets.zero,
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 120.0,
      childAspectRatio: 2.0 //寬高比爲2
  ),
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.airport_shuttle),
    Icon(Icons.all_inclusive),
    Icon(Icons.beach_access),
    Icon(Icons.cake),
    Icon(Icons.free_breakfast),
  ],
);


GridView.extent(
   maxCrossAxisExtent: 120.0,
   childAspectRatio: 2.0,
   children: <Widget>[
     Icon(Icons.ac_unit),
     Icon(Icons.airport_shuttle),
     Icon(Icons.all_inclusive),
     Icon(Icons.beach_access),
     Icon(Icons.cake),
     Icon(Icons.free_breakfast),
   ],
 );

 

GridView.builder

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyAppText());
}

class MyAppText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text('GridView練習'),
          textTheme:
              TextTheme(title: TextStyle(fontSize: 18, color: Colors.yellow)),
        ),
        body: GridViewClass(),
      ),
    );
  }
}

class GridViewClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<String>list=new List();
    list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844156&di=f1c754f5753835912ddf00f763e13e65&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Ffd039245d688d43fb6973ae77d1ed21b0ef43bec.jpg');
    list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844156&di=21132fe8a0731c3f3823a2602b5bb6c3&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F023b5bb5c9ea15ce1274e73ab4003af33a87b26e.jpg');
    list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844155&di=21f352bf854d3546967dd9c5f199c467&imgtype=0&src=http%3A%2F%2Fimg1.lukou.com%2Fstatic%2Fp%2Fblog%2Fmedium%2F0007%2F15%2F94%2F26%2F7159426.jpg');
    list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844154&di=66885dff3735acc2170b4c3c6290ef03&imgtype=0&src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2016%2F415%2F534%2F3377435514_434466171.jpg');
    list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844152&di=732c41d365e9c0c25c95745f6c12b96e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20181220%2F4866e7e0dd434dc9aa8da2c6ccc436d6.jpg');

    return GridView.builder(
      itemCount: list.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          childAspectRatio: 1
        ),
        itemBuilder: (BuildContext context,var index){
          return Image.network(
            list[index],
            fit: BoxFit.fill,
          );
        }
    );
  }
}