2. Flutter 第一个demo elloword

创建项目：项目名字不要一样，否则过不去

 

 

项目结构如下，可以看到，默认有ios和Android两个目录，我们的代码位于widget_test.dart文件下：

在项目目录中，您应用程序的代码位于 lib/main.dart.

 

 

Material组件：

 

关于flutter的优点，有很多，跨平台（最核心的优点，但是由于windows不支持ios开发，暂时没法测试），热重载等等，热重载顾名思义，就是修改代码后能自动重载app，让我们来体验一下热重载吧：

 

热重载的实际操作：有一个闪电

 

 

配置sdk

 

 

Release包：

flutter build apk --release

 

 

如何显示布局的网格？

 

问题：

1.现在总是报红色?如何运行？

如果要写安卓原生的，必须在新的Android目录下实现

2.如何和APP进行绑定的？

3.在Anroid写好了，如何在ios上运行

在开发中我一直用Android进行调试的，开发完成之后尝试用iOS手机运行时，看到画面用两个字来形容就是"完美"，真的是毫无式样差别，令我不得感叹一下Flutter是真的香

 

 

 

• 本示例创建一个Material APP。Material是一种标准的移动端和web端的视觉设计语言。 Flutter提供了一套丰富的Material widgets。
• main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写。
• 该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个widget。 在Flutter中，大多数东西都是widget，包括对齐(alignment)、填充(padding)和布局(layout)
• Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂

 

 

 

Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.

Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:

1. 一个 StatefulWidget类。
2. 一个 State类。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在.

state类的用处

 

 

 

 

 

 

 

 

 

class RandomWordsState extends State<RandomWords> { RandomWordsState extends State<RandomWords> {

  @override@override

  Widget build(BuildContext context) {Widget build(BuildContext context) {

    final wordPair = new WordPair.random();final wordPair = new WordPair.random();

    return new Text(wordPair.asPascalCase);return new Text(wordPair.asPascalCase);

  }

}

 

 

 

 

 

在Flutter的 响应式风格 的框架中，调用 setState()  会为State对象触发 build() 方法，从而导致对UI的更新

 

点击事件：

在  _buildRow 中让心形❤️图标变得可以点击。如果单词条目已经添加到收藏夹中， 再次点击它将其从收藏夹中删除。当心形❤️图标被点击时，函数调用 setState() 通知框架状态已经改变。

 

 

 

在Flutter中，View相当于是Widget。然而，与View相比，Widget有一些不同之处。 首先，Widget仅支持一帧，并且在每一帧上，Flutter的框架都会创建一个Widget实例树

 

 

异步“

要更新UI，您可以调用setState，这会触发build方法再次运行并更新数据。

您可以在UI线程上运行网络请求代码而不会导致UI挂起

 

 

 

 

 

 

 

 

 

 loadData() async {loadData() async {

    String dataURL = "https://jsonplaceholder.typicode.com/posts";String dataURL = "https://jsonplaceholder.typicode.com/posts";

    http.Response response = await http.get(dataURL);http.Response response = await http.get(dataURL);

    setState(() {setState(() {

      widgets = JSON.decode(response.body);widgets = JSON.decode(response.body);

    });

  }

 

 

由于Flutter是单线程的，运行一个事件循环（如Node.js），所以您不必担心线程管理或者使用AsyncTasks、IntentServices。

要异步运行代码，可以将函数声明为异步函数，并在该函数中等待这个耗时任务

 

 

 

当使用受欢迎的“http”package时，Flutter进行网络信非常简单。

虽然“http” package 没有实现OkHttp的所有功能，但“http” package 抽象出了许多常用的API，可以简单有效的发起网络请求。

 

 

 

如何监听Android Activity生命周期事件

在Android中，您可以覆盖Activity的方法来捕获Activity的生命周期回调。

在Flutter中您可以通过挂接到WidgetsBinding观察并监听didChangeAppLifecycleState更改事件来监听生命周期事件

 

 

和原生交互：通过很多的插件