重学flutter第一天(已修改)

今天学习了如何设置flutter，并新建了第一个flutter项目，我的环境是macos加vscode，使用的是快捷键，shitf+commond+p键呼出插件栏，选择创建flutter项目，然后再栏目中输入flutter项目的名称，之后会自定义选择目录，在这个目录下会生成初始项目。

 

之后选择模拟器，关联模拟器，再然后开启flutter项目，有两种方式 run without debugging 和 run with debugging。后者会启动热更新即reload。

 

flutter的入口文件为main.dart文件;初始内容如下：

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: '陈黎明 1111'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: 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(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

相对于第一节课，无用信息太多，只捡主要的，入口文件有一个入口函数，类似c语言，就是main函数，main函数调用runApp函数，runApp的参数为MyApp函数的调用，听着绕口，看代码：

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

比较难理解的是MyApp是个什么玩意，是一个类的实例，这个实例继承了statelesswidgit类的特性并进行了重写，代码如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: '陈黎明 1111'),
    );
  }
}

 

可以看到上图代码，MyApp继承了无状态组件，并在内部使用@override进行了重写。重写除了使用@override关键字，还是用了widget关键字，widget关键字声明了一个build函数，这个函数传递一个参数，参数类型为BuildContext，这里的参数也使用了生命式的写法，如下：

 BuildContext context 

函数内部通过return 返回了另外一个函数MaterialApp函数，这个函数是一个组件，这个组件设置App的名称，主题，home主页的主题。 这个函数传递参数的写法也比较有意思，总的参数类似对象，但是最外层却没有{},如果是按照单个参数进行传递的，中间却有冒号，例如title:'flutter demo',theme:'...'，这种使用方法需要注意，叫做命名参数。 以上代码嵌套了太多返回函数，其实可以简化为如下代码如：

 

void main() => runApp(MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: ' 444444'),
    ));

 

runApp函数的参数本质就是一个MaterialApp组件。但上面这种写法就不支持热更新了,原因如下：

main() 方法里的更改不能使用 Hot Reload，因为 main() 方法不会因重建窗口小部件树而重新执行，所以更改 main() 方法里的代码，不会在 Hot Reload 之后看到效果。在main函数外面更改就可以，也就是组件生命成一个函数，然后将函数传入main函数中，这样修改函数组件，就会实现热更新，但是如果直接将组件传入main函数中，热更新就会失效。

如果不是使用热更新可以使用restart，其实就是控制面板，闪电和restart的区别。️ 和 ️ 有什么区别。

 

今天就学这么多，总结一下：

 

1、如何用vscode新建一个flutter项目。

2、flutter的入口文件和入口函数 main函数。

3、入口函数如何使用、其参数是什么样的 ，runApp函数和myApp函数，命名参数的使用方法。

4、MyApp函数怎么声明的，即类的实例化怎么使用，其关键字@override的使用。

5、声明式的用法，widget生命一个build函数，build参数的函数的定义 BuildContext context。

6、关键字 Widget、build、BuildContext、MaterialApp 、StatelessWidget、StateWidget、@overide、Scaffold、AppBar、Center等等。

7、哪些情况下热更新不起作用，该如何办。