Flutter 初探

Flutter是一款移動(dòng)應(yīng)用程序SDK，一份代碼可以同時(shí)生成iOS和Android兩個(gè)高性能、高保真的應(yīng)用程序，媲美原生應(yīng)用的性能，是Google新操作系統(tǒng)Fuchsia的默認(rèn)開發(fā)套件。

一、 配置環(huán)境

  1. Android Studio 下載插件Dart、Flutter
  2. 下載Flutter SDK，配置環(huán)境

二、 第一個(gè)Flutter項(xiàng)目

  1. File ->new->new Flutter Project
  2. 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',
      //Scaffold包含appBar、title、body相當(dāng)于一個(gè)activity
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        //內(nèi)容
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

運(yùn)行后時(shí)hello world

  1. 使用外部包(package)
    pubspec.yaml是flutter的配置文件，用于管理包和配置flutter信息（等同于build.gradle）。
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  //添加english_words依賴，指定版本號(hào)
  english_words: ^3.1.0

單擊右上角的 Packages get，這會(huì)將依賴包安裝到您的項(xiàng)目
下面就可以在main.dart中使用english_words了

import 'package:english_words/english_words.dart';
final wordPair = new WordPair.random();
// build時(shí)隨機(jī)生成單詞
child: new Text(wordPair.asPascalCase),

點(diǎn)擊熱重載按鍵更新正在運(yùn)行的應(yīng)用程序

二、Flutter的交互

1、添加有狀態(tài)的Widget
上面的StatelessWidget是不可變的, 它們的屬性值都是final的
對(duì)應(yīng)的Statefulwidgets則是可變的，它們的屬性值在widget生命周期中都是可以改變的。
實(shí)現(xiàn)一個(gè) stateful widget 至少需要兩個(gè)類:

  • 一個(gè) StatefulWidget類。
  • 一個(gè) State類。 StatefulWidget類本身是不變的，但是 State類在widget生命周期中始終存在.
class RandomWords extends StatefulWidget {
  //創(chuàng)建狀態(tài)
  @override
  createState() => new RandomWordsState();
}
//狀態(tài)類
class RandomWordsState extends State<RandomWords> {
}

2、創(chuàng)建一個(gè)無限滾動(dòng)ListView

class RandomWordsState extends State<RandomWords> {
  //變量以下劃線（_）開頭，在Dart語言中使用下劃線前綴標(biāo)識(shí)符，會(huì)強(qiáng)制其變成私有的
  final _suggestions = <WordPair>[];

  //集合存儲(chǔ)用戶喜歡（收藏）的單詞對(duì)
  final _saved = new Set<WordPair>();

  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),
        // 對(duì)于每個(gè)建議的單詞對(duì)都會(huì)調(diào)用一次itemBuilder，然后將單詞對(duì)添加到ListTile行中
        // 在偶數(shù)行，該函數(shù)會(huì)為單詞對(duì)添加一個(gè)ListTile row.
        // 在奇數(shù)行，該行書湖添加一個(gè)分割線widget，來分隔相鄰的詞對(duì)。
        // 注意，在小屏幕上，分割線看起來可能比較吃力。
        itemBuilder: (context, i) {
          // 在每一列之前，添加一個(gè)1像素高的分隔線widget
          if (i.isOdd) return new Divider();

          // 語法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i為：1, 2, 3, 4, 5
          // 時(shí)，結(jié)果為0, 1, 1, 2, 2， 這可以計(jì)算出ListView中減去分隔線后的實(shí)際單詞對(duì)數(shù)量
          final index = i ~/ 2;
          // 如果是建議列表中最后一個(gè)單詞對(duì)
          if (index >= _suggestions.length) {
            // ...接著再生成10個(gè)單詞對(duì)，然后添加到建議列表
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

  Widget _buildRow(WordPair pair) {
    //檢查確保單詞對(duì)還沒有添加到收藏夾
    final alreadySaved = _saved.contains(pair);

    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),

      //尾部添加icon
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),

      //添加交互，輕點(diǎn)監(jiān)聽
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },

    );
  }

3、創(chuàng)建可點(diǎn)擊的的List
（1）添加保持狀態(tài)集合

class RandomWordsState extends State<RandomWords> {
  //添加保持狀態(tài)集合
  final _saved = new Set<WordPair>();
  ...
}

（2）ListTile中的trailing設(shè)置尾部icon，onTap設(shè)置點(diǎn)擊事件監(jiān)聽

  Widget _buildRow(WordPair pair) {
    //檢查確保單詞對(duì)還沒有添加到收藏夾
    final alreadySaved = _saved.contains(pair);

    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),

      //后面添加icon
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),

      //添加交互，輕點(diǎn)監(jiān)聽
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },

    );
  }

通過上面的例子，我們懂得如何Widget去創(chuàng)建的我們的頁面，保持widget的狀態(tài)，并實(shí)現(xiàn)對(duì)應(yīng)交互，接下來我們學(xué)習(xí)如何在不同的頁面間跳轉(zhuǎn)

