Flutter官网示例 demo 的源码， main.dart标注：
// import 导入类库，与java类似
import 'package:flutter/material.dart';
import 'text_example.dart';
// void main()就是程序的入口函数
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// 这个Widget是应用的根布局，类似于页面容器
// 这个类就相当与用Java编写Android时的Application类，StatelessWidget表示无状态控件，
// MaterialApp可以理解为ui的风格，而其中theme就是主题，比如primarySwatch表示主题色调，上面颜色为blue。
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// 这是您的应用程序的主题。
// 尝试使用“ flutter run”运行 应用程序。会看到该应用程序具有一个蓝色的工具栏。然后，在不退出应用程序的情况下，
// 尝试将下面的primarySwatch更改为Colors.green，然后调用“ hot reload”（在运行“ flutter run”的控制台中按“ r”，
// 或者直接在其中保存对“ hot reload”的更改） Flutter IDE）。请注意，计数器没有重置为零。应用程序未重新启动。
primarySwatch: Colors.blue,
// 这使视觉密度适应其上运行应用程序的平台。对于台式机平台，控件将比移动平台上的控件更小，更靠近（更密集）。
visualDensity: VisualDensity.adaptivePlatformDensity,
), //这段代码代表主页，主页的标题就是Flutter Demo Home Page
home: TextExample(),
);//MyHomePage(title: 'Flutter Demo Home Page'),
}
}
// 它继承至StatefulWidget，StatefulWidget与StatelessWidget相反，是一个有状态的控件，
// 如果你的页面需要动态的更新UI，那么就必须继承这个StatefulWidget有状态的控件，
// 相反，如果你只是静态的展示图片，文字等，就继承至StatelessWidget无状态控件就行。
class MyHomePage extends StatefulWidget {
// 这个构造函数，其中的title就是通过上面的MyHomePage(title: ‘Flutter Demo Home Page’)赋值的，而且只能赋值一次，因为他的类型为final String。
MyHomePage({Key key, this.title}) : super(key: key);
//此小部件是应用程序的主页。它是有状态的，表示它具有一个State对象（定义如下），该对象包含影响其外观的字段。
// 此类是状态的配置。它保存由父级（在此例中为App小部件）提供并由State的build方法使用的值（在本例中为标题）。 Widget子类中的字段始终标记为“ final”。
final String title;
// 这里可以简单的理解为所有实现有状态控件StatefulWidget的类都必须重写该方法，
// 而前面的“_”在dart语言中代表私有，类似于Java中的private，只能内部访问。
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
// 一个私有的自增方法，用于点击按钮后，增加上面的整形变量值的操作（_counter++表示自增）：
void _incrementCounter() {
setState(() {
// 对setState的此调用告诉Flutter框架此状态有所更改，这导致它重新运行下面的build方法，
// 以便显示内容可以反映更新的值。如果我们在不调用setState（）的情况下更改_counter，则不会再次调用build方法，因此似乎什么也没有发生。
_counter++;
});
}
// 我们主页的详细布局控件
@override
Widget build(BuildContext context) {
// 每次调用setState时都会重新运行此方法，例如，由上面的_incrementCounter方法完成。
// Flutter框架已经过优化，可以快速重新运行构建方法，因此可以重建任何需要更新的内容，而不必单独更改小部件的实例。
//其中Scaffold可以看作是Material Design中的一个模板，通过它你可以定义appBar,body,drawer等控件。
return Scaffold(
// 上定义标题栏的，可以看到这里定义了标题栏的标题，就是MyHomePage刚传入进入的标题，widget其实就是MyHomePage。
appBar: AppBar(
// 在这里，我们从由App.build方法创建的MyHomePage对象中获取值，并使用它来设置应用栏标题。
title: Text(widget.title),
), // body代码，相当于HTML中的内容，也相当于主页控件的内容，body:center代码内容居中，其中child定义的控件层级，Column代表一行，那么顾名思义Row就表示一列。
body: Center(
// 采用单个子项，并将其放置在父项的中间。
child: Column(
// Column也是一个布局小部件。它获取一个子项列表，并将它们垂直排列。默认情况下，它会调整自身大小以水平适合其子项，并尝试与其父项一样高。
// 调用“调试绘画”（在控制台中按“ p”，从Android Studio中的Flutter Inspector中选择“ Toggle Debug Paint”操作，
// 或在Visual Studio Code中选择“ Toggle Debug Paint”命令）以查看每个小部件的线框...
// 列具有各种属性，可控制其自身大小以及子元素的位置。
// 在这里，我们使用mainAxisAlignment将子项垂直居中；这里的主轴是垂直轴，因为列是垂直的（交叉轴将是水平的）。
// 表示child内部控件也居中显示（mainAxisAlignment翻译成中文就是主轴对准的意思），children: 表示子控件，是一个List类型。
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 文本的内容是“You have pushed the button this many times:”
Text(
'You have pushed the button this many times:',
), //显示开头类定义的一个私有的整形变量_counter，这里引用的方式与jQuery很像，
// 其样式为style: Theme.of(context).textTheme.display1。
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
// 最后是一个自增的浮动按钮，在Java编写的Android程序中同样也有floatingActionButton控件，
// 详细这里很好理解，这里定义了点击该按钮的操作方法onPressed:为上面自增的函数_incrementCounter，tooltip代表长按按钮显示的文字效果，
// 这里为英文的自增。接着就是这个按钮的图标为child: Icon(Icons.add)。
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // 该逗号结尾使自动格式化更适合构建方法。
);
}
}
网友评论