Flutter入門必備基礎知識

Flutter · 發表 2019-03-19 07:01:10

摘要： Flutter入門基礎知識在本文中我們主要對標React Native來講解Flutter的一些入門基礎知識，Android、iOS或web開發者可以省略React Native部分，直接學習Flutter部分。如何建立Flutter專...

Flutter入門基礎知識

在本文中我們主要對標React Native來講解Flutter的一些入門基礎知識，Android、iOS或web開發者可以省略React Native部分，直接學習Flutter部分。

如何建立Flutter專案?

以React Native為例，要建立一個React Native 專案，我們可以通過 create-react-native-app 腳手架來完成：

$ create-react-native-app <projectname>

要建立一個Flutter 專案有以下兩種方式：

flutter create

$ flutter create <projectname>

create-flutter-project

關於建立Flutter專案的更多內容可學習《基於Flutter1.x開發攜程網App》。

如何執行Flutter 專案?

在React Native中，我們可以通過一下命令來執行專案：

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

那麼在Flutter中，我們通過一下兩種方式來執行專案：

flutter run

$ flutter run -d 'iPhone X'

-d 後面跟的是具體的裝置名稱，可以是Android或iOS模擬器的名字，也可以一臺已經連線到電腦上的Android或iOS的裝置。

flutter-run

關於執行Flutter專案的更多內容可學習《基於Flutter1.x開發攜程網App》。

如何匯入Widget?

在React Native中，您需要匯入每個必需的元件：

//React Native
import React from "react";
import { StyleSheet, Text, View } from "react-native";//匯入系統元件
import NavigationBar from '../common/NavigationBar';//匯入自己的元件

在Flutter中，要使用 Material Design 庫中的小部件，則需要匯入 material.dart 包。要使用iOS樣式widget，請匯入 Cupertino 庫。要使用更基本的視窗widget集，請導widget 庫。或者，當然，也可以匯入自己編寫的widget：

import 'package:flutter/material.dart';//匯入系統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?

hello-world

在React Native中，我們通過如下程式碼來實現這個需求：

// 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中，您可以建立一個完全相同的“Hello world！”應用程式使用核心視窗小部件庫中的Center和Text視窗小部件。Center視窗小部件成為視窗小部件樹的根，並且有一個子視窗，即“Text”視窗小部件:

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

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

得益於Flutter強大的封裝能力，我們不難發現實現相同的功能，Flutter要比RN少很多程式碼。

如何使用Widget並將其巢狀以形成Widget樹?

在Flutter中，幾乎所有東西都是widget。

widget是使用者介面的基本構建塊，您將widget組成一個層次結構，呼叫widget樹。每個視窗widget都巢狀在父視窗widget中，並從其父視窗繼承屬性。甚至應用程式物件本身也是一個元件，沒有單獨的“應用程式”物件。相反，根widget擔任此角色。

Widget可以定義:

結構元素 - 如按鈕或選單
文體元素 - 像字型或顏色主題
類似佈局的填充或對齊的一個方向

以下示例使用 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！”。

hello-world

如何建立可重用的Widget?

在React Native中，我們可以定義一個類來建立可重用的元件，然後使用 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中，同樣需要定義一個類來建立自定義widget，然後重用widget。您還可以定義和呼叫返回可重用小部件的函式，如以下示例中的構建函式所示。

// 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 類的建構函式使用Dart的大括號語法 {} 來配置可選引數。

如果要標識必須的欄位，請從建構函式中刪除花括號，或者將@ required新增到建構函式中。

以下螢幕截圖顯示了可重用的 CustomCard 類的示例：