三、導(dǎo)航到新的頁面

1、Flutter中頁面叫做頁面路由，分為主路由和新路由
Navigator通過路由棧來管理各個(gè)路由頁面，Navigator push一個(gè)路由頁面時(shí)，App會(huì)顯示這個(gè)路由頁面，Navigator pop時(shí)，App將顯示上一個(gè)頁面。
下面代碼為push一個(gè)頁面的操作。

void _pushSaved() {
  Navigator.of(context).push(
    //創(chuàng)建一個(gè)新的頁面
    new MaterialPageRoute(
      //構(gòu)建頁面內(nèi)容
      builder: (context) {
        //創(chuàng)建list
        final tiles = _saved.map(
          (pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          },
        );

        final divided = ListTile
          .divideTiles(
            context: context,
            tiles: tiles,
          )
          .toList();
        // 創(chuàng)建頁面內(nèi)容：一個(gè)包含喜歡集合的listView
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('Saved Suggestions'),
          ),
          body: new ListView(children: divided),
        );
      },

    ),
  );
}

四、Flutter Widget概述

Flutter有兩種Widget

  • 基礎(chǔ) Widget ：Text 、Row、 Column等

  • Material Widget ，可幫助您構(gòu)建遵循Material Design的應(yīng)用程序

五、與React Native對(duì)比

1、React Native使用HTML+JavaScript渲染成原生控件

  • 優(yōu)點(diǎn)：可以完全繼承現(xiàn)代Web開發(fā)的所有成果

  • 缺點(diǎn)：將渲染工作交交給系統(tǒng)，雖然同樣使用類HTML+JS的UI構(gòu)建邏輯，但是最終會(huì)生成對(duì)應(yīng)的自定義原生控件，導(dǎo)致框架本身需要處理大量平臺(tái)相關(guān)的邏輯，隨著系統(tǒng)版本變化和API的變化，開發(fā)者可能也需要處理不同平臺(tái)的差異。

2、Flutter有什么優(yōu)勢(shì)？

  • 提高開發(fā)效率
    同一份代碼開發(fā)iOS和Android
    用更少的代碼做更多的事情
    輕松迭代
    ??在應(yīng)用程序運(yùn)行時(shí)更改代碼并重新加載（通過熱重載，不需要重啟APP，很快）
    ??修復(fù)崩潰并繼續(xù)從應(yīng)用程序停止的地方進(jìn)行調(diào)試

  • 創(chuàng)建美觀，高度定制的用戶體驗(yàn)
    受益于使用Flutter框架提供的豐富的Material Design和Cupertino（iOS風(fēng)格）的widget
    實(shí)現(xiàn)定制、美觀、品牌驅(qū)動(dòng)的設(shè)計(jì)，而不受原生控件的限制

Flutter則開辟了一種全新的思路，從頭到尾重寫一套跨平臺(tái)的UI框架，包括UI控件、渲染邏輯甚至開發(fā)語言。渲染引擎依靠跨平臺(tái)的Skia圖形庫來實(shí)現(xiàn)，依賴系統(tǒng)的只有圖形繪制相關(guān)的接口，可以在最大程度上保證不同平臺(tái)、不同設(shè)備的體驗(yàn)一致性，邏輯處理使用支持AOT的Dart語言，執(zhí)行效率也比JavaScript高得多。

六、Flutter學(xué)習(xí)資料

Flutter中文網(wǎng)站
https://flutterchina.club/get-started/install/
Flutter GitHub
https://github.com/flutter/flutter
Flutter examples
https://github.com/flutter/flutter/tree/master/examples

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文主要大致介紹Flutter 整體框架，簡單粗略的使用，深度暫且還沒有。用Dart，寫了個(gè)計(jì)算器的demo和列表...
    空而小sao閱讀 2,082評(píng)論 0贊 0
  • 最新消息 Flutter在12月5號(hào)發(fā)布了最新的穩(wěn)定版本1.0,象征著Flutter新技術(shù)提上了征程，期待著他能靠...
    納蘭寒明閱讀 1,808評(píng)論 0贊 1
  • 特別說明 當(dāng)前博客平臺(tái)賬號(hào)已廢棄，如果有使用細(xì)節(jié)問題請(qǐng)前往我新博客平臺(tái)進(jìn)行討論交流。 個(gè)人博客平臺(tái) HuRuWo的...
    善篤有余劫閱讀 5,103評(píng)論 0贊 30
  • 如果你還在猶豫為什么要學(xué)Flutter，下面2個(gè)圖的應(yīng)該足夠吸引你加入了吧，一套代碼多平臺(tái)使用 Flutter 是...
    jzhu085閱讀 6,984評(píng)論 7贊 62
  • 想想就好了，不要打擾，過一會(huì)兒就好了
    大獅子一聲喵閱讀 259評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容