Flutter快速起步

搭建环境

参照官网

flutter doctor #检查搭建的环境

项目初始化

flutter create hello_world #创建项目

flutter packages get #安装依赖

flutter run #启动项目

Flutter hello_world

1. 项目文件

—Android 安卓配置文件

—ios IOS配置文件

—build 打包生成目录

—lib 开发目录

—main.dart 入口文件

—pubspec.yaml 项目依赖配置

2. HelloWorld

• 项目入口文件 main.js
• 启动方法 void main()

void main(){} //定义入口方法

• 根函数 runApp()

void main(){
  runApp(
    //定义内容
  );
}

• 一切皆为widget(组件)
  • 在 Flutter 中，一切的显示都是 Widget 。Widget 是一切的基础
  • Widget 和 Widget 之间通过 child: 进行嵌套。
  • 你需要做的就是在 widget 中堆积你的布局
• UI库

  • Material 组件 就是 android 风格的组件

  • Cupertino 组件 就是 ios 风格的组件

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

3.常用组件

Text - 用于显示文字的组件
Image -用于显示图片的组件
Icon - 用于显示图标，有内置的 Material 和 Cupertino 风格的图标
Container - 类似 html 中的 div。可以很方便的添加 内外边距，对齐，背景，边角的特性。
Row, Column - 用于水平和垂直方向的多组件展示。使用 flex 布局。
Stack - 用于z轴方向的多组件展示。可以把一个组件堆叠到另外一个组件上面。类似 css 中的 Position。
Scaffold - 页面的基本组件, 提供了基本的页面结构。包括 顶部 title 及功能按钮，顶部tab，底部tab，导航按钮等。

4.无状态组件 vs 有状态组件

//无状态组件
class MyText extends StatelessWidget {
    // 组件的参数
    final String text;

    // 组件的构造函数
    MyText(this.text);

  //组件的实现部分
    Widget build(context) {
        return new Text(
            text,
            textStyle: new TextStyle(fontSize: 40.0),
        );
    }
}
///////////////////////////////////////////////////////////////////////
//有状态组件
class Counter extends StatefulWidget {
    // 组件的参数
    final String title;
  Counter({Key key, this.title}) : super(key: key);

   // 没有 build 方法，但有 createState() 方法。
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //状态
    int counter = 0;

    void increaseCount() {
        setState(() {
            this.counter++;
        }
    }

    //build 方法
    Widget build(context) {
        return new RaisedButton(
            onPressed: increaseCount,
            child: new Text('点击+1'),
        );
    }
}