前言 GridView可以构建一个二维网格列表.需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridView子组件如何排列(layout).SliverGridDelegate是一个抽象类,定义了GridView Layout相关接口,子类需要通过实现它们来实现具体的布局算法.Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverG…

一,概述 ScrollView 是一个带有滚动的视图组件. 二,组成部分 ScrollView 由三部分组成: Scrollable - 它监听各种用户手势并实现滚动的交互设计.可滚动Widget都直接或间接包含一个Scrollable widget,因此它们包括一些共同的属性,我们在此统一介绍一下: Scrollable({ ... this.axisDirection = AxisDirection.down, this.controller, this.physics, @required…

前言 CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件.它可以包含多种滚动模型,举个例子,假设有一个页面,顶部需要一个GridView,底部需要一个ListView,而要求整个页面的滑动效果是统一的,即它们看起来是一个整体.如果使用GridView+ListView来实现的话,就不能保证一致的滑动效果,因为它们的滚动效果是分离的,所以这时就需要一个"胶水",把这些彼此独立的可滚动组件"粘"起来,而CustomScrollView的…

前言 当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter则会提示Overflow错误.为此,Flutter提供了多种可滚动组件(Scrollable Widget)用于显示列表和长布局. 可滚动组件都直接或间接包含一个Scrollable组件,它们包括一些共同的属性,接口如下: Scrollable({ ... // 滚动方向 this.axisDirection = AxisDirection.down, // 此属性接受一个ScrollController对象…

前言 可以用ScrollController来控制可滚动组件的滚动位置. 接口描述 ScrollController({ // 初始滚动位置 double initialScrollOffset = 0.0, // 是否保持滚动位置 this.keepScrollOffset = true, this.debugLabel, }) 代码示例 // ScrollController // 可以用ScrollController来控制可滚动组件的滚动位置. import 'package:flutt…

前言 它可以沿一个方向线性排布所有子组件,并且它也可以支持基于Sliver的延迟构建模型. 接口描述 ListView({ Key key, // 可滚动widget公共参数 Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, EdgeInsetsGeometry padding, // ListV…

前言 SingleChildScrollView类似于Android中的ScrollView,它只能接收一个子组件. 接口描述 const SingleChildScrollView({ Key key, this.scrollDirection = Axis.vertical, // 是否按照阅读方向相反的方向滑动,如:scrollDirection值为Axis.horizontal,如果阅读方向是从左到右(取决于语言环境,阿拉伯语就是从右到左). // reverse为true时,那么滑动方…

第30讲 UI组件之 GridView组件 1.网格布局组件GridView GridView是一个ViewGroup(布局控件),可使用表格的方式显示组件,可滚动的控件.一般用于显示多张图片,比如实现九宫格图,用GridView是首选,也是最简单的.主要用于设置Adapter. GridView常用的XML属性: 属性名称 描述 android:columnWidth 设置列的宽度. android:gravity 设置对齐方式.可选的值有:top.bottom.left.right.cent…

flutter中的ListView组件和GridView组件都是常用的布局组件,有时候ListView中需要嵌套GridView来使用,例如下图: 这种情况就需要在ListView里面再嵌套一个GridView用于排放图片等信息,先来看一下GridView一些常用的参数 GridView.count( crossAxisCount: 3, // 每行显示多少个 crossAxisSpacing: 1.5, // 横轴网格间距 mainAxisSpacing: 1.5, // 纵轴网格间距 chi…

目录 简介 GridView详解 GridView的构造函数 GridView的使用 总结 简介 GridView是一个网格化的布局,如果在填充的过程中子组件超出了展示的范围的时候,那么GridView会自动滚动. 因为这个滚动的特性,所以GridView是一个非常好用的Widget.今天我们一起来探索一下GridView这个layout组件的秘密. GridView详解 GridView是一个可滚动的view,也就是ScrollView,事实上GridView继承自BoxScrollView:…