Flutter入門(mén)必備基礎(chǔ)知識(shí)

在本文中我們主要對(duì)標(biāo)React Native來(lái)講解Flutter的一些入門(mén)基礎(chǔ)知識(shí)团赏,Android、iOS或web開(kāi)發(fā)者可以省略React Native部分游岳,直接學(xué)習(xí)Flutter部分杠娱。

如何創(chuàng)建Flutter項(xiàng)目?

以React Native為例乏奥,要?jiǎng)?chuàng)建一個(gè)React Native 項(xiàng)目谅畅,我們可以通過(guò)create-react-native-app腳手架來(lái)完成:

$ create-react-native-app <projectname>

要?jiǎng)?chuàng)建一個(gè)Flutter 項(xiàng)目有以下兩種方式:

  • 從命令行使用flutter create命令登渣。確保Flutter SDK配置了環(huán)境變量。
  • 使用安裝了Flutter和Dart插件的IDE毡泻。
$ flutter create <projectname>

關(guān)于創(chuàng)建Flutter項(xiàng)目的更多內(nèi)容可學(xué)習(xí)《基于Flutter1.x開(kāi)發(fā)攜程網(wǎng)App》胜茧。

如何運(yùn)行Flutter 項(xiàng)目?

在React Native中,我們可以通過(guò)一下命令來(lái)運(yùn)行項(xiàng)目:

$ react-native run-ios
//或
$ react-native run-android

那么在Flutter中仇味,我們通過(guò)一下兩種方式來(lái)運(yùn)行項(xiàng)目:

  • 從項(xiàng)目的根目錄使用flutter run呻顽。
  • 在帶有Flutter和Dart插件的IDE中使用“run”選項(xiàng)雹顺。
$ flutter run -d 'iPhone X'

-d后面跟的是具體的設(shè)備名稱(chēng),可以是Android或iOS模擬器的名字芬位,也可以一臺(tái)已經(jīng)連接到電腦上的Android或iOS的設(shè)備无拗。

關(guān)于運(yùn)行Flutter項(xiàng)目的更多內(nèi)容可學(xué)習(xí)《基于Flutter1.x開(kāi)發(fā)攜程網(wǎng)App》

如何導(dǎo)入Widget?

在React Native中昧碉,您需要導(dǎo)入每個(gè)必需的組件:

//React Native
import React from "react";
import { StyleSheet, Text, View } from "react-native";//導(dǎo)入系統(tǒng)組件
import NavigationBar from '../common/NavigationBar';//導(dǎo)入自己的組件

在Flutter中,要使用Material Design庫(kù)中的小部件揽惹,則需要導(dǎo)入material.dart包被饿。要使用iOS樣式widget,請(qǐng)導(dǎo)入Cupertino庫(kù)搪搏。要使用更基本的窗口widget集狭握,請(qǐng)導(dǎo)widget 庫(kù)》枘纾或者论颅,當(dāng)然,也可以導(dǎo)入自己編寫(xiě)的widget:

import 'package:flutter/material.dart';//導(dǎo)入系統(tǒng)material widget 庫(kù)
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/my_widgets.dart';//導(dǎo)入自己的widget

無(wú)論您導(dǎo)入哪個(gè)widget包囱嫩,Dart都只會(huì)導(dǎo)入在您的應(yīng)用中使用的widget恃疯。

想知道Flutter都有哪些Widget可以學(xué)習(xí)《認(rèn)識(shí)Flutter Widget》

如何寫(xiě)一個(gè)Hello world?

在React Native中墨闲,我們通過(guò)如下代碼來(lái)實(shí)現(xiàn)這個(gè)需求:

// React Native
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

在Flutter中今妄,您可以創(chuàng)建一個(gè)完全相同的“Hello world!”應(yīng)用程序使用核心窗口小部件庫(kù)中的Center和Text窗口小部件鸳碧。Center窗口小部件成為窗口小部件樹(shù)的根盾鳞,并且有一個(gè)子窗口,即“Text”窗口小部件:

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

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

得益于Flutter強(qiáng)大的封裝能力瞻离,我們不難發(fā)現(xiàn)實(shí)現(xiàn)相同的功能腾仅,F(xiàn)lutter要比RN少很多代碼。

如何使用Widget并將其嵌套以形成Widget樹(shù)?

在Flutter中套利,幾乎所有東西都是widget推励。

widget是用戶界面的基本構(gòu)建塊,您將widget組成一個(gè)層次結(jié)構(gòu)日裙,調(diào)用widget樹(shù)吹艇。每個(gè)窗口widget都嵌套在父窗口widget中,并從其父窗口繼承屬性昂拂。甚至應(yīng)用程序?qū)ο蟊旧硪彩且粋€(gè)組件受神,沒(méi)有單獨(dú)的“應(yīng)用程序”對(duì)象。相反格侯,根widget擔(dān)任此角色鼻听。

Widget可以定義:

  • 結(jié)構(gòu)元素 - 如按鈕或菜單
  • 文體元素 - 像字體或顏色主題
  • 類(lèi)似布局的填充或?qū)R的一個(gè)方向

