Flutter元件-GridView-網格元件

網格元件效果圖

示例代碼

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'GridView元件',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('GridView元件'),
        ),
        body: DemoPage(),
      ),
    );
  }
}

class DemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new DemoPageState();
  }
}

class DemoPageState extends State<DemoPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: _buildGridCustom(),
    );
  }

  Widget _buildGridExtent() {
    return GridView.extent(
      //橫軸的最大長度
      maxCrossAxisExtent: 180.0,
      //内邊距
      padding: EdgeInsets.all(4.0),
      //垂直方向的間距
      mainAxisSpacing: 4.0,
      //水準方向的間距
      crossAxisSpacing: 4.0,
      children: _buildGridTitleList(30),
    );
  }

  //建立指定列數的Grid
  Widget _buildGridCount() {
    return GridView.count(
      //指定多少列
      crossAxisCount: 4,
      //内邊距
      padding: EdgeInsets.all(4.0),
      //垂直方向的間距
      mainAxisSpacing: 4.0,
      //水準方向的間距
      crossAxisSpacing: 4.0,
      children: _buildGridTitleList(30),
    );
  }

  //可懶加載的Grid 隻有可見的部分加載
  Widget _buildGridSliver() {
    return CustomScrollView(
      primary: false,
      slivers: <Widget>[
        SliverPadding(
          padding: EdgeInsets.all(20.0),
          sliver: SliverGrid.count(
            crossAxisCount: 2,
            crossAxisSpacing: 10.0,
            children: _buildGridTitleList(30),
          ),
        ),
      ],
    );
  }

  //SliverGridDelegateWithFixedCrossAxisCount可以指定列的個數的Grid
  //SliverGridDelegateWithMaxCrossAxisExtent根據每個寬度自動計算的Grid
  Widget _buildGridCustom() {
    return GridView.custom(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 5,
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
      ),
      childrenDelegate: SliverChildBuilderDelegate(
        (context, index) {
          return Image.asset('assets/cat.jpeg');
        },
        childCount: 30,
      ),
    );
  }

  List<Container> _buildGridTitleList(int count) {
    return List.generate(
        count,
        (int index) => Container(
              child: Image.asset('assets/cat.jpeg'),
            ));
  }
}