zoukankan      html  css  js  c++  java
  • GridView组件 以及动态GridView

    一、Flutter 列表组件概述

    列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义
    列表项,支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下
    分类:
    1、垂直列表
    2、垂直图文列表
    3、水平列表
    4、动态列表
    5、矩阵式列表(网格布局)
     

    二、Flutter GridView 组件的常用参数

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

    GridView 创建网格列表有多种方式,下面我们主要介绍两种。

    1、可以通过 GridView.count 实现网格布局
    2、通过 GridView.builder 实现网格布局
     
    常用属性:
     
    名称
    类型
    说明 
    scrollDirection 
    Axis 滚动方法 
    padding
    EdgeInsetsGeometry 内边距
    resolve 
    bool 组件反向排序 
    crossAxisSpacing 
    double 水平子 Widget 之间间距
    mainAxisSpacing 
    double 垂直子 Widget 之间间距
    crossAxisCount 
    int 一行的 Widget 数量
    childAspectRatio 
    double 子 Widget 宽高比例
    children 
      <Widget>[ ]
    gridDelegate 
    SliverGridDelegateWithFix
    edCrossAxisCount(常用)
    SliverGridDelegateWithMax
    CrossAxisExtent
     
    控制布局主要用在
    GridView.builder 里面
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    三、Flutter GridView.count 实现网格布局 

    import 'package:flutter/material.dart';
    import 'res/listData.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(title: Text('FlutterDemo')),
          body: LayoutContent(),
        ));
      }
    }
    
    class LayoutContent 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(230, 230, 230, 0.9),  1.0)),
          );
        });
        // ('124124','124214')
        return tempList.toList();
      }
    
      @override
      Widget build(BuildContext context) {
        return GridView.count(
          padding: EdgeInsets.all(20),
          crossAxisCount: 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
          // childAspectRatio:0.7,
          children: this._getListData(),
        );
      }
    }

    四、Flutter GridView.builder 实现网格布局

     
    import 'package:flutter/material.dart';
    import 'res/listData.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(title: Text('FlutterDemo')),
          body: LayoutContent(),
        ));
      }
    }
    
    class LayoutContent 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(230, 230, 230, 0.9),  1.0)),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return GridView.builder(
          itemCount: listData.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              //横轴元素个数
              crossAxisCount: 2,
              //纵轴间距
              mainAxisSpacing: 20.0,
              //横轴间距
              crossAxisSpacing: 10.0,
              //子组件宽高长度比例
              childAspectRatio: 1.0),
          itemBuilder: this._getListData,
        );
      }
    }
     
     
     
  • 相关阅读:
    SharePoint 2010 与RMS集成方案
    VBS基础教程
    c#中csc命令的用法
    文本文件编码格式转换
    “本地连接”属性中“身份验证”选项卡消失的处理方法
    如何组建中小型SharePoint服务器场
    PHP文件上传详解
    Flash AS3 RadioButton的使用方法
    SUSE ssh登录慢解决办法,ssh登录失败,但是strace一下就好了的分析查询 第一次ssh,路由的问题
    AS3组件之ComboBox下拉框
  • 原文地址:https://www.cnblogs.com/jiefangzhe/p/15234034.html
Copyright © 2011-2022 走看看