Fluent learning (5) GridView

flutter Study (5) GridView

Gridview It's grid layout

One .GridView Common properties

Two .GridView.count Implement grid layout

• Look at this

  import 'package:flutter/material.dart';
  import './res/listData.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
        
    const MyApp({
        Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
        
      return MaterialApp(
          home: Scaffold(
              appBar: AppBar(title: Text('Flutter list ')), body: LayoutDemo()));
    }
  }
  
  class LayoutDemo extends StatelessWidget {
        
    List<Widget> list = [];
  
    // get bulidList => null;
  
    List<Widget> _buildList() {
        
      for (var i = 0; i < 20; i++) {
        
        list.add(ListTile(title: Text(' This is the first $i A text ')));
      }
      return list;
    }
  
    @override
    Widget build(BuildContext context) {
        
     
      return GridView.count(
          crossAxisCount: 4, // Two 
          children: _buildList());
    }
  }
  
  

  • effect

    

    I made a stupid mistake at first

    class LayoutDemo extends StatelessWidget {
             
      List<Widget> list = [];
    
      // get bulidList => null;
    
      buildList() {
             
        for (var i = 0; i < 20; i++) {
             
          list.add(ListTile(title: Text(' This is the first $i A text ')));
        }
       
      }
    
      @override
      Widget build(BuildContext context) {
             
        return GridView.count(
            crossAxisCount: 4, // Two 
            children: list);
      }
    }
    
    

    Found that the page is empty

    The problem is that buildList Write it there , If not called , He won't run by himself , It's not a construction method

    The construction method can drop ！

    class LayoutDemo extends StatelessWidget {
             
      List<Widget> list = [];
    
      // get bulidList => null;
    
      LayoutDemo() {
             
        for (var i = 0; i < 20; i++) {
             
          list.add(ListTile(title: Text(' This is the first $i A text ')));
        }
      }
    
      @override
      Widget build(BuildContext context) {
             
        return GridView.count(
            crossAxisCount: 6, //6 Column 
            children: list);
      }
    }
    

    

• Put it in Container Inside

  class LayoutDemo extends StatelessWidget {
    List<Widget> list = [];
  
    // get bulidList => null;
  
    List<Widget> _buildList() {
      for (var i = 0; i < 20; i++) {
        list.add(Container(
            margin: EdgeInsets.all((20)),
            color: Colors.deepPurpleAccent,
            alignment: Alignment.center,
            child: Text(' The first $i Data ',
                style: TextStyle(color: Colors.cyan, fontSize: 20))));
      }
      return list;
    }
  
    @override
    Widget build(BuildContext context) {
      return GridView.count(
          crossAxisCount: 3, // Two 
          children: _buildList());
    }
  }
  
  

  

  • The interval above is container Of margin Property implemented

    But you can use GridView Own attributes to achieve

    Let's start with margin Get rid of

    class LayoutDemo extends StatelessWidget {
      List<Widget> list = [];
    
      // get bulidList => null;
    
      List<Widget> _buildList() {
        for (var i = 0; i < 20; i++) {
          list.add(Container(
              color: Colors.deepPurpleAccent,
              alignment: Alignment.center,
              child: Text(' The first $i Data ',
                  style: TextStyle(color: Colors.cyan, fontSize: 20))));
        }
        return list;
      }
    
      @override
      Widget build(BuildContext context) {
        return GridView.count(
            crossAxisCount: 3, // Two 
            crossAxisSpacing: 20.0, // Right and left 
            mainAxisSpacing: 20.0,
            padding: EdgeInsets.all(15),
            children: _buildList());
      }
    }
    
    

    

    Grid layout settings Height Invalid , But it can be adjusted Widget Aspect ratio

    childAspectRatio: 0.7,
    

    

• listData Here's the data

  class LayoutDemo extends StatelessWidget {
        
    List<Widget> list = [];
  
    // get bulidList => null;
  
    List<Widget> _getListData() {
        
      var tempList = listData.map((value) {
        
        return Container(
          child: Column(children: <Widget>[
            Image.network(value['imageUrl']),
            SizedBox(
              height: 10,
            ), // Make pictures and texts directly spaced 
            Text(value['title'],
                textAlign: TextAlign.center, style: TextStyle(fontSize: 20))
          ]
              // hold listData Put the data in the component 
  
              ),
          decoration: BoxDecoration(border: Border.all(color: Colors.cyan)),
        ); //ListView The component adapts to the width , So use Column Here, 
      });
      return tempList.toList();
    }
  
    @override
    Widget build(BuildContext context) {
        
      return GridView.count(
          crossAxisCount: 2, // Two 
          crossAxisSpacing: 10.0, // Right and left 
          mainAxisSpacing: 80.0, // Up and down spacing 
          padding: EdgeInsets.all(15),
          children: _getListData());
    }
  }
  
  

  

3、 ... and .GridView.builder Implement grid layout

import 'package:flutter/material.dart';
import './res/listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text('Flutter list ')), body: LayoutDemo()));
  }
}

class LayoutDemo extends StatelessWidget {
  List<Widget> list = [];

  // get bulidList => null;

  Widget _getListData(context, index) {
    return Container(
      child: Column(children: <Widget>[
        Image.network(listData[index]['imageUrl']),
        SizedBox(
          height: 10,
        ), // Make pictures and texts directly spaced 
        Text(listData[index]['title'],
            textAlign: TextAlign.center, style: TextStyle(fontSize: 20))
      ]
          // hold listData Put the data in the component 

          ),
      decoration: BoxDecoration(border: Border.all(color: Colors.cyan)),
    ); //ListView The component adapts to the width , So use Column Here, 
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        mainAxisSpacing: 10.0,
        crossAxisCount: 2,
      ),
      itemCount: listData.length,
      itemBuilder: _getListData,
    );
  }
}