阅读 24

flutter笔记(一) 官方示例&代码解读

flutter笔记汇总

语法的东西就不详细说了,可以看官方文档了解一下www.dartcn.com/,学习过程中也会介绍一些。

环境搭好,怎么搭看官网,很详细,并且为中国用户提供了解决方案

flutter help
复制代码

可以看见官方提供的命令。接下来创建个项目:

flutter create mypp
复制代码

创建好之后进入myapp先看一下模拟器(android stidio里边自己下)

➜  myapp flutter emulators    //查看可用的模拟器
复制代码

image.png
我这里有两个,运行android模拟器

➜ flutter emulators --launch Nexus_5X_API_28
复制代码

模拟器跑起来之后,查看一下可用设备

flutter devices 
复制代码

image.png
接下来把项目跑起来

//只有一个可用设备
flutter run
//如果有多个设备需要指定id
flutter run -d emulator-5554
复制代码

image.png

image.png
可以看到项目已经跑起来了 命令直接按r热重载,R重启项目。 按h可以查看更多命令。
image.png
我们来看一下代码。

import 'package:flutter/material.dart';  //引入material风格的ui库

//每个dart项目都要有一个main函数
//void表示空类型,写到函数前边代表这个函数没有返回值
//这里用了dart语法的箭头函数
void main() => runApp(MyApp());

//main函数跑的MyApp在这里定义  继承了无状态Widget(相当于react的组件)
class MyApp extends StatelessWidget {
  @override    //@元数据  为代码添加额外的信息  @override代表下边这个是一个覆写超类的函数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      //app的主题
      theme: ThemeData(
        //这里给了蓝色,可以改成red、green、yellow等其他颜色然后在命令行按r看一下效果
        primarySwatch: Colors.blue,
      ),
      //路由主页
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

//创建主页  这是一个有状态组件
class MyHomePage extends StatefulWidget {
  //接收一个参数title
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  //有状态组件还需要一个State类
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

//有状态组件的State类
class _MyHomePageState extends State<MyHomePage> {
  //状态
  int _counter = 0;
  //声明一个改变状态的函数
  void _incrementCounter() {
    //和react的setState作用一样
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    //这里有个Scaffold组件,先不用管干啥的,介绍组件的时候会详细介绍
    return Scaffold(
      //主页的标题栏
      appBar: AppBar(
        //传入的title
        title: Text(widget.title),
      ),
      //主页内容,Center组件里边的内容水平垂直居中,以后再详细介绍
      body: Center(
        //Column的子组件垂直排列
        child: Column(
          //主轴上的对其方式,这里是居中
          mainAxisAlignment: MainAxisAlignment.center,
          //多个子组件用children,单个子组件用child(有child的组件,不一定有children,有的组件只可以有一个子组件)
          //这里是一个泛型数组里只能放Widget
          children: <Widget>[
            //文本组件,可以设置文字样式
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              //相当于js里边的`${_counter}`
              '$_counter',
              //文本样式
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      //ui库提供的浮动按钮
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        //长按提示
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}
复制代码

差不多就这些东西吧,详细的东西放到后边,这里先介绍一下结构。