image.png

    1. import 'package:flutter/material.dart'; //安卓风格widget
    2. import 'package:flutter/cupertino.dart'; //苹果风格widget
    3. void main() => runApp(MyApp()); //指定入口为 MyApp
    4. //入口
    5. class MyApp extends StatelessWidget {
    6. //MaterialApp 为root widget
    7. @override
    8. Widget build(BuildContext context) {
    9. //MaterialApp 表示当前应用的风格是 Material Design。
    10. //为了使用其他已经封装好的 Material Design 风格的 Widget,就必须使用 MaterialApp。
    11. //因此 MaterialApp 经常是 Flutter Widget 树里的第一个元素,就是 Root Widget。
    12. return MaterialApp(
    13. title: 'Flutter Demo',//目前不知道干啥用的.应该是显示在导航栏上的,但是没有作用,感觉是被Scaffold覆盖掉了
    14. theme: ThemeData( //ThemeData 设置 Flutter App 的主题,比如颜色、字体等。
    15. primarySwatch: Colors.blue, //导航栏的背景色
    16. ),
    17. //home 必须要赋值,因为是进入app的第一个页面. 一般都是 Scaffold
    18. home: MyHomePage(title: 'Flutter Demo Home Page'),
    19. );
    20. }
    21. }
    22. //这里才是正在的根视图
    23. class MyHomePage extends StatefulWidget {
    24. MyHomePage({Key key, this.title}) : super(key: key);
    25. final String title;
    26. @override
    27. _MyHomePageState createState() => _MyHomePageState();
    28. }
    29. class _MyHomePageState extends State<MyHomePage> {
    30. @override
    31. Widget build(BuildContext context) {
    32. //Scaffold 是实现 Material Design 基本视觉布局结构的 Widget,
    33. //它被设计为 MaterialApp 的顶级容器,会自动填满屏幕,而且会自动适配不同的屏幕,例如刘海屏等。
    34. return Scaffold(
    35. appBar: AppBar( //顶部的导航栏,不设置的话就不会显示。
    36. title: Text(widget.title), //设置标题取的是上面homePage的title
    37. backgroundColor: Colors.deepOrange, //设置导航栏的背景颜色
    38. ),
    39. //body 是 Widget 类型,是 Scaffold 的最重要的属性,也是实际要显示的 UI
    40. body: Center( //Center、Container
    41. child: Column(
    42. mainAxisAlignment: MainAxisAlignment.center,
    43. children: <Widget>[
    44. Text(
    45. 'You have pushed the button this many times:',
    46. ),
    47. Text(
    48. '$_counter',
    49. style: Theme.of(context).textTheme.display1,
    50. ),
    51. ],
    52. ),
    53. ),
    54. );
    55. }
    56. }