对flutter新建工程的初步认识

不管是visual code 还是Android studio 在新建你的第一个flutter工程时都会自动生成一个简易的demo-----说是简单，但是如果能看得懂，会节省很多的学习时间。
即使开发软件不同，工程结构也相同，下面以Android studio为例：

上图除了我蓝线标记的都是工程自动生成的，其中的lib尤为重要，几乎所有的界面、功能代码都在lib中写的；资源文件可以放在自己新建的assets文件夹下；至于引入三方库的则放在pubspec.yaml中，点击该文件你会看到

可以在dependencies下引入你所需要的库，然后点击上面的Packages get稍等片刻即可。
安利一波三方库使用、引入、注意事项的链接：https://pub.dartlang.org/packages/

下面进入正题：
点开main.dart你会看到以下代码（在这里我直接在代码中写注释）

import 'package:flutter/material.dart';


void main() => runApp(MyApp );    //这里是app启动的入口

class MyApp extends StatelessWidget {    //StatelessWidget 是dart文件必须实现的类
  @override
  Widget build(BuildContext context) {
    return MaterialApp(                              //在这里显示了写法1
      title: 'Acesmart',
      theme: ThemeData(                          //主题
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '‘ Home Page'),      //引入你所要展示的界面
    );
  }
}

class MyHomePage extends StatefulWidget {     //在这里显示了写法2，意思是说如果你直接略掉MyApp ，直接runApp(MyHomePage )也可以，其他的自己想想
  MyHomePage({Key key, this.title}) : super(key: key);    ///构造方法，传参key和title

  final String title;
  //构造方法不写的话，下面这个方法是本类唯一要实现的方法
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> { //这个是关键
  int _counter = 0;                    //定义的变量

  void _incrementCounter() {     //定义的方法
    setState(() {
      _counter++;
    });
  }
//必须实现的方法，功能调用、绘制ui都在这
  @override
  Widget build(BuildContext context) {
  //绘制ui的关键处Scaffold，下面会说
    return Scaffold(
      appBar: AppBar(    //头布局
        title: Text(widget.title),
      ),
      body: Center(                           //center：布局居中
        child: Column(                       //Column：子布局分行
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[               //子布局
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',                //上面定义的变量
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(    //在 Material 中定义的一个功能按钮。
        onPressed: _incrementCounter,       //调用上面的方法
        tooltip: 'Increment',
        child: Icon(Icons.add),                   //图标设置，Icons是Material自带的
      ), 
    );
  }
}

上面着重要注意的就是Scaffold：

• appBar：显示在界面顶部的一个 AppBar

• body：当前界面所显示的主要内容

• floatingActionButton： 在 Material 中定义的一个功能按钮。

• persistentFooterButtons：固定在下方显示的按钮。https://material.google.com/components/buttons.html#buttons-persistent-footer-buttons

• drawer：侧边栏控件

• bottomNavigationBar：显示在底部的导航栏按钮栏。可以查看文档：Flutter学习之制作底部菜单导航

• backgroundColor：背景颜色

• resizeToAvoidBottomPadding： 控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

代码实例就看你新建的工程吧，看完后，如果需要什么控件，可以自主查阅怎么用。