Flutter的初識

前言

一、Flutter是Google使用Dart語言開發的移動應用開發框架，使用一套Dart代碼就能構建高性能、高保真的iOS和Android應用程序，而且在排版、圖標、滾動、點擊等方面下降差別。 二、Flutter不是黑科技，應用程序的代碼老是以一種很是合理，能夠解釋的方式的運行着，只是須要去了解而已。Flutter可以在iOS和Android上運行起來，依靠的是一個叫Flutter Engine的虛擬機，Flutter Engine是Flutter應用程序的運行環境，開發人員能夠經過Flutter框架和API在內部進行交互 三、Flutter的優點（1）高效率 用一套代碼庫就能開發iOS和Android應用;使用新型的、表現力強的語言和聲明式的方法，用更少的代碼來作更多的事情;開發調試更容易方便 ,能夠在應用程序運行時更改代碼並從新加載查看效果，也就是熱從新加載 （2）建立美觀、高度定製的用戶體驗 ,Flutter框架內置了一組豐富的質感設計控件

內容

1、全世界的第一個簡單的輸出小李子：

import 'package:flutter/material.dart';
void main() {
  runApp(new Center(child: new Text('你好，靈機！', textDirection: TextDirection.ltr)));
}
複製代碼

2、基礎控件： <一>、簡單控件：

1. Text控件即容器，是一個經常使用的控件，下面的實例有7個不一樣樣式的文本控件

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('文本控件'),
      ),
      body: new Column(
        children: <Widget>[
          new Text(
            '紅色+黑色刪除線+25號',
            style: new TextStyle(
              color: const Color(0xffff0000),
              decoration: TextDecoration.lineThrough,
              decorationColor: const Color(0xff000000),
              fontSize: 25.0,
            ),
          ),
          new Text(
            '橙色+下劃線+24號',
            style: new TextStyle(
              color: const Color(0xffff9900),
              decoration: TextDecoration.underline,
              fontSize: 24.0,
            ),
          ),
          new Text(
            '虛線上劃線+23號+傾斜',
            style: new TextStyle(
              decoration: TextDecoration.overline,
              decorationStyle: TextDecorationStyle.dashed,
              fontSize: 23.0,
              fontStyle: FontStyle.italic,
            ),
          ),
          new Text(
            'serif字體+24號',
            style: new TextStyle(
              fontFamily: 'serif',
              fontSize: 26.0,
            ),
          ),
          new Text(
            'monospace字體+24號+加粗',
            style: new TextStyle(
              fontFamily: 'monospace',
              fontSize: 24.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          new Text(
            '天藍色+25號+2行跨度',
            style: new TextStyle(
              color: const Color(0xff4a86e8),
              fontSize: 25.0,
              height: 2.0,
            ),
          ),
          new Text(
            '24號+2個字母間隔',
            style: new TextStyle(
              fontSize: 24.0,
              letterSpacing: 2.0,
            ),
          ),
        ]
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new ContainerDemo(),
    ),
  );
}
複製代碼

2. Image控件即圖片控件，是顯示圖像的控件，Image控件有多種構造函數：

(1) new Image，用於從ImageProvider獲取圖像。 (2) new Image.asset，用於使用key從AssetBundle獲取圖像。 (3) new Image.network，用於從URL地址獲取圖像。 (4) new Image.file，用於從File獲取圖像。

下面是一個從URL地址獲取圖像的實例，並經過scale屬性設置縮放比例：

import 'package:flutter/material.dart';
class ImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('從URL地址獲取圖像'),
      ),
      body: new Center(
        child: new Image.network(
          'http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg',
          scale: 2.0,
        ),
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new ImageDemo(),
    ),
  );
}
複製代碼

下面是一個從本地文件目錄中獲取圖像的實例：

class ImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('從本地獲取圖像'),
      ),
      body: new Center(
        child: new Container(
          decoration: new BoxDecoration(
            backgroundImage: new BackgroundImage(
              image: new AssetImage('images/flutter.jpeg'),
            ),
          )
        )
      ),
    );
  }
}

void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new ImageDemo(),
    ),
  );
}
複製代碼

<二>內容佈局： 1.水平佈局 Row控件即水平佈局控件，可以將子控件水平排列

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('水平方向佈局'),
      ),
      body: new Row(
        children: <Widget>[
          new RaisedButton(
            onPressed: () {
              print('點擊紅色按鈕事件');
            },
            color: const Color(0xffcc0000),
            child: new Text('紅色按鈕'),
          ),
          new Flexible(
            flex: 1,
            child: new RaisedButton(
              onPressed: () {
                print('點擊黃色按鈕事件');
              },
              color: const Color(0xfff1c232),
              child: new Text('黃色按鈕'),
            ),
          ),
          new RaisedButton(
            onPressed: () {
              print('點擊粉色按鈕事件');
            },
            color: const Color(0xffea9999),
            child: new Text('粉色按鈕'),
          ),
        ]
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new LayoutDemo(),
    ),
  );
}
複製代碼

2.垂直佈局 Column控件即垂直佈局控件，可以將子控件垂直排列

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('垂直方向佈局'),
      ),
      body: new Column(
        children: <Widget>[
          new RaisedButton(
            onPressed: () {
              print('點擊紅色按鈕事件');
            },
            color: const Color(0xffcc0000),
            child: new Text('紅色按鈕'),
          ),
          new Flexible(
            flex: 1,
            child: new RaisedButton(
              onPressed: () {
                print('點擊黃色按鈕事件');
              },
              color: const Color(0xfff1c232),
              child: new Text('黃色按鈕'),
            ),
          ),
          new RaisedButton(
            onPressed: () {
              print('點擊粉色按鈕事件');
            },
            color: const Color(0xffea9999),
            child: new Text('粉色按鈕'),
          ),
        ]
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new LayoutDemo(),
    ),
  );
}
複製代碼

3.Stack即層疊佈局控件，可以將子控件層疊排列 Stack控件的每個子控件都是定位或不定位，定位的子控件是被Positioned控件包裹的。Stack控件自己包含全部不定位的子控件，其根據alignment定位（默認爲左上角）。而後根據定位的子控件的top、right、bottom和left屬性將它們放置在Stack控件上。

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('層疊定位佈局'),
      ),
      body:new Center(
        child: new Stack(
         children: <Widget>[
           new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),
           new Positioned(
             left: 35.0,
             right: 35.0,
             top: 45.0,
             child: new Text(
               'Whatever is worth doing is worth doing well. ๑•ิ.•ั๑',
               style: new TextStyle(
                 fontSize: 20.0,
                 fontFamily: 'serif',
               ),
             ),
           ),
         ]
       ),
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new LayoutDemo(),
    ),
  );
}
複製代碼

4.Container控件即容器，是一個經常使用的控件，基礎容器的實例

import 'package:flutter/material.dart';
class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Container(
        width: 128.0,
        height: 128.0,
        decoration: new BoxDecoration(
          color: Colors.lightBlueAccent[100],
        ),
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new ContainerDemo(),
    ),
  );
}
複製代碼