Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改（译者语：类似于React/Vue中虚拟DOM的diff算法）。

(一)

首先，我们创建一个 main 函数。跟其他语言一样，main 函数是应用的入口：

void main() => runApp(new MyApp());

需要做一个点击按钮出现一个提示框，我们首先用StatelessWidget，发现报错了

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(title: 'test the First App',// 应用的主页home: Scaffold(appBar: AppBar(title: Text('rolling'),),body: Center(child: RaisedButton(onPressed: _onPressed, child: Text('roll'),),),),);}void _onPressed(BuildContext context) {debugPrint('_onPressed'); //用commond+4打开showDialog(context: context,builder: AlertDialog(content: Text(('AlertDialog')),); //!报错 StatelessWidget只能用于显示消息 不能用于弹出操作 )}
}

翻阅下文档需要用另外一个widget

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return new MaterialApp(title: 'Flutter Demo',theme: new ThemeData(// This is the theme of your application.//// Try running your application with "flutter run". You'll see the// application has a blue toolbar. Then, without quitting the app, try// changing the primarySwatch below to Colors.green and then invoke// "hot reload" (press "r" in the console where you ran "flutter run",// or press Run > Flutter Hot Reload in IntelliJ). Notice that the// counter didn't reset back to zero; the application is not restarted.primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('Flutter rolling demo'),),body: Center(child: RollingButton(),),));}
}class RollingButton extends StatefulWidget {// StatefulWidget 需要实现这个方法，返回一个 State@overrideState createState() {return _RollingState();}
}class _RollingState extends State<RollingButton> {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn RaisedButton(child: Text('Roll'),onPressed: _onPressed,);}void _onPressed() {debugPrint('_onPressed'); //用commond+4打开showDialog(context: context,builder: (_) {return AlertDialog(content: Text('AlertDialog'),);});}
}

基本控件

在 Flutter 里，UI 控件就是所谓的 Widget。通过组合不同的 Widget，来实现我们用户交互界面。

Widget 分为两种，一种是无状态的，叫 StatelessWidget，它只能用来展示信息，不能有动作（用户交互）；另一种是有状态的，叫 StatefulWidget，这种 Widget 可以通过改变状态使得 UI 发生变化，它可以包含用户交互。

StatelessWidget 的使用非常简单，我们只需要继承 StatelessWidget，然后实现 build 方法就可以了：

class FooWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {// ...}
}

StatefulWidget 还需要一个 State：

class BarWidget extends StatefulWidget {@overrideState createState() {return _BarWidgetState();}
}class _BarWidgetState extends State<BarWidget> {@overrideWidget build(BuildContext context) {// ...}
}

从 BarWidget 的实现来看，好像跟前面使用 StatelessWidget 没有什么区别，都是在 build 方法里面返回一个 Widget，只是 stateful widget 把这个方法挪到了 State 里面。实际上，两者的区别非常大。stateless widget 整个生命周期里都不会改变，所以 build 方法只会执行一次。而 stateful widget 只要状态改变，就会调用 build 方法重新创建 UI。

class BarWidget extends StatefulWidget {@overrideState createState() {return _BarWidgetState();}
}class _BarWidgetState extends State<BarWidget> {var i = 0;@overrideWidget build(BuildContext context) {return Row(children: <Widget>[Text('i = $i'),RaisedButton(onPressed: () {setState(() {++i;});},child: Text('click'),)],);}
}

Flutter 应用 Widget(一)

基本控件

Widget