ListView2

直接通过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'),
       const Text('And I thought I was so smart'),
       const Text('I\'m dedicating every day to you'),
       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'),
       const Text('And I thought I was so smart'),
       const Text('I\'m dedicating every day to you'),
       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'),
       const Text('And I thought I was so smart'),
       const Text('I\'m dedicating every day to you'),
       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'),
       const Text('And I thought I was so smart'),
       const Text('And I thought I was so smart'),
       const Text('I\'m dedicating every day to you'),
       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'),
       const Text('And I thought I was so smart'),
       const Text('I\'m dedicating every day to you'),
       MaterialButton(
         color: Colors.blueAccent,
         textColor: Colors.white,
         child: Text('返回顶部'),
         onPressed: () {
           scrollController.jumpTo(0.0); 
         },
       ),
     ],
   );
 }

 

通过ListView.builder()创建

当创建动态列表或包含大量数据的列表时，使用此方法创建，其会自动回收列表元素。相当于安卓中的可复用itemView的ListView或RecyclerView和iOS中可复用UITableCell的UITableView或可复用UICollectionViewCell的UICollectionView，主要的两个属性为：

• itemCount

　　　　表示列表的条目总数量。

• itemBuilder

　　　　一个创建item Widget的函数：Widget Function(BuildContext context, int index)，通过实现改函数来创建item内容，index表示条目的位置索引。

 Widget getListViewBuilder() {
   return ListView.builder(
     scrollDirection: Axis.vertical,
     reverse: false,
     itemExtent: 50,
     itemCount: 30, 
     itemBuilder: (buildContext, index) {
       return Text('This is num : $index', style: TextStyle(fontSize: 20, color: index % 2 == 0 ? Colors.blueAccent : Colors.redAccent),);
     },
   );
 }