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 SDK配置了環境變量。
• 使用安裝了Flutter和Dart插件的IDE。

$ flutter create <projectname>
複製代碼

關於建立Flutter項目的更多內容可學習《基於Flutter1.x開發攜程網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模擬器的名字，也能夠一臺已經鏈接到電腦上的Android或iOS的設備。

關於運行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?

在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！」。

如何建立可重用的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類的示例：

未完待續

• Flutter開發之Dart必備基礎知識
• Flutter入門基礎知識
• Flutter主題和文字處理
• Flutter什麼是聲明式UI
• Flutter佈局與列表
• Flutter手勢檢測及觸摸事件處理
• Flutter狀態管理
• Flutter線程和異步UI
• Flutter表單輸入與富文本
• Flutter認識視圖(Views)
• Flutter調用硬件、第三方服務以及平臺交互、通知
• Flutter路由與導航
• Flutter項目結構、資源、依賴和本地化

參考

Flutter從入門到進階實戰攜程網App