This is the 22nd day of my participation in Gwen Challenge

Table components are often used in Flutter development, and tables are also required to display data during App development. In fact, the properties of The Gridview and ListView are very similar, so this article will discuss the simple use of the table component Gridview in Flutter development.

 

Gridview is used in several ways

1, GridView.count(@required int crossAxisCount)

To use gridView. count, pass an int that creates a fixed number of items. CrossAxisCount is the number of items on the horizontal axis (default is horizontal).

Gridview. extent(@required double maxCrossAxisExtent)

Gridview. extent creates the maximum width of the item on the horizontal axis. MaxCrossAxisExtent indicates the maximum width of the item on the horizontal axis.

Gridview.builder (@required this.gridDelegate, @Required IndexedWidgetBuilder itemBuilder)

An itemBuilder can be used to dynamically create widgets when there are a large number of widgets.

Gridview.custom (@required this.gridDelegate,@required this.childrenDelegate)

GridView. Custom is used to create a GridView using two proxy methods, gridDelegate and childrenDelegate, where the gridDelegate is the delegate for the layout and controls the number of child widgets per column or row. As well as the upper and lower left and right spacing and width to height ratio; The Delegate method for The childrenDelegate is implemented in two ways, and you need to be aware of the differences when using them.

 

Simple use of Gridview example

The specific operation is as follows:

1. Specific implementation source code of DART file

import 'package:flutter/material.dart'; import 'package:portal/model/workspace_item_data.dart'; import 'package:portal/widgets/widget_warpper.dart'; class WorkspacePage extends StatefulWidget { @override _WorkspacePageState createState() => _WorkspacePageState(); } class _WorkspacePageState extends State<WorkspacePage> { @override Widget build(BuildContext context) { return Scaffold(appBar: buildAppBar(context, title: "workbench ", leading: Container()), Body: GridViet.Builder (itemCount: listData.length, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 10, crossAxisSpacing: 10, childAspectRatio: 0.9), padding: EdgeInsets. All (10), itemBuilder: getItem,),); } Widget getItem(context, index) { return Container( decoration: BoxDecoration(border: Border.all(color: Colors.black12, width: 2)), child: Column( children: [ Image.network(listData[index]['imageUrl']), SizedBox( height: 10, ), Text(listData[index]['title']) ], ), ); }}Copy the code

2. Data source files

The data source for the itemCount of the Gridview (we deliberately created a few more items to reflect the effect of the list) :

List listData=[{"title": 'admin ', "author": 'Mohamed Chahin', "imageUrl": 'https://www.itying.com/images/flutter/1.png'}, {" title ": 'coordination office," author ":" Google ", "imageUrl" : "Https://www.itying.com/images/flutter/2.png"}, {" title ": 'identities," author ":" Alibaba ", "imageUrl" : "Https://www.itying.com/images/flutter/3.png"}, {" title ": 'conference room," author ":' Mohamed Chahin '," imageUrl ": "Https://www.itying.com/images/flutter/4.png"}, {" title ": 'enterprise email," author ":' Mohamed Chahin '," imageUrl ": "Https://www.itying.com/images/flutter/5.png"}, {" title ": 'temperature'," the author: "' Mohamed Chahin '," imageUrl ": "Https://www.itying.com/images/flutter/6.png"}, {" title ": 'enterprise culture," the author: "' Mohamed Chahin ', "imageUrl" : 'https://www.itying.com/images/flutter/7.png', },];Copy the code

3. Effect drawing

The effect picture is as follows:

The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “Program Ape by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention!