Flutter GridView的基本使用

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

属性	说明
gridDelegate	控制GridView中子元素排列（SliverGridDelegateWithFixedCrossAxisCount）

SliverGridDelegateWithFixedCrossAxisCount

属性	说明
crossAxisCount	交叉轴的子元素数量
mainAxisSpacing	主轴方向子元素间距
crossAxisSpacing	交叉轴方向子元素间距
childAspectRatio	宽度与高度的比值
SliverGridDelegateWithMaxCrossAxisExtent
属性	说明
–	–
maxCrossAxisExtent	交叉轴最大数量子元素

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

class MyState extends State {@overrideWidget 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 {@overrideWidget 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 = [];@overrideWidget 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,);}
}