Merge branch 'dev' of https://github.com/efoxTeam/flutter-ui into dev

Author: wanwusangzhi

assets/imgs/cool.jpg

@@ -1 +1,51 @@
-## **文档完善中**
+## **Image**
+
+>
+用于展示图片的控件，支持本地图片，资源图片，网络图片等加载方式
+
+### 构造方法
+``` dart
+Image({
+    Key key,
+    @required this.image,
+    this.semanticLabel,
+    this.excludeFromSemantics = false,
+    this.width,
+    this.height,
+    this.color,
+    this.colorBlendMode,
+    this.fit,
+    this.alignment = Alignment.center,
+    this.repeat = ImageRepeat.noRepeat,
+    this.centerSlice,
+    this.matchTextDirection = false,
+    this.gaplessPlayback = false,
+    this.filterQuality = FilterQuality.low,
+  })
+```
+
+### 属性介绍
+* image：
+    * Image(): 通用方法，使用ImageProvider（包括：AssetImage, NetworkImage, FileImage, MemoryImage）实现，如下方法本质上也是使用这个方法
+    * Image.asset: 加载资源图片
+    * Image.file: 加载本地图片文件夹
+    * Image.network: 加载网络图片
+    * Image.memory: 加载Uint8List资源图片
+* width：图片容器宽度
+* height：图片容器高度
+* color：color一般和colorBlendMod配合使用
+* colorBlendMode：和color配合使用，添加滤镜效果
+* fit：如何将图像分配到布局空间中
+    * BoxFit.fill : 全图显示，显示尽可能拉伸，充满
+    * BoxFit.contain : 全图显示，显示原比例，不需充满
+    * BoxFit.cover : 显示可能拉伸，可能裁剪，充满
+    * BoxFit.fitWidth : 显示尽可能拉伸，可能裁剪，宽度充满
+    * BoxFit.fitHeight 显示尽可能拉伸，可能裁剪，高度充满:
+    * BoxFit.none 无fit:
+    * BoxFit.scaleDown 效果和contain差不多，但此属性不允许显示超过原图片大小，可小不可大:
+* alignment = Alignment.center：控制图片的显示位置
+* repeat = ImageRepeat.noRepeat：图片是否重复
+* centerSlice：九个补丁图像的中心切片
+* matchTextDirection = false：若值为turn，与Directionality配合使用，图片显示方向
+* gaplessPlayback = false：当ImageProvider发生变化后，重新加载图片的过程中，原图片的展示是否保留。若值为true，保留，若为false，不保留，直接空白等待下一张图片加载
+* filterQuality = FilterQuality.low：用于设置图像的FilterQuality

docs/widget/common/image/index.md

@@ -1 +1,35 @@
-## **文档完善中**
+## **ListTile**
+>
+单个固定高度的行，通常包含一些文本和前导或者尾随的图标，通常在ListView中使用
+
+### 构造方法
+``` dart
+ListTile({
+    Key key,
+    this.leading,
+    this.title,
+    this.subtitle,
+    this.trailing,
+    this.isThreeLine = false,
+    this.dense,
+    this.contentPadding,
+    this.enabled = true,
+    this.onTap,
+    this.onLongPress,
+    this.selected = false,
+  })
+```
+
+### 属性介绍
+
+* leading：显示左侧的小组件
+* title：标题
+* subtitle：子标题
+* trailing：显示右侧的小组件
+* isThreeLine = false：是否显示三行文本
+* dense：是否垂直密集显示
+* contentPadding：ListTile的内部填充
+* enabled = true：是否是交互式的
+* onTap：点击时的回调
+* onLongPress：长按时的回调
+* selected = false：图标和文本是否以相同颜色呈现

docs/widget/common/listtile/index.md

@@ -1 +1,29 @@
-## **文档完善中**
+## **Stepper**
+
+>
+一个步骤小控件，通过一系列步骤显示进度，对于表单的情况，Stepper特别有用，可以通过控制需要完成多个步骤才能提交的表单
+
+### 构造方法
+``` dart
+Stepper({
+    Key key,
+    @required this.steps,
+    this.physics,
+    this.type = StepperType.vertical,
+    this.currentStep = 0,
+    this.onStepTapped,
+    this.onStepContinue,
+    this.onStepCancel,
+    this.controlsBuilder,
+    })
+```
+
+### 属性介绍
+* steps: Stepper的内容，包含标题，副标题，内容
+* physics: Stepper滚动视图应如何响应用户输入
+* type = StepperType.vertical: 确定Stepper的布局类型
+* currentStep: 当前步骤索引，内容被显示
+* onStepTapped: step被点击时的回调
+* onStepContinue: 点击 继续 按钮时的回调
+* onStepCancel: 点击 取消 按钮时的回调
+* controlsBuilder: 用于创建自定义控件的回调

docs/widget/common/stepper/index.md

