One, the old routine, look at the style first

At the bottom of the article source code, figure 1 is the style, Figure 2 is my actual development of the display

Two, explain (attached source code)

1. The GridView component is mainly used here

The GridView is a scrollable, 2D array control.

The gridDelegate parameter controls the arrangement of child controls, with two options:

  • SliverGridDelegateWithFixedCrossAxisCount: cross axis on a fixed number, for the cross axis perpendicular to the direction of the GridView refers to the horizontal direction.
  • SliverGridDelegateWithMaxCrossAxisExtent: as far as possible on the cross axis, such as horizontal side have 500 space, specify this value to 150, you can put three, some remaining space, this time the GridView each Item will be narrowed, placing four.

SliverGridDelegateWithFixedCrossAxisCount have attributes is introduced as follows:

  • crossAxisCount: Number in the direction of cross axis.
  • mainAxisSpacing: The interval between two lines in the main axis direction.
  • crossAxisSpacing: The interval between the intersecting axes.
  • childAspectRatio: Aspect ratio of child controls.

2. If you need to reverse the scrolling direction, such as top to bottom, change it to bottom to top

Attribute needs to be set: true indicates rollover

reverse: false
Copy the code

3. To scroll horizontally, set the following properties

scrollDirection: Axis.horizontal
Copy the code

4. Add a padding to the GridView component as if we needed the whole thing

Press Alt+Enter to bring up a shortcut key for a new component, place the mouse over a component, and then Alt+Enter can wrap the component with a layer of padding

Related shortcuts to Flutter: Android Studio has some shortcuts for Flutter

5. Of course it’s not a good idea to load components through children

GridView provides some quick build methods, so just remember the following two commonly used ones

GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, ), itemBuilder: (context, index) { return Container( height: 80, color: Colors.primaries[index % Colors.primaries.length], ); }, itemCount: 50, ) GridView.count( crossAxisCount: 3, children: List.generate(50, (i) { return Container( height: 80, color: Colors.primaries[i % Colors.primaries.length], ); }),)Copy the code

Three, the source code

import 'package:flutter/material.dart'; class Mytest extends StatefulWidget { @override _MytestState createState() => _MytestState(); } class _MytestState extends State<Mytest> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('songms'),), // This is the top TAB style, can be removed if not needed body: Padding(Padding: const EdgeInsets. All (8.0), child: getItem(), )); GetItem () {return gridView.builder (//scrollDirection: Axis. Horizontal,// Add this to reverse: False, / / set to true will reverse rolling, such as from bottom to top, from left to right gridDelegate: SliverGridDelegateWithFixedCrossAxisCount (crossAxisCount: 2, // This represents how many crossAxisSpacing per row: 10, // The distance between two columns (vertical scrolling) mainAxisSpacing: 4 // The distance between two rows (vertical scrolling)), itemBuilder: (context, index) { return _createGridViewItem(Colors.primaries[index]); }, itemCount: 12, ); /* Return GridView(Children: [_createGridViewItem(Colors. Primaries [0]),],); Widget _createGridViewItem(Color Color) {return Container(height: 80, Color: Color,); }}Copy the code

Continuously updated……