本文章为作者在学习Flutter 时的学习总结，在本文中你可了解到以下内容：

• Flutter的安装与项目创建
• Flutter中ListView的使用
• Flutter中GridView的使用
• Flutter中Text控件的使用
• Flutter中Image控件的使用
• Flutter中控件的点击事件
• Flutter中Dialog的展示

1. Flutter的安装与使用

能查看本文，相信你对Flutter 已经有了一定的了解，在此就不用对Flutter 进行介绍了。如果完全不了解可以查看： Flutter 官网

1.1 Flutter的安装

虽然 Flutter 官方文档 已有详细的安装介绍与使用教程了，但我还是对在 Windows Android Studio中的使用作一下简单介绍。

1.1.1 获取Flutter SDK

SDK下载地址：https://flutter.io/sdk-archive/ 
点击链接进入官网选择自己系统对应的SDK，下载最新版SDK，并解压。记录本文时下载的版本为Beta v0.3.2。

1.1.2 配置环境变量

将下载好的SDK zip文件解压后，点击 “控制面板>用户帐户>用户帐户>更改我的环境变量” 将Flutter SDK bin文件所在路径 如H:\flutter\bin 添加进Path环境变量中。 
DOS命令行中输入以下命令可判断是否成功并查看flutter的命令用法。

flutter

• 1

1.1.3 Android Studio的配置

Xcode中的配置方式参考：https://flutter.io/setup-macos/进行配置 
在Android Studio中 点击 “File>Settings>Plugins>Browse repositories” 搜索 Flutter 安装插件，然后重启Android Studio即可。

1.2 Flutter App的创建

在Android Studio 中点击 “File>New>New Flutter Project” 选择 Flutter Application 然后 下一步。如果环境变量配置成功，在Flutter SDK path 那一栏会自动选中本地Flutter所在的位置。

创建成功后，可以看到lib 文件下的main.dart 文件，在Flutter项目中，代码都在lib文件夹下。然后可选择设备运行程序。在选择系统设备时，在macOS中如有IOS模拟器，Android Studio依然支持打开IOS模拟器。 

2. Flutter中的ListView

下面介绍在Flutter中怎样展示一个滚动列表，官方文档也有详细的讲解：https://flutter.io/get-started/codelab/

展示列表的代码 
将 lib/main.dart文件中的代码改为如下代码，运行即可。

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(home: new Scaffold(appBar: new AppBar(title: new Text("Flutter App")),body: new HomePage(),),);}
}//主页要展示的内容
class HomePage extends StatefulWidget {@overrideState<StatefulWidget> createState() => new ListState();
}//得到一个ListView
class ListState extends State {@overrideWidget build(BuildContext context) {return new ListView.builder(itemCount: 40, itemBuilder: buildItem);}//ListView的ItemWidget buildItem(BuildContext context, int index) {return new Text("xhu_ww");}
}

涉及的知识点：

• => 它是用于单行函数或方法的简写
• void runApp(Widget app) ：将指定控件显示在屏幕上
• StatelessWidget : 状态不需要经常变化的控件
• StatefulWidget：状态可经常变化的控件
• State ：[StatefulWidget]的逻辑和内部状态。
• Text：显示文本的控件

上述代码的实现方式：runApp > StatelessWidget > StatefulWidget > State

也可以是这种方式：runApp > StatefulWidget > State 代码如下：

import 'package:flutter/material.dart';void main() => runApp(new HomePage());//主页要展示的内容
class HomePage extends StatefulWidget {@overrideState<StatefulWidget> createState() => new ListState();
}//得到一个ListView
class ListState extends State {@overrideWidget build(BuildContext context) {return new MaterialApp(home: new Scaffold(appBar: new AppBar(title: new Text("Flutter App")),body: new ListView.builder(itemCount: 40, itemBuilder: buildItem)),);}//ListView的ItemWidget buildItem(BuildContext context, int index) => new Text("xhu_ww");
}

ListView Item 的其他设置：

  //ListView的ItemWidget buildItem(BuildContext context, int index) {//设置分割线if (index.isOdd) return new Divider();//设置字体样式TextStyle textStyle =new TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0);//设置Paddingreturn new Padding(padding: const EdgeInsets.all(8.0),child: new Text("xhu_ww", style: textStyle));}

最终效果如下： 

3. Flutter中的GridView

展示GridView列表与ListView类似，需要得到一个展示GridView的sate 对象，现在使用GridView加载图片。 
首先查看GridView的使用方式： 
SDK文档GridView地址：https://docs.flutter.io/flutter/widgets/GridView-class.html 
可以得到使用方式：