以下示例使用Material庫(kù)中的Widget顯示“Hello world财著!”應(yīng)用程序。在此示例中撑碴,widget樹(shù)嵌套在MaterialApp的根widget中撑教。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello world'),
        ),
      ),
    );
  }
}

以下圖片顯示了使用Material Design小部件構(gòu)建的“Hello world!”醉拓。

如何創(chuàng)建可重用的Widget?

在React Native中伟姐,我們可以定義一個(gè)類(lèi)來(lái)創(chuàng)建可重用的組件,然后使用props方法來(lái)設(shè)置或返回所選元素的屬性和值亿卤,在下面的示例中愤兵,定義了CustomCard類(lèi),然后在父類(lèi)中使用:

// React Native
class CustomCard extends React.Component {
  render() {
    return (
      <View>
        <Text > Card {this.props.index} </Text>
        <Button
          title="Press"
          onPress={() => this.props.onPress(this.props.index)}
        />
      </View>
    );
  }
}

// Usage
<CustomCard onPress={this.onPress} index={item.key} />

在Flutter中排吴,同樣需要定義一個(gè)類(lèi)來(lái)創(chuàng)建自定義widget秆乳,然后重用widget。您還可以定義和調(diào)用返回可重用小部件的函數(shù)钻哩,如以下示例中的構(gòu)建函數(shù)所示屹堰。

// Flutter
class CustomCard extends StatelessWidget {
  CustomCard({@required this.index, @required 
     this.onPress});

  final index;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          Text('Card $index'),
          FlatButton(
            child: const Text('Press'),
            onPressed: this.onPress,
          ),
        ],
      )
    );
  }
}
    ...
// Usage
CustomCard(
  index: index,
  onPress: () { 
    print('Card $index');
  },
)
    ...

在前面的例子中, CustomCard類(lèi)的構(gòu)造函數(shù)使用Dart的大括號(hào)語(yǔ)法{}來(lái)配置 可選參數(shù)

如果要標(biāo)識(shí)必須的字段街氢,請(qǐng)從構(gòu)造函數(shù)中刪除花括號(hào)扯键,或者 將@ required添加到構(gòu)造函數(shù)中。

以下屏幕截圖顯示了可重用的CustomCard類(lèi)的示例:

reusable-components

未完待續(xù)

  • Flutter入門(mén)基礎(chǔ)知識(shí)
  • Flutter主題和文字處理
  • Flutter什么是聲明式UI
  • Flutter布局與列表
  • Flutter手勢(shì)檢測(cè)及觸摸事件處理
  • Flutter狀態(tài)管理d
  • Flutter線程和異步UI
  • Flutter表單輸入與富文本
  • Flutter認(rèn)識(shí)視圖(Views)md
  • Flutter調(diào)用硬件阳仔、第三方服務(wù)以及平臺(tái)交互忧陪、通知
  • Flutter路由與導(dǎo)航
  • Flutter項(xiàng)目結(jié)構(gòu)劲弦、資源售担、依賴和本地化

參考

Flutter從入門(mén)到進(jìn)階實(shí)戰(zhàn)攜程網(wǎng)App

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市伏社,隨后出現(xiàn)的幾起案子评矩,更是在濱河造成了極大的恐慌叶堆,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件斥杜,死亡現(xiàn)場(chǎng)離奇詭異虱颗,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)蔗喂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)忘渔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人缰儿,你說(shuō)我怎么就攤上這事畦粮。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵宣赔,是天一觀的道長(zhǎng)预麸。 經(jīng)常有香客問(wèn)我,道長(zhǎng)儒将,這世上最難降的妖魔是什么吏祸? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮钩蚊,結(jié)果婚禮上贡翘,老公的妹妹穿的比我還像新娘。我一直安慰自己两疚,他們只是感情好床估,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著诱渤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪谈况。 梳的紋絲不亂的頭發(fā)上勺美,一...
    開(kāi)封第一講書(shū)人閱讀 51,125評(píng)論 1 297
  • 那天,我揣著相機(jī)與錄音碑韵,去河邊找鬼赡茸。 笑死,一個(gè)胖子當(dāng)著我的面吹牛祝闻,可吹牛的內(nèi)容都是我干的占卧。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼联喘,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼华蜒!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起豁遭,我...
    開(kāi)封第一講書(shū)人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤叭喜,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后蓖谢,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體捂蕴,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年闪幽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了啥辨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡盯腌,死狀恐怖溉知,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤着倾,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布拾酝,位于F島的核電站,受9級(jí)特大地震影響卡者,放射性物質(zhì)發(fā)生泄漏蒿囤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一崇决、第九天 我趴在偏房一處隱蔽的房頂上張望材诽。 院中可真熱鬧,春花似錦恒傻、人聲如沸脸侥。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)睁枕。三九已至,卻和暖如春沸手,著一層夾襖步出監(jiān)牢的瞬間外遇,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工契吉, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留跳仿,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓捐晶,卻偏偏與公主長(zhǎng)得像菲语,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子惑灵,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容