Flutter常用Widget详解（三）

前言

前面两篇文章给大家介绍了Widget中对应原生开发中的一些常用基础控件，Text、TextField、Button、Dialog、Picker等，本篇我们将和大家一起学习ListView、GridView等列表网格布局控件和其他常用的用于布局的Widget，如Container、Row、Column、Padding等等。

列表和网格视图Widget

ListView

ListView通常有两种用法：第一种实现类似于安卓中ScrollView和iOS中UIScrollView；第二种实现类似于安卓中的ListView和iOS中的UITableView。

通过ListView()创建

直接通过ListView()创建，主要属性介绍如下：

• scrollDirection

  表示控件滚动的方向，主要有两个值可设置。Axis.vertical表示垂直滚动视图；Axis.horizontal表示水平滚动视图。

• reverse

  表示读取内容的方向是否颠倒，可设置值为true|false。false表示由左向右或由上向下读取；true表示由右向左或由下向上读取。

• primary

  可设置值为true|false。true时表示内容不足够填充控件区间时也可以有滚动反馈；false表示只有内容超出控件大小时才可滚动。

• physics

  表示物理反馈，一般设置值为AlwaysScrollableScrollPhysics()|ScrollPhysics()。AlwaysScrollableScrollPhysics表示总是有滚动反馈，无论primary值为true or false；ScrollPhysics表示只有只有内容超出控件大小时才会有滚动反馈，无论primary值为true or false。

• padding

  表示控件的内边距。

• controller

  表示用于控制视图滚动位置的控制器对象，设置此属性时primary属性值必须为false，否则报错，可通过scrollController.jumpTo(0.0)让滚动视图回到最顶端或最左位置。

• itemExtent

  表示单个条目的范围，即指item的高度（scrollDirection为Axis.vertical时）或宽度（scrollDirection为Axis.horizontal时）。

• children

  表示列表包含的widget集合，整个滚动视图中的内容设置。

var scrollController = ScrollController();

Widget getListView() {
   
   return ListView(
     scrollDirection: Axis.vertical, 
     reverse: false, 
     primary: false, 
     physics: const AlwaysScrollableScrollPhysics(), 
     padding: EdgeInsets.all(25),
     controller: scrollController, 
     itemExtent: 50, 
     children: <Widget>[
       const Text('I\'m dedicating every day to you'),
       const Text('Domestic life was never quite my style'),
       const Text('When you smile, you knock me out, I fall apart'),