feat: listView

Author: DIVINER-only

docs/widget/regular/listview/index.md

@@ -1 +1,48 @@
-## **ListView**
+## **ListView**
+
+>
+滚动列表控件
+* 与GridView相似，基本上市slivers里面只包含一个SliverList的CustomScrollView
+* 在Flutter中有几种构建ListView的方式，分别为：默认 **List, ListView.builder, ListView.separated, ListView.custom**
+
+### 构造方法
+``` dart
+ListView({
+  Key key,
+  Axis scrollDirection = Axis.vertical,
+  bool reverse = false,
+  ScrollController controller,
+  bool primary,
+  ScrollPhysics physics,
+  bool shrinkWrap = false,
+  EdgeInsetsGeometry padding,
+  this.itemExtent,
+  bool addAutomaticKeepAlives = true,
+  bool addRepaintBoundaries = true,
+  bool addSemanticIndexes = true,
+  double cacheExtent,
+  List<Widget> children = const <Widget>[],
+  int semanticChildCount,
+})
+```
+
+### 属性介绍
+* scrollDirection: 滚动方向，值为Axis.vertical/horizontal, 默认为垂直方向（Axis.vertical）
+* reverse：默认是从上到下或者从左到右滚动的，这个属性控制是否反向，默认值为false，不反向滚动
+* controller: 控制child滚动时候的位置
+* physics: ScrollPhysics类，影响视图与用户输入交互
+* padding: 边距区域
+* shrinkWrap： 默认false, 滚动视图内容展开和收缩时不重新计算视图大小
+* itemExtent： ListView在滚动方向上每个item所占的高度值
+* children：ListView中的内容Widget
+
+> ListView默认方式
+* 默认List方式，是把数据添加到列表中，之后直接添加到ListView即可,适用于只有少量子项
+
+> ListView.builder()
+* 适用于具有大量（或无限）子项数的列表视图
+* 设置单个item的属性，懒加载，假如有1000个列表，初始渲染时不会对所有都进行渲染，而只会对特定数量的item进行渲染，这对于性能和用户体验来说是很好的提升
+> ListView.separated()
+* separated相对于builder多了一个separatorBuilder参数，它的作用是返回一个分割线，用于控制列表各个元素的间隔如何渲染
+> ListView.custom()
+* 必须参数是childrenDelegate，然后传入一个实现了SliverChildDelegate的组件，如SliverChildListDelegate或者SliverChildBuilderDelegate

flutter-ui

@@ -0,0 +1 @@
+Subproject commit d9e49e6358a786d3eb3eb567557ce84fa9af77b7

lib/widget/regular/listview/demo.dart

@@ -19,21 +19,42 @@ class _IndexState extends State<Index> {
     'http://pic1.win4000.com/wallpaper/2019-02-14/5c65108043791.jpg',
     'http://pic1.win4000.com/wallpaper/2019-02-14/5c651084373de.jpg'
   ];
+  var scrollDirections = Axis.vertical;
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: Text('ListView'),),
       body: ListView(
-        scrollDirection: Axis.vertical,
+        scrollDirection: scrollDirections,
+        reverse: false,
+        controller: ScrollController(
+          initialScrollOffset: ScreenUtil().setWidth(420),
+          keepScrollOffset: true
+        ),
+        primary: false,
+        physics: ScrollPhysics(),
+        shrinkWrap: false,
+        padding: EdgeInsets.all(20.0),
+        // itemExtent: ScreenUtil().setWidth(420),
         children: List.generate(10, (index) {
-          return ListTile(
-            title: Text('title $index'),
-            subtitle: Text('subtitle $index'),
-            leading: CircleAvatar(
-              backgroundImage: NetworkImage(listview[index]),
+          return InkWell(
+            onTap: () {
+              this.setState(() {
+                scrollDirections == Axis.vertical ? scrollDirections = Axis.horizontal : scrollDirections = Axis.vertical;
+              });
+            },
+            child: Container(
+              width: ScreenUtil().setWidth(420),
+              height: ScreenUtil().setWidth(220),
+              decoration: BoxDecoration(
+                image: DecorationImage(
+                  image: NetworkImage(listview[index]),
+                  fit: BoxFit.cover
+                ),
+              ),
             ),
-            trailing: Icon(Icons.arrow_right),
-          );  
+          ); 
         }),
       ),
     );

lib/widget/regular/listview/demo_custom.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+class Index extends StatefulWidget {
+  @override
+  _IndexState createState() => _IndexState();
+}
+
+class _IndexState extends State<Index> {
+  List listview = [
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c3e1d90c.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c40f3bc2.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c4406144.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c46823f8.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c48c73d0.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c4b4dc2f.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c51a2a45.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-14/5c65107a0ee05.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-14/5c65108043791.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-14/5c651084373de.jpg'
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('ListView.custom'),),
+      body: ListView.custom(
+        childrenDelegate: SliverChildBuilderDelegate(
+          (context, index) {
+            return Image.network(listview[index]);
+          },
+          childCount: listview.length
+        ),
+      ),
+    );
+  }
+}

lib/widget/regular/listview/demo_separated.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+class Index extends StatefulWidget {
+  @override
+  _IndexState createState() => _IndexState();
+}
+
+class _IndexState extends State<Index> {
+  List listview = [
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c3e1d90c.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c40f3bc2.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c4406144.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c46823f8.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c48c73d0.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c4b4dc2f.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-15/5c664c51a2a45.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-14/5c65107a0ee05.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-14/5c65108043791.jpg',
+    'http://pic1.win4000.com/wallpaper/2019-02-14/5c651084373de.jpg'
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('ListView.separated'),),
+      body: ListView.separated(
+        itemCount: listview.length,
+        itemBuilder: (BuildContext context, int index) {
+          return ListTile(
+            title: Text('title $index'),
+            subtitle: Text('subtitle $index'),
+            leading: CircleAvatar(
+              backgroundImage: NetworkImage(listview[index]),
+            ),
+            trailing: Icon(Icons.arrow_right),
+          ); 
+        },
+        separatorBuilder: (BuildContext context, int index) {
+          return Image.network(listview[index]);
+        },
+      ),
+    );
+  }
+}

lib/widget/regular/listview/index.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:efox_flutter/components/widgetComp.dart' as WidgetComp;
 import 'demo.dart' as Demo;
 import 'demo_builder.dart' as DemoBuilder;
+import 'demo_separated.dart' as DemoSeparated;
+import 'demo_custom.dart' as DemoCustom;
 
 class Index extends StatefulWidget {
   static String title = 'ListView';
@@ -20,7 +22,9 @@ class _IndexState extends State<Index> {
       mdUrl: Index.mdUrl,
       demoChild: <Widget>[
         Demo.Index(),
-        DemoBuilder.Index()
+        DemoBuilder.Index(),
+        DemoSeparated.Index(),
+        DemoCustom.Index()
       ],
     );
   }