Flutter02-2020 Flutter 應用介紹

參考文檔鏈接：https://book.flutterchina.club/chapter2/first_flutter_app.html
參考視頻鏈接：https://www.bilibili.com/video/BV1x4411j7bW?p=4

• 項目文件結構
• Flutter入口文件和入口方法
• 使用MaterialApp 和Scaffold兩個組件裝飾App

一、項目文件結構

┬
└ projectname
  ┬
  ├ * android      - Android部分的工程文件 （Android平臺相關代碼）
  ├ * build        - 項目的構建輸出目錄(運行項目的時候，生成的編譯目錄)
  ├ * ios          - iOS部分的工程文件（iOS平臺相關代碼）
  ├ * lib          - 項目中的Dart源文件（flutter相關代碼，我們主要編寫的代碼，就在這個文件夾）
    ┬
    └ * main.dart  - 自動生成的項目入口文件，類似RN的index.js文件
  ├ test         - 測試相關文件（用於存放測試代碼）
  └*  pubspec.yaml - 項目依賴配置文件類似於RN的 package.json （項目的配置文件：項目的名稱，描述，項目所需要的各種第三方庫依賴）
如：在這個文件的dependencies裏面配置第三方庫
之後編譯他會執行flutter packages get 操作，把遠程的庫下載到本地，之後就可以引入了

二、Flutter入口文件和入口方法

每一個flutter 項目的lib目錄裏面都有一個main.dart這個文件，就是flutter 的入口文件

接下來我們來做個練習

此行代碼作用是導入了Material UI組件庫。Material是一種標準的移動端和web端的視覺設計語言，Flutter默認提供了一套豐富的Material風格的UI組件。

import 'package:flutter/material.dart';

• runApp裏面調用組件，所有的組件都是類。
  如中心點組件Center,實例化Center組件，裏面的參數有child可以給他傳入內容.(command + 左鍵，點擊Center，可以查看這個類相關信息)

• child裏面放一個文本，文本又是一個組件Text
  Text裏面可以傳入data 數據文本，還可以傳入{裏面的可選參數}

• TextDirection.ltr, 文本的顯示方式是從左像右

void main(){
  runApp(new Center(
    child: new Text(
      "你好Flutter",
      textDirection: TextDirection.ltr,
    )
  ));
}

new可以省略簡寫

void main(){
  runApp(Center(
    child: Text(
      "你好Flutter",
      textDirection: TextDirection.ltr,
    )
  ));
}

• 通過調用內置的組件，就是類，我們完成了一個最簡單的一個Flutter項目

優化

• 雖然我們實現了功能，但是把所有的組件放到runApp裏面是不合理的，一個組件可能會非常大，包含很多功能。接下來我們把Center組件單獨抽類成一個單獨的組件 - 自定義組件

自定義組件

1. StatelessWidget 無狀態組件，狀態不可變的widget,StatelessWidget 是一個抽象類，裏面有build的抽象方法

2. MyApp繼承了StatelessWidget這個抽象類，需要實現裏面的抽象方法

• 鼠標放到MyApp上，點擊修復，就會自動生成buil方法，該方法返回widget這個部件/組件
• 在flutter裏面所有的東西都是組件，Center,Text也是一個widget

3.接下來我們把Center組件抽類出來,放到build裏面

• 自定義組件MyApp裏面返回了Center這樣能一個組件，這個時候就可以將MyApp傳入到runApp裏面
• 所有和數字相關的都是double類型,默認是px,所以傳入的值，都的小數

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(
        "你好Flutter 777",
        textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 20.0,
//            color: Colors.yellow,
            color: Color.fromRGBO(244, 233, 121, 0.5)
          ),
    )
    );

  }

}


void main(){
  runApp(MyApp());
//  MyApp()實例化MyApp,重新編譯
}

三、使用MaterialApp 和Scaffold兩個組件裝飾App

• 通過他們給App加導航和背景

• MaterialApp是一個方便的Widget，它封裝了應用程序實現Material Design 所需要的一些Widget.一般作爲根組件使用.

• MaterialApp裏面有屬性home屬性
  

• home裏面我們繼續傳入Scaffold組件，裏面纔可以定義appBar 導航欄,和body
  

改造代碼

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

   return MaterialApp(
     home:Scaffold(
       appBar: AppBar(
         title: Text('Flutter Demo')
       ),
       body: HomeContent(),
     )
   );

  }

}

//定義另外的一個組件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return Center(
        child: Text(
          "你好Flutter 777",
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 40.0,
            color: Colors.yellow,
//              color: Color.fromRGBO(244, 233, 121, 0.5)
          ),
        )
    );
  }
}

效果：

//theme屬性 可以配置應用的顏色主題,把導航欄的背景顏色，改爲黃色

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

   return MaterialApp(
     home:Scaffold(
       appBar: AppBar(
         title: Text('Flutter Demo')
       ),
       body: HomeContent(),
     ),
     theme: ThemeData(
       primarySwatch: Colors.yellow
     ),
   );

  }

}

效果：