Flutter 從一個demo開始

Cyning4發表於2019-06-12
Flutter

原文：blog.cyning.cc/2019/05/12/…

Flutter已經出了穩定版，這對於很對開發者來說，終於可以長長吐一口氣了，我也來踩坑啦。

Flutter 從一個demo開始

什麼是Flutter

Flutter究竟是個啥，他對於開發者有什麼益處，學習它有什麼準備課程麼？ 針對這個問題，或許在開始寫程式碼前，你要思考下？

混合開發

曾經接觸過用webview和JSbridege的混合開發，也曾經在經歷過React Native,總體來說，混合開發的體驗不好，而RN對於之前的版本適配和複雜UI載入通訊總是讓人覺得比原生差太多，Flutter試了下，除了包大了點點，可以完美避免這寫問題，不過是騾子是馬，我們都要先溜一圈。

Flutter還支援了Web，感覺Google大哥有點膨脹啊，你這是要統治全端麼，不過說實話Dart這種語言最初也是給前端開發使用的。

dart

對於Flutter，我們需要了解dart的語法，不過不要死記硬背，沒啥意思，感覺會js或者java足夠了你能看懂，慢慢模仿就行了 我們這裡簡單介紹下dart吧，避免不必要的麻煩。

包引入

dart的一個個庫，也是用dart寫的，未來有一天你的庫也可以被更多人的使用。 只需要項引入java一樣或者類似react js的引入其他包：

import 'package:http/http.dart';
複製程式碼

變數

dart也是給一個強型別語言，定義變數可以不用寫明型別。

私有變數

對於私有變數，它不像java語言有privte這種access flag，所以要在命令上規範未下劃線開始。

String _firstName;
複製程式碼

私有方法

static _parsePirateNamesFromJSON(String jsonString) {
  Map pirateNames = JSON.decode(jsonString);
  names = pirateNames['names'];
  appellations = pirateNames['appellations'];
}
複製程式碼

型別轉換

void updateBadge(Event e) {
  String inputName = (e.target as InputElement).value;
}
複製程式碼

方法

有些方法可以直接使用表示式的值即為返回值的情況

String toString() => pirateName;
複製程式碼

和之前的寫法說再見吧：

String toString() {
  return pirateName;
}
複製程式碼

級聯操作符（..）

記得之前特別喜歡用鏈式的結構，現在你需要的來了，多個函式操作，用級聯操作符：

genButton..disabled = false
         ..text = 'Aye! Gimme a name!';
複製程式碼

這就相當於：

genButton.disabled = false;
genButton.text = 'Aye! Gimme a name!';
複製程式碼

變數可以加到字串中

這個在shell和python中不是什麼新鮮玩意,只需要加個$符號（見到美刀，就可以替換，也是給個錢迷啊）

String _firstName = "cyning"
print '$_firstName the $_appellation';

複製程式碼

引數

和其他解釋性語言一樣，支援引數可選

Getters and setters

getter 和setter 是 Dart 中特殊的函式，看起來像是變數。可以像下面這樣來重新定義 Spacecraft 類的 launchYear 屬性：

class Spacecraft {
  // ...
  DateTime launchDate;
  int get launchYear => launchDate?.year;
  // ...
}
複製程式碼

繼承

Dart 是單繼承的。

class Orbiter extends Spacecraft {
  num altitude;
  Orbiter(String name, DateTime launchDate, this.altitude)
      : super(name, launchDate);
}
複製程式碼

非同步操作

Dart 語言原生支援非同步操作，主要是用兩個關鍵詞 await 和 async。 在函式上加async,不需要像 java 那樣去 new Thread，在用到耗時的地方加上await。

// 發起網路請求
loadData() async{
    String requestURL = 'http://gank.io/api/today';
    Client client = Client();
    Response response = await client.get(requestURL);
    
    String jsonString = response.body;
    print(jsonString);
    
  }
複製程式碼

第一個demo

至於環境搭建，可以參考Flutter中文網來一步步搭建，我使用的編輯器是Vs code

新建

Flutter 從一個demo開始
需要耐心等待會兒，就會有個demo.

為了能驗證是否生效，來跑下，還是這圖上圖，使用starting debug執行，手機或者虛擬機器儘量連著開發機。

注意事項

同步庫時，需要將jcenter庫，替換為阿里的映象：

buildscript {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }


    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

allprojects {
    repositories {
    maven { url 'https://maven.aliyun.com/repository/google' }
    maven { url 'https://maven.aliyun.com/repository/jcenter' }
    maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }


    }
}
複製程式碼

專案結構

目前demo的目錄結構如下，其中android檔案下是一個正常的android程式。

| |____android
| |____ios
| |____lib
| | |____main.dart
| |___pubspec.yaml

lib下有個main.dart，這個就是我們需要操作的dart文佳。
pubspec.yaml是配置的相關。

hello world跑起來

可以修改lib/main.dart如下程式碼：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      // 主題
       theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

      // 首頁的頁面
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
      
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),

      
    );
  }
}
複製程式碼

p跑起來截圖：

Flutter 從一個demo開始

  1. main函式使用了(=>)符號, 這是Dart中單行函式或方法的簡寫

  2. Scaffold 是 Material library 中提供的一個widget, 它提供了預設的導航欄、標題和包含主螢幕widget樹的body屬性。widget樹可以很複雜。

  3. MyApp繼承自StatelessWidget， Statelesswidgets是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.

新增一個 有狀態的部件（Stateful widget）

我們需要替換MaterialApp下22行的child: new Text('Hello World')屬性為一個StatefulWidget。 而Stateful widgets 持有的狀態可能在widget生命週期中發生變化. 實現一個 stateful widget 至少需要兩個類:

一個StatefulWidget類。 一個 State類。 StatefulWidget類本身是不變的，但是State類`在widget生命週期中始終存在.

class MyHomePage extends StatefulWidget {
 
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Text("hello MyHomePage");
  }
}

複製程式碼

當然了也可以使用過動態設定_MyHomePageState為其他文字，如一個單詞，這就需要引入english_words庫。 在專案的根路徑下找到lpubspec.yaml,新增：

Flutter 從一個demo開始
同時在dart檔案的import處新增：

import 'package:english_words/english_words.dart';
複製程式碼

只需要在MyHomePage的build方法裡修改程式碼如下：

    final wordPair = new WordPair.random();

    return Text(wordPair.asPascalCase);
複製程式碼

這樣每次啟動都會觸發頁面重新整理，都會隨機出現一個單詞。

互動

我們還需要未這個新增一個互動，例如當我們點選時，就可以換一個單詞,將Text替換可以點選的RaisedButton:

final wordPair = new WordPair.random();
     return RaisedButton(
      child: Text(wordPair.asPascalCase),
      onPressed:  clickbtn,
    );
複製程式碼

Flutter 從一個demo開始

好了這程式碼基本是否讓我們對StatefulWidget的理解呢？

整體程式碼：github.com/ownwell/flu…

相關文章