• flutter GridView 网格布局


    当数据量很大的时候用矩阵方式排列比较清晰。此时我们可以用网格列表组件 GridView

    现布局。

    GridView 创建网格列表有多种方式,常用有以下两种。

    1、可以通过 GridView.count 实现网格布局

    2、通过 GridView.builder 实现网格布局

    示例代码

    import 'package:flutter/material.dart';
    void main () => runApp(MyApp());
    
    class MyApp extends StatelessWidget{
      @override
      Widget build(BuildContext context ){
          return MaterialApp(
            title:'ListView widget',
            home:Scaffold(
              body:GridView.count(
                padding:const EdgeInsets.all(20.0),
                crossAxisSpacing: 10.0,
                crossAxisCount: 3,
                children: <Widget>[
                  const Text('哈喽'),
                  const Text('I LOVE U'),
                  const Text('中国红'),
                  const Text('玩游戏'),
                  const Text('看书'),
                  const Text('吃火锅')
                ],
              )
            ),
          );
      }
    }
    import 'package:flutter/material.dart';
    void main () => runApp(MyApp());
    
    class MyApp extends StatelessWidget{
      @override
      Widget build(BuildContext context ){
          return MaterialApp(
            title:'ListView widget',
            home:Scaffold(
              body:GridView(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                  mainAxisSpacing: 2.0,
                  crossAxisSpacing: 2.0,
                  childAspectRatio: 0.7
                ),
                children: <Widget>[
                 new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
                 new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
                 new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
                 new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
                 new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
                 new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
                 new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
                 new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
                 new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
               
                ],
              )
            ),
          );
      }
    }
    import 'package:flutter/material.dart';
    
    import 'res/listData.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('FlutterDemo')),
            body: LayoutDemo(),
          ));
      }
    }
    class LayoutDemo extends StatelessWidget {  
    
    
      Widget _getListData (context,index) {
            return Container(            
                child:Column(
                    children: <Widget>[
                      Image.network(listData[index]['imageUrl']),
                      SizedBox(height: 12),
                      Text(
                        listData[index]['title'],
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 20
                        ),
                      )
                    ],
    
                ),
                decoration: BoxDecoration(
                  border: Border.all(
                    color:Color.fromRGBO(233, 233,233, 0.9),
                     1
                  )
                ),
                  
                // height: 400,  //设置高度没有反应
              );
      }
    
    
      @override
      Widget build(BuildContext context) {    
        return GridView.builder(
            
            //注意
            gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing:10.0 ,   //水平子 Widget 之间间距
              mainAxisSpacing: 10.0,    //垂直子 Widget 之间间距          
              crossAxisCount: 2,  //一行的 Widget 数量
            ),
            itemCount: listData.length,
            itemBuilder:this._getListData,
        );
      }
    }
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('FlutterDemo')),
            body: LayoutDemo(),
          ));
      }
    }
    class LayoutDemo extends StatelessWidget {  
    
    
      List<Widget> _getListData() {
          List<Widget> list = new List();
    
          for (var i = 0; i < 20; i++) {
            list.add(Container(
              alignment: Alignment.center,
              child: Text(
                '这是第$i条数据',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
              color: Colors.blue,        
              // height: 400,  //设置高度没有反应
            ));
          }
          return list;
      }
    
    
      @override
      Widget build(BuildContext context) {    
        return GridView.count(
            crossAxisSpacing:20.0 ,   //水平子 Widget 之间间距
            mainAxisSpacing: 20.0,    //垂直子 Widget 之间间距
            padding: EdgeInsets.all(10),
            crossAxisCount: 2,  //一行的 Widget 数量
            childAspectRatio:0.7,  //宽度和高度的比例
            children: this._getListData(),
        );
      }
    }
    import 'package:flutter/material.dart';
    
    import 'res/listData.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('FlutterDemo')),
            body: LayoutDemo(),
          ));
      }
    }
    class LayoutDemo extends StatelessWidget {  
    
    
      List<Widget> _getListData() {
          var tempList=listData.map((value){
              return Container(            
                child:Column(
                    children: <Widget>[
                      Image.network(value['imageUrl']),
                      SizedBox(height: 12),
                      Text(
                        value['title'],
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 20
                        ),
                      )
                    ],
    
                ),
                decoration: BoxDecoration(
    
                  border: Border.all(
                    color:Color.fromRGBO(233, 233,233, 0.9),
                     1
                  )
                ),
                  
                // height: 400,  //设置高度没有反应
              );
    
          });
          // ('xxx','xxx')
          return tempList.toList();
      }
    
    
      @override
      Widget build(BuildContext context) {    
        return GridView.count(
            crossAxisSpacing:10.0 ,   //水平子 Widget 之间间距
            mainAxisSpacing: 10.0,    //垂直子 Widget 之间间距
            padding: EdgeInsets.all(10),
            crossAxisCount: 2,  //一行的 Widget 数量
            // childAspectRatio:0.7,  //宽度和高度的比例
            children: this._getListData(),
        );
      }
    }
  • 相关阅读:
    洛谷P1083 借教室
    洛谷 P1311 【选择客栈】
    一些加快 程序运行速度的方法
    【CYH-02】noip2018数论模拟赛:赛后题解
    【CYH-02】noip2018数论模拟赛:比赛通知栏
    洛谷P2888 [USACO07NOV]牛栏Cow Hurdles
    洛谷P2299 Mzc和体委的争夺战 题解
    洛谷P1113 杂务
    洛谷 P1635 跳跃
    LightOJ1119 Pimp My Ride(状压DP)
  • 原文地址:https://www.cnblogs.com/loaderman/p/11165287.html
Copyright © 2020-2023  润新知