Flutter GridView的基本使用

可以将图标、文本等信息按多行多列方式布局的组件。

SliverGridDelegateWithFixedCrossAxisCount

1.GridView()
会一次性全部渲染children中的所有子元素组件，适用于有限个数子元素的场景。

class MyState extends State {
  @override
  Widget build(BuildContext context) {
    List<Widget> teList = [];
    for (int i = 0; i < 12; i++) {
      TextButton e = TextButton(
        onPressed: () {},
        child: Column(children: [Icon(Icons.account_box_rounded), Text("个人")]),
      );
      teList.add(e);
    }

    GridView gridView = GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
          childAspectRatio:1.8
      ),
      children: teList,
    );
    return Scaffold(
      appBar: AppBar(title: Text(""), centerTitle: true),
      body: gridView,
    );
  }
}

2. GridView.count()
   用于设置交叉轴方向子元素的个数。

class MyState extends State {
  @override
  Widget build(BuildContext context) {
    List<Widget> teList = [];
    for (int i = 0; i < 12; i++) {
      TextButton e = TextButton(
        onPressed: () {},
        child: Column(children: [Icon(Icons.account_box_rounded), Text("个人")]),
      );
      teList.add(e);
    }

    GridView gridView = GridView.count(
      crossAxisCount: 3,
      mainAxisSpacing: 3,
      crossAxisSpacing: 3,
      children: teList,
    );
    return Scaffold(
      appBar: AppBar(title: Text(""), centerTitle: true),
      body: gridView,
    );
  }
}

3. GridView.extent(）
   用于设置子元素在交叉轴方向的最大可能长度。

    GridView gridView2 = GridView.extent(
      maxCrossAxisExtent: 99,
      children: teList,
    );

4. GridView.builder
   动态创建子元素，用于子元素比较多或者数量不确定的情况。
   itemCount设置最大数量，如果不设置itemCount，会一直创建item。
   

class MyState extends State {
  List<int> intList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  List<Widget> wList = [];

  @override
  Widget build(BuildContext context) {
    for (int i = 0; i < intList.length; i++) {
      int k = intList[i];
      Text text = Text(k.toString());
      wList.add(text);
    }

    GridView gridView = GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
      ),
      itemBuilder: (context, index) {
        return wList[index];
      },
      itemCount: 10,
    );

    return Scaffold(
      appBar: AppBar(title: Text("222222222")),
      body: gridView,
    );
  }
}