筆錄Flutter（四）GridView常用屬性、使用

Flutter練習demo

常用屬性

使用方式

4種使用方式的區別

GridView()、GridView.count()、GridView.extent() 這三種和GridView.builder()的區別在於：

1. GridView都需要一個Widget數組作爲其子元素，前三種方式都會提前將所有子widget都構建好，所以只適用於子Widget數量比較少
2. 當子widget比較多時，我們可以通過GridView.builder來動態創建子Widget。

這裏只說下GridView.builder()方式。

更多的使用方式參考GridView

GridView.builder()

效果圖：

import 'package:flutter/material.dart';

class GridViewPage extends State {
  List<String> list = new List();

  GridViewPage() : super() {
    for (var x = 0; x < 10; x++) {
      list.add("GirdView=$x");
    }
  }

  BoxDecoration _decoration = new BoxDecoration(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(5),
      bottomRight: Radius.circular(5),
    ),
  );

  Widget _getWidget(BuildContext ctx, int i) {
    return Container(
      alignment: Alignment.bottomCenter,
      decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage(
              "images/s.jpg",
            ),
          ),
          borderRadius: BorderRadius.circular(5)),
      child: Container(
        width: double.infinity,
        alignment: Alignment.center,
        height: 30,
        child: Text(
          "List__${list[i]}",
          style: TextStyle(color: Colors.cyan),
        ),
        decoration: BoxDecoration(
        color: Color(0x66000000),
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(5),
            bottomRight: Radius.circular(5),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Girdview"),
        ),
        body: GridView.builder(
            padding: EdgeInsets.all(10),
            itemCount: list.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              childAspectRatio: 0.7,
            ),
            itemBuilder: _getWidget),
      ),
    );
  }
}

下拉刷新、上拉加載 和ListView大同小異，不再仔細介紹！！！