feat:ListTile

Author: sam

docs/widget/common/listtile/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：图标和文本是否以相同颜色呈现

lib/widget/common/listtile/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()
+              ],
+            );
+          },
+        )
+      )
     );
   }
 }

readme/widget_progress.md

@@ -56,7 +56,7 @@ Flutter UI
           │  ├─icon 【✔️ v1.0】
           │  ├─iconbutton
           │  ├─image 【✔️ v1.0】
-          │  ├─listtile
+          │  ├─listtile 【✔️ v1.0】
           │  ├─placeholder
           │  ├─raisedbutton
           │  ├─rawimage