@@ -79,6 +79,7 @@ class IndexState extends State<Index> {
       this._bodyList.add(authorTile(nameKey));
       this._bodyList.add(Divider());
     }
+    print('文档完成长度：${mdText.length}');
     if (mdText.length > 30) {
       this._bodyList.add(await markdown_comp.Index(mdText));
       // demo

lib/components/widget_comp.dart

@@ -6,6 +6,8 @@ class Index extends StatefulWidget {
 }
 
 class _IndexState extends State<Index> {
+  List _imageType = ['Image.network', 'Image.asset', 'ImageProvider'];
+
   @override
   void initState() {
     super.initState();
@@ -17,9 +19,60 @@ class _IndexState extends State<Index> {
       appBar: AppBar(
         title: Text('Image'),
       ),
-      body: Center(
-        child: Text('更新中'),
-      ),
+      body: Container(
+        margin: EdgeInsets.fromLTRB(20.0, 0, 20.0, 0),
+        child: ListView.builder(
+          itemCount: _imageType.length,
+          itemBuilder: (context, index) {
+            return _Stack(_imageType[index]);
+          },
+        )
+      )
     );
   }
+
+  Widget _Stack (String item) {
+    return Stack(
+      children: <Widget>[
+        Container(
+          margin: EdgeInsets.only(top: 5.0),
+          width: double.infinity,
+          child: _Image(item)
+        ),
+        Positioned(
+          top: 32,
+          left: 32,
+          child: Text(item, style: TextStyle(fontSize:20, color: Theme.of(context).primaryColor),),
+        )
+      ],
+    );
+  }
+
+  Widget _Image (String item) {
+    switch (item) {
+      case 'Image.network':
+        return Image.network(
+            'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/02/05/Cg-4WlVxbqyIUWdVAAZhyzM-HqkAAEs-AET61oABmHj388.jpg',
+            fit: BoxFit.cover
+          );
+          break;
+      case 'Image.asset':
+        return Image.asset(
+          'assets/imgs/cool.jpg',
+          fit: BoxFit.cover
+        );
+        break;
+      case 'ImageProvider':
+        return Image(
+          image: NetworkImage(
+            'https://pic.qqtn.com/up/2017-10/15082099209936659.jpg'
+          ),
+        );
+      default:
+        return Image.network(
+            'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/02/05/Cg-4WlVxbqyIUWdVAAZhyzM-HqkAAEs-AET61oABmHj388.jpg',
+            fit: BoxFit.cover,
+          );
+    }
+  }
 }

lib/widget/common/image/demo.dart

@@ -6,6 +6,23 @@ class Index extends StatefulWidget {
 }
 
 class _IndexState extends State<Index> {
+  List data = [
+    {
+      'enable': true,
+      'subtitle': 'subtitle is not focus',
+      'selected': false
+    },
+    {
+      'enable': false,
+      'subtitle': 'subtitle is not focus',
+      'selected': true
+    },
+    {
+      'enable': true,
+      'subtitle': 'subtitle is not focus',
+      'selected': true
+    }
+  ];
   @override
   void initState() {
     super.initState();
@@ -17,9 +34,58 @@ class _IndexState extends State<Index> {
       appBar: AppBar(
         title: Text('ListTile'),
       ),
-      body: Center(
-        child: Text('更新中'),
-      ),
+      body: Container(
+        padding: EdgeInsets.fromLTRB(20.0, 0, 20.0, 0),
+        child: ListView.builder(
+          itemCount: data.length,
+          itemBuilder: (context, index) {
+            return Column(
+              children: <Widget>[
+                ListTile(
+                  leading: CircleAvatar(
+                    backgroundImage: AssetImage('assets/imgs/cool.jpg'),
+                  ),
+                  title: Text('title'),
+                  subtitle: Text(data[index]['subtitle']),
+                  trailing: Icon(Icons.arrow_right),
+                  onTap: (){
+                    if (!data[index]['selected']) {
+                      this.setState((){
+                        data[index]['subtitle'] = 'subtitle is focus now';
+                        data[index]['selected'] = true;
+                      });
+                    } else {
+                      this.setState((){
+                        data[index]['subtitle'] = 'subtitle is not focus';
+                        data[index]['selected'] = false;
+                      });
+                    }
+                  },
+                  onLongPress: (){
+                    Scaffold.of(context).showSnackBar(
+                      SnackBar(
+                        content: Text('你长按了我'),
+                        backgroundColor: Theme.of(context).primaryColor,
+                        action: SnackBarAction(
+                          textColor: Colors.white,
+                          label: '取消',
+                          onPressed: (){},
+                        ),
+                        duration: Duration(seconds: 2),
+                      )
+                    );
+                  },
+                  selected: data[index]['selected'],
+                  isThreeLine: false,
+                  enabled: data[index]['enable'],
+                  contentPadding: EdgeInsets.all(0),
+                ),
+                Divider()
+              ],
+            );
+          },
+        )
+      )
     );
   }
 }