入职了新公司，终于接触到了Flutter，在此记录每天上手成果

Flutter中文网

---

日志随笔

一、Flutter环境搭建

直接参考Flutter中文网，进行部署，最后使用flutter doctor命令行校验，本机环境如下：

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13, on Mac OS X 10.14.4 18E226, locale
    zh-Hans-CN)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.42.1)
[✓] Connected device (2 available)

• No issues found!

本机采用VS Code编辑器进行编辑，按照文档下载对应的插件即可

二、创建初始代码

使用VS Code中的命令创建默认demo，层级如下：

其中ios文件夹中的代码即为Xcode工程，可以使用Xcode打开运行即可，测试发现一个问题：iOS模拟器运行正常，但是使用真机运行失败，github上解答：iOS 13.3.1真机存在免费账号签名问题，无法运行，只能使用iOS模拟器运行

三、初始Demo解析

1、main函数启动程序

• 初始widget需要使用MaterialApp创建，常见参数：title、theme、home，其中home参数认为是必填参数，代表首页

2、StatefulWidget和StatelessWidget

• StatefulWidget是动态，StatelessWidget是静态
• 都需要重写build方法，
• 优先使用StatelessWidget

具体内部实现区别，暂不研究

3、监听动态StatefulWidget的状态改变

创建一个State类，绑定到StatefulWidget，同时在StatefulWidget中使用createState方法添加State类，然后把重写build方法的代码写在State里面，在事件触发时，掉用setState方法，此时会重新执行StatefulWidget的build方法，此处需注意，不是所有代码都会执行

4、使用Navigator打开新的页面

• 新的页面，不代表是新的dart文件，新页面仍然可以在同一个dart里面创建出来
• Navigator.push有两个参数，第一个是默认值content，此处暂不做验证
• 第二个值是新页面，新页面需要使用MaterialPageRoute方法创建出来，此方法参数builder必填，括号内形参，方法内return新的页面，就能给形参赋值，从而正常跳转

以上所有代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "aaa",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {
  var count = 0;
  void countup() {
    count++;
    setState(() {
      print("jjj");
      nslog("kkk");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("bbb"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("ccc"),
            Text(
              "$count",
            ),
            FlatButton(
              child: Text("ddd"),
              textColor: Colors.blue,
              onPressed: () {
                print("eee");
                Navigator.push(context, MaterialPageRoute(builder: (newpage) {
                  return NewPage();
                }));
              },
              onLongPress: () {
                print("iii");
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print("hhh");
          countup();
        },
        // tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("fff"),
      ),
      body: Center(
        child: Text("ggg"),
      ),
    );
  }
}

void nslog(String string) {
  print(string);
}

四、路由传参

• 有固定的格式，接收参数的widget通过固定语法接收参数，接收完之后定义一个参数存储，传输过程中参数名相同
• 回调的参数使用打开widget的方法回调，Navigator.push对应Navigator.pop，同样，第二个参数为回调参数
• 第一个widget获取回调参数时，需要使用await修饰，才能获取到回调参数，传参方法中也可以使用async异步修饰
• async和await分别代表异步操作和延迟操作

代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Route Params',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("111"),
      ),
      body: Column(
        children: [
          Text("222"),
          FlatButton(
            child: Text("333"),
            color: Colors.blue,
            onPressed: () async {
              var backParams = await Navigator.push(context, 
                MaterialPageRoute(builder: (newpage) {
                    return TipRoute(text: "444");
                })
              );
              print("返回值"+"$backParams");
            },
          )
        ],
      ),
    );
  }
}

class TipRoute extends StatelessWidget {
  TipRoute({
    Key key,
    @required this.text, // 接收一个text参数
  }) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("提示"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text),
              RaisedButton(
                onPressed: () => Navigator.pop(context, "我是返回值"),
                child: Text("返回"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

未完待续