Flutter 高效自學筆記（二）

時間 2019-11-08

標籤 flutter 高效自學筆記简体版

原文原文鏈接

Flutter 高效自學筆記（一）網絡

這是上篇文章文末提到的「第三個教程」的快速自學筆記。app

Widget 部件

讀音 /'wɪdʒɪt/ 危機特，文檔說借鑑了 React。我認爲 Widget 至關於 React 裏的組件 Component。less

下文將 Widget 所有稱爲「部件」。ide

部件的特色函數

基於你傳給它配置和 state 生成視圖
當一個部件的 state 變化了，部件就會更新視圖
Flutter 會對比新舊視圖的區別，對實際視圖作最小化的變更

runApp

這是 Flutter 應用必須調用的 API，接受一個部件。我的認爲這很像是 React 的 ReactDOM.render 操做。佈局

import 'package:flutter/material.dart';

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

以上代碼的做用：post

Center 是個類，Center() 就是實例化出一個實例
1. 我很是欣賞刪掉 new 的作法，不再會有人問 Center() 和 new Center() 的區別了，fuck JS。
Center(...) 返回一個部件，做爲根部件
Center(...) 部件的子部件是 Text(...)，若是隻有一個子組件就用 child，若是有多個子組件就用 children
Flutter 會強行讓根部件佔滿屏幕（好評），因此最終效果就是屏幕中央有個 Hello, world! 字符串
代碼中須要用 textDirection 指明文字方向，你用 MaterialApp 就能夠省掉這一步，後面會講
全部的部件類要麼是 StatelessWidget 的子類，要麼是 StatefulWidget 的子類
一個部件的主要功能是提供 build 方法（我的認爲相似於 React 的 render），build 方法能夠調用更多其餘部件
Flutter 會遍歷這些子部件，而後計算出當前部件的結構

基礎部件

經常使用的部件有：flex

Text：顧名思義
Row 和 Column：佈局用的，相似於 CSS 的 flex 佈局
Stack：佈局用的，相似於 CSS 的絕對佈局
Container：通用佈局，相似於 div

MaterialApp

若是你想用一些 Material 風格的部件，只須要作這幾件事就能夠：動畫

在 pubspec.yml 裏添加以下代碼ui

flutter:
     uses-material-design: true
複製代碼

runApp 的時候使用 MaterialApp，並使用 Material 部件

runApp(MaterialApp(
     title: 'My app', // used by the OS task switcher
     home: Material(),
 ));
複製代碼

import 'package:flutter/material.dart';

經常使用的 Material 部件

Navigator：相似於 ReactRouter

AppBar：頂部的 bar

AppBar(
     leading: IconButton(
         icon: Icon(Icons.menu),
         tooltip: 'Navigation menu',
         onPressed: null,
     ),
     title: Text('Example title'),
     actions: <Widget>[
         IconButton(
         icon: Icon(Icons.search),
         tooltip: 'Search',
         onPressed: null,
         ),
     ],
 )
複製代碼

Scaffold: 最經常使用的佈局部件

Scaffold(
   appBar: AppBar(...),
   body: Center(...),
   floatingActionButton: ...
 );
複製代碼

這些傳參方式很像 Vue 的命名插槽。

用 GestureDetector 處理用戶交互

這是一個自定義 button 部件：

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(               // <-- 注意看這裏
      onTap: () {
        print('MyButton was tapped!');
      },
      child: Container(
        height: 36.0,
        padding: ...,
        margin: ...,
        decoration: ...,
        child: Center(
          child: Text('Engage'),
        ),
      ),
    );
  }
}
複製代碼

GestureDetector 部件並無任何表現層，只處理用戶交互。當用戶點擊 Container 部件時，會觸發 GestureDetector 部件的 onTap 回調。
GestureDetector 支持的交互至關多，如輕觸、拖曳和縮放。
不少其餘部件都藉助 GestureDetector 來接收回調，如 IconButton, RaisedButton 和 FloatingActionButton 都接收 onPressed 回調。

改變 state

無狀態部件從父級接收數據，並把數據存在本身的 final 成員變量裏（相似於 JS 的 const）。

有狀態的部件則知道如何建立 state 對象，並維持 state 對象。

如何使用呢？

首先聲明一個 StatefulWidget

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}
複製代碼

這個部件須要重寫 createState 方法，而這個方法的返回值的類型，必須繼承自 State 類。

_CounterState 是如何繼承 State 的呢

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        RaisedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
        Text('Count: $_counter'),
      ],
    );
  }
}
複製代碼

須要重寫 build 方法提供視圖，並且可使用 '$_counter' 混入語法
在按鈕被點擊的時候調用 _increment，這個 _increment 會調用 State 提供的 setState 函數，給 setState 函數傳入一個函數，這個傳入的函數能夠對數據進行修改。
很是像 React 的 Class 組件。區別在於
1. Flutter 的部件和 state 是分開的類，而 React 只是把 state 用一個 hash 表示。
2. Flutter 的 State 裏面提供 build 方法，而 React 的 state 只是一個 hash
3. Flutter 將 StatelessWidget 和 StatefulWidget 分開，能更好地組織代碼