Flutter學習筆記：基礎控件的使用

flutter是一款移動應用跨平臺框架，使用Dart語言編寫的一份代碼可以生成iOS和Android兩個高性能、高保真的應用程序。Flutter不借助原生的渲染能力，而是自己實現了一套與Android和iOS一樣的渲染原理，從而在性能上與原生平臺基本保持一致。目前Flutter支持了iOS、Android，Windows、linux、macOS、Web平臺的運行。

項目源碼:點擊下載

1、項目創建

開發flutter應用，我們通常使用的工具是Android Studio。創建一個flutter項目，可以通過Android Studio來創建，也可以通過命令行來創建。

1.通過Android Studio來創建

• 啓動Android Studio，找到Create New Flutter Project；
• 然後會來到一個讓選擇項目類型的頁面Flutter Application、Flutter Plugin、Flutter Package、Flutter Module；選擇Flutter Application；
• 輸入Project name、Flutter SDK path、Project location信息，點擊下一步，然後等待一小會即可創建成功。

注意事項：
1.Flutter Application-全新的App，包含標準的Dart與Native層；Flutter Module-混編到已有的Android/iOS工程內；Flutter Plugin-平臺插件，包含Dart與Native層的實現；Flutter Package-純Dart工程，僅有Dart層實現。
2.需要注意的是Project name只能只用小寫字母或者下劃線；

2.通過命令行創建

/*創建Flutter Application*/
flutter create  appname 
/*創建Flutter Module*/
flutter create -t module appname_module
/*創建Flutter Plugin*/
flutter create --template=plugin appname_plugin
/*創建Flutter Package*/
flutter create --template=package appname_package

在創建項目的過程中可以指定Android和iOS的平臺開發語言:-i objc或-i swift可指定iOS平臺是OC還是Swift;-a java或-a kotlin可指定Android是Java還是Kotlin。更多選項可以通過flutter create --help來查看。

創建好的項目，包括android,ios,lib等目錄，main函數和我們開發寫的Dart代碼都在lib目錄中。

2、基礎語法

flutter項目使用的dart語言，其基礎語法與Swift和Kotlin非常接近。
接下來我們簡單列舉一個例子，定義一個Worker類

class Worker {
  //定義靜態變量：格式：類型 變量名 = 初始值
  //在外部通過 = Worker.key; Worker.key = "22"進行讀寫 （類似於swift的 static var key = "worker"）
  //在內不通過 = key;key = ""進行讀寫
  //static String _i = "111";如果帶下劃線將不能被外部訪問
  static String key = 'Worker';

  //定義成員變量：格式：類型 變量名 = 初始值
  //如果成員變量不給初始值，那麼需要指定該成員變量是空安全（null-safety,跟swift的可選類型類似）
  //如果成員邊量帶下劃線，表示該成員變量盡在該文件內可以訪問。（跟swift的fileprivate類似）
  //const不可變的常量，：在編譯期確定變量測值，不可用運行態的內容來賦值，如時間戳/隨機數；賦值後不可修改
  //final最終不可變的常量：賦值一次後不可以改變，可以賦值爲時間戳和隨機數等。
  String name = '';
  String _nickname = '';
  int? height;////未初始化的變量指向null
  int? age;//未初始化的變量指向null

  //構造函數
  //同名的參數（可以簡寫成如下方式，私有成員變量不可以）
  Worker(this.name,this.height, String _nickname){
    this._nickname = _nickname;
  }

  //函數:返回值 函數名 (參數列表)
  //帶前置下劃線的函數不能被外部訪問，與帶下劃線的的成員變量相同
  int printAll() {
    print(
        'printAll:key=$key, name=$name, _nickname=$_nickname, height=$height, age=$age');
    return 8;
  }

  int _printAll(){
    print('_printAll:key=$key, name=$name, _nickname=$_nickname, height=$height, age=$age');
    return 9;
  }
}

調用部分如下：

void main() {
  Worker.key = "222";
  print(Worker.key);
  Worker worker = Worker("name", 19, "nickname");
  worker.printAll();
}

3.基礎結構

flutter項目從main啓動後，調用runApp()，即可將UI載入：

void main() {
  runApp(TextWidget());
}

//在widget中我們重載Widget build(BuildContext context)函數，返回創建的widget
class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(44),
      color: Colors.yellow,
      child: Text(
          "Hello Flutter",
          textAlign:TextAlign.center,/*文本居中顯示*/
          textDirection:TextDirection.ltr,/*文字閱讀順序*/
          style: TextStyle(
          color: Colors.red,/*文字顏色*/
          fontSize: 40/*文字大小*/
        )
      )
    );
  }
}

flutter中MaterialApp代表Material Design風格的應用，內部包含該風格應用所需要的基本控件, 其home屬性應用的根節點。Scaffold名爲腳手架，爲應用提供了導航欄、Tab等:

• appBar:導航欄NavigationBar位居頁面最頂部
• bottomNavigationBar：標籤欄Tabbar，位居頁面最底部
• body:除appBar/bottomNavigationBar以外的屏幕中間區域
  接下來，我們把這些基礎組建給弄出來看看:

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner:false,
        home: Scaffold(
            appBar: AppBar(
                title: Text('Explorer App')
            ),
            body: TextWidget()
        )
    );
  }
}

這樣我們後面做基礎組建的學習只需要修改Scaffold.body即可。

4.佈局控件

在原生開發中我們常用frame、AutoLayout佈局，在h5項目中我們常用flex佈局。在flutter開發中，Dart爲我們提供了類似flex佈局Row，Column， Stack等。

4.1 Row、Column表示一組平面上排列的元素

其中Row主軸mainAxisAlignment是從屏幕左側到右側，交叉軸從屏幕頂部到下方；Column主軸crossAxisAlignment從屏幕的上方到下方，交叉軸是從屏幕的左側到右側。

• mainAxisAlignment變量-主軸

start-元素居左/居上顯示，元素之間間距爲0，多餘的空間居右/下；
center-元素居中顯示，元素間艱鉅爲0，多餘的空間一分爲二居左右/上下；
end-元素居右/下顯示，元素之間間距爲0，多餘的空間居左/上；
spaceBetween-元素分開顯示，多餘的空間分配到元素與元素之間；
spaceAround-整體空間按照元素的個數均分，多餘的空間顯示在元素的左右/上下兩側；
spaceEvenly-將多餘的空間均分於左+元素之間+右/上+元素之間+下；

• CrossAxisAlignment變量-交叉軸：

start:元素居上/左顯示；
center:元素居上下居中/左右居中；
end:元素居下/右顯示
stretch：元素拉伸
baseline：用於Text基線對齊

Row佈局的主軸爲x+方向，交叉軸爲y+方向；Column的主軸爲y+方向，交叉軸爲x+方向。搞清楚這兩個最常用的佈局，開發中如魚得水。

4.2.Stack一組垂直於屏幕排列的元素，

整組處於父容器中的位置通過alignment來確定，alignment接受一個AlignmentDirectional類型的對象，該對象兩個屬性start，y分別表示處在x軸，y軸上的位置。內部定義父視圖x軸方向起點爲-1，中點爲0，右側爲1，父視圖y軸方向起點爲-1，中點爲0，右側爲1。該類也有一些常用的位置定義,比如

/// The center point, both horizontally and vertically.
  ///
  /// Consider using [Alignment.center] instead, as it does not need to
  /// be [resolve]d to be used.
  static const AlignmentDirectional center = AlignmentDirectional(0.0, 0.0);

該佈局用起來相對簡單: