在本文中我們主要對(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)的示例:
未完待續(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)劲弦、資源售担、依賴和本地化