new GridView.count(primary: false,padding: const EdgeInsets.all(20.0),crossAxisSpacing: 10.0,crossAxisCount: 2,children: <Widget>[const Text('He\'d have you all unravel at the'),const Text('Heed not the rabble'),const Text('Sound of screams but the'),const Text('Who scream'),const Text('Revolution is coming...'),const Text('Revolution, they...'),],
)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

发现需要一个 Widget 的集合

然后得到 Image 控件的集合：

  String url ="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=495625508,""3408544765&fm=27&gp=0.jpg";Widget getItemWidget() {//BoxFit 可设置展示图片时 的填充方式return new Image(image: new NetworkImage(url), fit: BoxFit.cover);}List<Widget> _buildGridTileList(int number) {List<Widget> widgetList = new List();for (int i = 0; i < number; i++) {widgetList.add(getItemWidget());}return widgetList;}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

在Flutter中，加载图片的控件为 Image,它可以直接从网络中加载图片，传入图片Url即可。 
最后与ListView一样，得到显示GrIdView的state类 
最终代码：

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(home: new Scaffold(appBar: new AppBar(title: new Text("Flutter App")),body: new HomePage(),),);}
}//主页要展示的内容
class HomePage extends StatefulWidget {@overrideState<StatefulWidget> createState() => new GridViewState();
}class GridViewState extends State {@overrideWidget build(BuildContext context) => new GridView.count(primary: false,padding: const EdgeInsets.all(8.0),mainAxisSpacing: 8.0,//竖向间距crossAxisCount: 2,//横向Item的个数crossAxisSpacing: 8.0,//横向间距children: buildGridTileList(5));List<Widget> buildGridTileList(int number) {List<Widget> widgetList = new List();for (int i = 0; i < number; i++) {widgetList.add(getItemWidget());}return widgetList;}String url ="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=495625508,""3408544765&fm=27&gp=0.jpg";Widget getItemWidget() {//BoxFit 可设置展示图片时 的填充方式return new Image(image: new NetworkImage(url), fit: BoxFit.cover);}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48

最后的效果 
 
发现没图片时记得开启网络。

4. Flutter中的点击事件与Dialog展示

4.1. 控件的点击事件

对于手势官方文档中也有相应的介绍：https://flutter.io/gestures/ 在这里就不重复介绍了 
onTap 对应点击事件，使用GestureDetector 手势检测器 可以给 widget添加点击事件 
示例代码如下：

  //ListView的Item 一个有点击事件的Text控件Widget buildItem(BuildContext context, int index) {//设置分割线if (index.isOdd) return new Divider();//设置字体样式TextStyle textStyle =new TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0);return new GestureDetector(onTap: () {//处理点击事件},child: new Container(padding: const EdgeInsets.all(8.0),child: new Text("xhu_ww", style: textStyle),),);}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

这里有个新的 widget Container 查看他的构造方法，可以发现可以用此控件可以设置 padding，margin，color 可装载子控件。

  Container({Key key,this.alignment,this.padding,Color color,Decoration decoration,this.foregroundDecoration,double width,double height,BoxConstraints constraints,this.margin,this.transform,this.child,}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

4.2. Dialog的展示

SDK开发文档中Dialog的介绍：https://docs.flutter.io/flutter/material/Dialog-class.html 
使用方式： 
步骤一：得到Dialog控件 
这里我使用的是 AlertDialog

 Widget getDialog() {return new AlertDialog(title: new Text("点击提示"),content: new SingleChildScrollView(child: new ListBody(children: <Widget>[new Text("你点击了Item")])),actions: <Widget>[ new FlatButton(child: new Text("取消"),onPressed: () {//按钮点击事件Navigator.of(context).pop();},),new FlatButton(child: new Text("确认"),onPressed: () { Navigator.of(context).pop();},),],);}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

步骤二：展示Dialog 
使用flutter 自带的 showDialog 方法展示Dialog

  showDialog(context: context,builder: (BuildContext context) {getDialog();});

• 1
• 2
• 3
• 4
• 5

在onTap 方法中调用 showDialog方法即可 
点击效果 

最后附上Flutter的相关链接： 
Flutter官网：https://flutter.io/ 
FlutterSDK文档：https://docs.flutter.io/index.html 
Flutter第三方库：https://pub.dartlang.org/flutter/ 
Dart官网：https://www.dartlang.org/ 
本文代码链接： https://github.com/897532167/flutter_app/blob/master/lib/main.dart