Flutter入门三部曲(1) - 基础认识

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

export PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn/
export FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn/

flutter create flutter_start

- android //生成的android目录。里面是根据脚本生成的android项目
- ios //同上，ios项目
- lib //这个目录下面是运行的代码
  - main.dart //代码文件
- test //测试文件
 - widget_test.dart //测试代码
- pubspec.yaml //项目的配置文件

#这里是配置项目的名字和说明
name: flutter_start
description: A new Flutter project.

# 配置项目依赖
dependencies:
  flutter:
    sdk: flutter

  #这里是加入了ios的图标。默认情况下，ios手机上，使用ios的图标
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

#项目的具体配置
flutter:
  # 将MaterialDesign的图标和字体使用并打包
  uses-material-design: true

  # 可以通过下面的方式，定义Assets内的文件
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
 
  # 像下面这样定义字体文件。每组字体文件都需要一个Family 
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

import 'package:flutter/material.dart';
//定义一个Main方法。Main方法中用简单RunApp就可以执行我们定义的Widget
void main() => runApp(new MyApp());
/*
Flutter写成的都是UI主键。主要分 StatelessWidget 和 StageWidge
整体的入口可以写成 StatelessWidget
*/
class MyApp extends StatelessWidget {
  //这个Widget就是我们App的最基层的Widget了
  //传入BuildContext给我们使用。
  @override
  Widget build(BuildContext context) {
//这样就可以直接使用Flutter为我们封装好的MaterialApp这个主题的了.从源码可以看到这个是个StatefulWidget
    //[home], [routes], [onGenerateRoute], or [builder] 这个主题下的这些方法不能都为空！！
    return new MaterialApp(
      title: 'Flutter Demo',
      //定义主题
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

//statefulWidget ，因为Widget都是无状态的，所以如果需要有状态的话，`state`这个类来进行维持
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

//flutter中状态的持有类
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    //这点和小程序很类似。调用setState进行状态同步和刷新。如果不调用这个方法，只是改变值，界面不会发生变化
    setState(() {
      _counter++;
    });
  }

  //state中的`build`方法，会自动在`setState`方法后调用。
  @override
  Widget build(BuildContext context) {
  //Scaffold可以理解程相当于一个html 它的body就是主要的内容。
    //同时它其实是满足MD的。所以它还能提供对应的组件
    //比如 AppBar .Drawer floatingButton等等
    return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: new Text(widget.title),
      ),
      //这里可以初步的看到，如果想要布局居中显示，可以先包裹一层`Center`
      body: new Center(
       //因为是竖直的布局，所以再次包裹一层Column
        child: new Column(
          //使用这个属性，让居中竖直排列
          mainAxisAlignment: MainAxisAlignment.center,
         //children中传入其他组件
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}