3-4【文檔講解】Flutter入門基礎知識
聲明：Flutter專欄文檔均來自慕課網(wǎng)
https://coding.imooc.com/class/321.html
Flutter入門基礎知識
- 如何創(chuàng)建Flutter 項目?
- 如何運行Flutter 項目?
- 如何導入Widget?
- 如何寫一個Hello world?
- 如何使用Widget并將其嵌套以形成Widget樹?
- 如何創(chuàng)建可重用Widget?
在本節(jié)中我們主要對標React Native來講解Flutter的一些入門基礎知識赊舶，Android挖炬、iOS或web開發(fā)者可以省略React Native部分，直接學習Flutter部分。
如何創(chuàng)建Flutter項目?
以React Native為例揉阎，要創(chuàng)建一個React Native 項目，我們可以通過create-react-native-app腳手架來完成：
$ create-react-native-app <projectname>
要創(chuàng)建一個Flutter 項目有以下兩種方式：
- 從命令行使用
flutter create命令谤民。確保Flutter SDK配置了環(huán)境變量慎框。 - 使用安裝了Flutter和Dart插件的IDE。
$ flutter create <projectname>
關于創(chuàng)建Flutter項目的更多內(nèi)容可學習《基于Flutter1.x開發(fā)攜程網(wǎng)App》徒像。
如何運行Flutter 項目?
在React Native中黍特，我們可以通過一下命令來運行項目：
$ react-native run-ios
//或
$ react-native run-android
那么在Flutter中，我們通過一下兩種方式來運行項目：
- 從項目的根目錄使用
flutter run锯蛀。 - 在帶有Flutter和Dart插件的IDE中使用“run”選項灭衷。
``$ flutter run -d 'iPhone X'`
-d后面跟的是具體的設備名稱，可以是Android或iOS模擬器的名字旁涤，也可以一臺已經(jīng)連接到電腦上的Android或iOS的設備翔曲。
關于運行Flutter項目的更多內(nèi)容可學習《基于Flutter1.x開發(fā)攜程網(wǎng)App》。
如何導入Widget?
在React Native中劈愚，您需要導入每個必需的組件：
//React Native
import React from "react";
import { StyleSheet, Text, View } from "react-native";//導入系統(tǒng)組件
import NavigationBar from '../common/NavigationBar';//導入自己的組件
在Flutter中瞳遍，要使用Material Design庫中的小部件，則需要導入material.dart包菌羽。要使用iOS樣式widget掠械，請導入Cupertino庫。要使用更基本的窗口widget集，請導widget 庫份蝴±绻Γ或者，當然婚夫，也可以導入自己編寫的widget：
import 'package:flutter/material.dart';//導入系統(tǒng)material widget 庫
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/my_widgets.dart';//導入自己的widget
無論您導入哪個widget包浸卦，Dart都只會導入在您的應用中使用的widget。
想知道Flutter都有哪些Widget可以學習《認識Flutter Widget》案糙。
如何寫一個Hello world?
在React Native中限嫌，我們通過如下代碼來實現(xiàn)這個需求：
// 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)建一個完全相同的“Hello world时捌！”應用程序使用核心窗口小部件庫中的Center和Text窗口小部件怒医。Center窗口小部件成為窗口小部件樹的根，并且有一個子窗口奢讨，即“Text”窗口小部件:
// Flutter
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
得益于Flutter強大的封裝能力稚叹，我們不難發(fā)現(xiàn)實現(xiàn)相同的功能，F(xiàn)lutter要比RN少很多代碼拿诸。
如何使用Widget并將其嵌套以形成Widget樹?
在Flutter中扒袖，幾乎所有東西都是widget。
widget是用戶界面的基本構建塊亩码，您將widget組成一個層次結構季率，調(diào)用widget樹。每個窗口widget都嵌套在父窗口widget中描沟，并從其父窗口繼承屬性飒泻。甚至應用程序?qū)ο蟊旧硪彩且粋€組件，沒有單獨的“應用程序”對象吏廉。相反泞遗，根widget擔任此角色。
Widget可以定義:
- 結構元素 - 如按鈕或菜單
- 文體元素 - 像字體或顏色主題
- 類似布局的填充或?qū)R的一個方向
以下示例使用Material庫中的Widget顯示“Hello world席覆！”應用程序刹孔。在此示例中，widget樹嵌套在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小部件構建的“Hello world！”卦睹。
如何創(chuàng)建可重用的Widget?
在React Native中畦戒，我們可以定義一個類來創(chuàng)建可重用的組件，然后使用props方法來設置或返回所選元素的屬性和值结序，在下面的示例中障斋，定義了CustomCard類，然后在父類中使用：
// 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中，同樣需要定義一個類來創(chuàng)建自定義widget垃环，然后重用widget邀层。您還可以定義和調(diào)用返回可重用小部件的函數(shù)，如以下示例中的構建函數(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類的構造函數(shù)使用Dart的大括號語法{}來配置 可選參數(shù)寥院。
如果要標識必須的字段，請從構造函數(shù)中刪除花括號涛目，或者 將@ required添加到構造函數(shù)中秸谢。
以下屏幕截圖顯示了可重用的CustomCard類的示例：
