Flutter的菜鸟教程九:GridView

本文将介绍一个新的内容 GridView,之前我们使用Container实现了一个网格效果,但只是为了学习组合widget,下面我们将通过GridView来实现网格效果
这里只介绍四种方式实现网格布局，先看各实现代码,最后有完整版代码

1.extent

/*** 1.最常用的网格布局之extent*/
Widget _buildGrid1() {return new GridView.extent(//横轴的最大长度maxCrossAxisExtent: 180.0,padding: const EdgeInsets.all(4.0),//主轴间隔mainAxisSpacing: 4.0,//横轴间隔crossAxisSpacing: 4.0,children: _buildGridTileList(30),);
}

运行:

2.count

/*** 2.最常用的网格布局之count*/
Widget _buildGrid2() {return new GridView.count(//      横轴数量 这里的横轴就是x轴 因为方向是垂直的时候 主轴是垂直的crossAxisCount: 2,padding: const EdgeInsets.all(4.0),//主轴间隔mainAxisSpacing: 20.0,//横轴间隔crossAxisSpacing: 4.0,children: _buildGridTileList(30),);
}

运行:

3.滚动效果的ScrollView

/*** 3.滚动效果的ScrollView*/
Widget _buildGrid3() {return new CustomScrollView(primary: false,slivers: <Widget>[new SliverPadding(padding: const EdgeInsets.all(20.0),sliver: new SliverGrid.count(crossAxisSpacing: 10.0,//      横轴数量 这里的横轴就是x轴 因为方向是垂直的时候 主轴是垂直的crossAxisCount: 2,children: _buildGridTileList(30),),),],);
}

运行:

4.custom

/*** 4.GridView.custom*/
Widget _buildGrid4() {return new GridView.custom(gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
//      横轴数量 这里的横轴就是x轴 因为方向是垂直的时候 主轴是垂直的crossAxisCount: 2,mainAxisSpacing: 4.0,crossAxisSpacing: 4.0,),childrenDelegate: new SliverChildBuilderDelegate((context, index) {return new Image.asset("images/shuang.jpg");},childCount: 30,),);
}

运行:

最后附上完整代码

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/*** GridView*/
import 'package:flutter/material.dart';import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;void main() {
//  debugPaintSizeEnabled = true;runApp(new MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(title: "GridView",home: new Scaffold(appBar: new AppBar(title: new Text("GridView"),),body: new MyGridView(),),);}
}class MyGridView extends StatefulWidget {@overrideState<StatefulWidget> createState() {return new MyGridViewState();}
}class MyGridViewState extends State<MyGridView> {@overrideWidget build(BuildContext context) {return new Center(child: _buildGrid3(),);}
}/*** 1.最常用的网格布局之extent*/
Widget _buildGrid1() {return new GridView.extent(//横轴的最大长度maxCrossAxisExtent: 180.0,padding: const EdgeInsets.all(4.0),//主轴间隔mainAxisSpacing: 4.0,//横轴间隔crossAxisSpacing: 4.0,children: _buildGridTileList(30),);
}/*** 2.最常用的网格布局之count*/
Widget _buildGrid2() {return new GridView.count(//      横轴数量 这里的横轴就是x轴 因为方向是垂直的时候 主轴是垂直的crossAxisCount: 2,padding: const EdgeInsets.all(4.0),//主轴间隔mainAxisSpacing: 20.0,//横轴间隔crossAxisSpacing: 4.0,children: _buildGridTileList(30),);
}/*** 3.滚动效果的ScrollView*/
Widget _buildGrid3() {return new CustomScrollView(primary: false,slivers: <Widget>[new SliverPadding(padding: const EdgeInsets.all(20.0),sliver: new SliverGrid.count(crossAxisSpacing: 10.0,//      横轴数量 这里的横轴就是x轴 因为方向是垂直的时候 主轴是垂直的crossAxisCount: 2,children: _buildGridTileList(30),),),],);
}/*** 4.GridView.custom*/
Widget _buildGrid4() {return new GridView.custom(gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
//      横轴数量 这里的横轴就是x轴 因为方向是垂直的时候 主轴是垂直的crossAxisCount: 2,mainAxisSpacing: 4.0,crossAxisSpacing: 4.0,),childrenDelegate: new SliverChildBuilderDelegate((context, index) {return new Image.asset("images/shuang.jpg");},childCount: 30,),);
}List<Container> _buildGridTileList(int count) {return new List.generate(count,(int index) => new Container(child: new Image.asset("images/shuang.jpg"),));
}

我们只需要修改MyGridViewState 的child的函数名就可以运行查看不同的结果

Flutter的菜鸟教程九:GridView相关推荐

Flutter的菜鸟教程
Flutter的菜鸟教程一:第一个Flutter应用 Flutter的菜鸟教程二:最简单的MaterialApp Flutter的菜鸟教程三:Row/Column布局 Flutter的菜鸟教程四:Li ...
菜鸟教程android数据库,Flutter - Android 菜鸟教程打包
icon.jpg 准备工作 1 App签名创建keystore 如果已经有keystore请调至下一步 keytool -genkey -v -keystore ~/key.jks -keyalg ...
Flutter的菜鸟教程二十五:Flutter字体
本文学习在程序中使用自定义字体 https://fonts.google.com/?selection.family=Hanalei+Fill (有很多字体供选择)需翻墙,这里我们随便下载了一下用来演 ...
Flutter的菜鸟教程十七:动画-渲染动画
本文开始学习Flutter动画渲染动画 AnimatedWidget简化监视动画的过程(根据动画的状态例如启动停止和翻转方向) 用AnimatedBuilder重构并行动画 /*** 动画 ...
超级简单的Python爬虫教程,python爬虫菜鸟教程官网
毫无基础的人如何入门 Python ? Python是一种计算机程序设计语言.你可能已经听说过很多种流行的编程语言,比如非常难学的C语言,非常流行的Java语言,适合初学者的Basic语言,适合网页编 ...
菜鸟教程 + Java基础课程 + part2
菜鸟教程 + Java基础课程 + part2 目录菜鸟教程 + Java基础课程 + part2 八 Number &Math 类 1. Number类 2. Math类 3. Numbe ...
Flutter学习总纲教程
Flutter学习总纲教程 Flutter Widget 目录准备学习Flutter之前,必须要了解(不需要多么精通,但至少要了解)Dart的基础特性. Dart基础特性 · Dart 是 G ...
全网最简单的C# json数据解析无敌菜鸟教程十分钟搞定json数据解析
全网最简单的C# json数据解析无敌菜鸟教程十分钟搞定json数据解析废话先说一点,算了.直接进入正题吧. 用例子说话: JSON数据: string json: " {" ...
菜鸟教程python3在线工具_3个非常实用的Python爬虫工具,你会几个？
Xpath Helper 是一个面向 Xpath 初学者的 Google Chrome 插件.相对于人工找 Xpath 语法,Xpath Helper 可以实现自动分析.只要你打开一个网页,然后点击任 ...

Flutter的菜鸟教程九:GridView

Flutter的菜鸟教程九:GridView相关推荐

最新文章

热门文章