添加Flutter代码模板

Author: AweiLoveAndroid

README.md

@@ -26,6 +26,8 @@
 
 * #### [我模仿Flutter中文官网写的一个本地的html页面，同时将官网的一些**未翻译的英文**页面**翻译**成了中文。](https://github.com/AweiLoveAndroid/FlutterWebsiteCN_Mine)
 
+* #### :+1: [Flutter代码模板插件，适用于AS以及IDEA]()
+
 ## 二、相关示例代码和项目实战
 
 * #### [Flutter相关demo示例代码](https://github.com/AweiLoveAndroid/Flutter-learning/tree/master/projects/flutter-demo)

code_plugins/settings.jar

@@ -12,6 +12,7 @@ import 'listview_multi_level.dart';
 import 'listview_radio_listtitle.dart';
 import 'listview_simple.dart';
 import 'listview_sliver.dart';
+import 'sliver_vs_grid.dart';
 
 class ListViewDemos extends StatelessWidget {
   @override
@@ -39,6 +40,8 @@ class ListViewDemos extends StatelessWidget {
           new ListViewMultiItemDemo()),
       buildClicks(
           buildContents('多级列表Demo'), context, new ListViewMultiLevelDemo()),
+      buildClicks(buildContents(' SliverGrid 和 GridView 的对比'), context,
+          new SliverGridVSGridView()),
       new Text(''),
     ];
 

projects/flutter-demo/lib/all_samples/list/list_demo.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+
+// SliverGrid 和 GridView 的对比
+// 1.SliverGrid只能在有slivers属性的列表控件里面使用，GridView可以单独使用。
+// 2.SliverGrid根据设置的maxCrossAxisExtent自动判断创建几列，而GridView需要协商crossAxisCount属性
+// 3.SliverGrid和GridView大体功能基本一致，可以创建相同的UI效果。
+void main() {
+  runApp(
+    new MaterialApp(
+      title: 'SliverGrid和GridView对比',
+      theme: new ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: new SliverGridVSGridView(),
+    ),
+  );
+}
+
+class SliverGridVSGridView extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return new Scaffold(
+      appBar: new AppBar(
+        leading: new IconButton(
+            icon: new Icon(Icons.keyboard_arrow_left),
+            onPressed: () {
+              // 返回上一个页面
+              Navigator.of(context).pop();
+            }),
+        title: new Text('SliverGrid和GridView对比'),
+      ),
+//      body: buildSliverGridItem(),
+      body: buildGridViewItem(),
+    );
+  }
+
+  // 使用SliverGrid创建列表
+  Widget buildSliverGridItem() {
+    return new CustomScrollView(
+      shrinkWrap: true,
+      slivers: <Widget>[
+        new SliverGrid(
+          // 设置grid的宽高、间距属性
+          gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
+            // 可以理解为：每一个item的宽（或高）的最大值
+            maxCrossAxisExtent: 100.0,
+            // 行之间的间距
+            mainAxisSpacing: 10.0,
+            // 列之间的间距
+            crossAxisSpacing: 10.0,
+            // 子孩子的宽高比例，即：宽度/高度的值
+            childAspectRatio: 1.0,
+          ),
+          // 设置每一个item的布局
+          delegate: new SliverChildBuilderDelegate(
+            (BuildContext context, int index) {
+              return new Container(
+                alignment: Alignment.center,
+                color: Colors.teal[100 * (index % 10)],
+                child: new Text('grid item $index'),
+              );
+            },
+            childCount: 30,
+          ),
+        )
+      ],
+    );
+  }
+
+  // 使用SliverGrid创建列表
+  Widget buildGridViewItem() {
+    return new GridView.count(
+      // 创建4列
+      crossAxisCount: 4,
+      // Axis.horizontal表示横向滑动，scrollDirection: Axis.vertical表示纵向滑动
+      scrollDirection: Axis.vertical,
+      // 列之间的间距
+      crossAxisSpacing: 10.0,
+      // 行之间的间距
+      mainAxisSpacing: 10.0,
+      // 默认false 是否根据子孩子的宽高自动包裹item自身
+      shrinkWrap: false,
+      // 子孩子的比例
+      childAspectRatio: 1.0,
+
+      // 生成30个item展示在列表中
+      children: new List.generate(30, (index) {
+        return new Container(
+          alignment: Alignment.center,
+          color: Colors.teal[100 * (index % 10)],
+          child: new Text('grid item $index'),
+        );
+      }),
+    );
+  }
+}

projects/flutter-demo/lib/all_samples/list/sliver_vs_grid.dart

@@ -0,0 +1 @@
+sliver_vs_grid.dart �������ע��һ����һ���� ������ʱ��ͷŵ�һ������ȥ���Ա�

projects/flutter-demo/lib/all_samples/list/说明.txt

@@ -17,17 +17,32 @@ class ContainerDemo extends StatelessWidget {
     return new Center(
       //使子控件在其内部水平和垂直居中
       child: new Container(
+        alignment: Alignment.center,
+        padding: const EdgeInsets.all(8.0),
+        margin: const EdgeInsets.all(8.0),
+        constraints: new BoxConstraints.expand(
+          height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
+        ),
         width: 300.0,
         height: 200.0,
-        decoration: new BoxDecoration(
-          color: const Color(0xfffce5cd),
-          border: new Border.all(
-            //设置Border属性给容器添加边框
-            color: const Color(0xff6d9eeb), //为边框添加颜色
-            width: 8.0, //边框宽度
-          ),
-        ),
+        decoration: buildBoxDecoration(),
+        foregroundDecoration: buildBoxDecoration(),
         child: new Text('容器演示'),
+        transform: new Matrix4.rotationZ(0.1),
+      ),
+    );
+  }
+
+  // 注意：BoxDecoration返回的是Decoration对象
+  Decoration buildBoxDecoration() {
+    return new BoxDecoration(
+      color: const Color(0xfffce5cd),
+      //设置Border属性给容器添加边框
+      border: new Border.all(
+        //为边框添加颜色
+        color: const Color(0xff6d9eeb),
+        //边框宽度
+        width: 8.0,
       ),
     );
   }

projects/flutter-demo/lib/view_demo/view/ContainerDemo.dart

@@ -1,12 +1,11 @@
-Flutter和原生Android控件对比：
+Flutter和原生Android控件对比：
 
 Flutter控件|Android控件
 -|-
 AppBar|ActionBar/ToolBar
 ListView|ListView/RecyclerView
 Text|TextView
 Center|ViewGroup
-Container|RelativeLayout
 FloatingActionButton|FloatingActionButton(design库里面的)
 BottomNavigationBar|BottomNavigation(design库里面的)
 RaisedButton/Button|Button
@@ -15,6 +14,8 @@ Row|android:orientation="horizontal"
 DecorationImage|ImageView
 Image|ImageView
 Stack|FrameLayout/RelativeLayout
+Container|RelativeLayout
+CustomMultiChildLayout|RelativeLayout
 Algin|alginParentXXX属性
 resizeToAvoidBottomPadding|android:windowSoftInputMode=”adjustResize属性
 SingleChildScrollView|ScrollView