今天開始务蝠，我們開始系統(tǒng)的學(xué)習(xí)下flutter widget 框架

介紹

Flutter Widget采用現(xiàn)代響應(yīng)式框架構(gòu)建拍谐，這是從 React 中獲得的靈感，中心思想是用widget構(gòu)建你的UI馏段。 Widget描述了他們的視圖在給定其當(dāng)前配置和狀態(tài)時應(yīng)該看起來像什么赠尾。當(dāng)widget的狀態(tài)發(fā)生變化時，widget會重新構(gòu)建UI毅弧，F(xiàn)lutter會對比前后變化的不同， 以確定底層渲染樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改（譯者語：類似于React/Vue中虛擬DOM的diff算法）当窗。

重點：響應(yīng)式框架

hello world

一個最簡單的Flutter應(yīng)用程序够坐，只需一個widget即可！如下面示例：將一個widget傳給runApp函數(shù)即可：

import 'package:flutter/material.dart';

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

這里背景是黑的崖面，想設(shè)置背景顏色元咙，只能通過Container widget來實現(xiàn)

該runApp函數(shù)接受給定的Widget并使其成為widget樹的根。 在此示例中巫员，widget樹由兩個widget:Center(及其子widget)和Text組成庶香。框架強制根widget覆蓋整個屏幕简识，這意味著文本“Hello, world”會居中顯示在屏幕上赶掖。文本顯示的方向需要在Text實例中指定，當(dāng)使用MaterialApp時七扰，文本的方向?qū)⒆詣釉O(shè)定奢赂，稍后將進行演示。

在編寫應(yīng)用程序時颈走，通常會創(chuàng)建新的widget膳灶，這些widget是無狀態(tài)的StatelessWidget或者是有狀態(tài)的StatefulWidget， 具體的選擇取決于您的widget是否需要管理一些狀態(tài)立由。widget的主要工作是實現(xiàn)一個build函數(shù)轧钓，用以構(gòu)建自身。一個widget通常由一些較低級別widget組成锐膜。Flutter框架將依次構(gòu)建這些widget毕箍，直到構(gòu)建到最底層的子widget時，這些最低層的widget通常為RenderObject枣耀，它會計算并描述widget的幾何形狀霉晕。

重點：根widget 是強制覆蓋全屏

基礎(chǔ) Widget

Flutter有一套豐富庭再、強大的基礎(chǔ)widget，其中以下是很常用的：

• Text：該 widget 可讓創(chuàng)建一個帶格式的文本牺堰。

• Row拄轻、 Column： 這些具有彈性空間的布局類Widget可讓您在水平（Row）和垂直（Column）方向上創(chuàng)建靈活的布局。其設(shè)計是基于web開發(fā)中的Flexbox布局模型伟葫。

• Stack： 取代線性布局 (譯者語：和Android中的LinearLayout相似)恨搓，Stack允許子 widget 堆疊， 你可以使用 Positioned 來定位他們相對于Stack的上下左右四條邊的位置筏养。Stacks是基于Web開發(fā)中的絕度定位（absolute positioning )布局模型設(shè)計的斧抱。

• Container： Container 可讓您創(chuàng)建矩形視覺元素。container 可以裝飾為一個BoxDecoration, 如 background渐溶、一個邊框辉浦、或者一個陰影。 Container 也可以具有邊距（margins）茎辐、填充(padding)和應(yīng)用于其大小的約束(constraints)宪郊。另外， Container可以使用矩陣在三維空間中對其進行變換拖陆。

void main()  => runApp(
  MaterialApp(
    title: "app",
    home: MyScaffold(),
  )
);
  class MyAppBar extends StatelessWidget {
    final Widget title;
    MyAppBar({this.title});
    @override
    Widget build(BuildContext context) {
      return Container(
        height: 56.0,
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        decoration: BoxDecoration(
          color: Colors.blue[700]
        ),
        child: Row(
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.menu),
              tooltip: "Navigation menu",
              onPressed: null,
            ),
            Expanded(child: title),
            IconButton(
              icon: Icon(Icons.search),
              tooltip: "search",
              onPressed: null,
            )
          ],
        ),
      );
    }
  }

  class MyScaffold extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Material(
        child: Column(
          children: <Widget>[
            MyAppBar(
              title: Text(
                "example title",
                style:Theme.of(context).primaryTextTheme.title,
              ),
            ),
            Expanded(
              child: Center(
                child: Text("hello world"),
              ),
            )
          ],
        ),
      );
    }
  }

image.png

使用 Material 組件

Flutter提供了許多widgets弛槐，可幫助您構(gòu)建遵循Material Design的應(yīng)用程序。Material應(yīng)用程序以MaterialAppwidget開始依啰， 該widget在應(yīng)用程序的根部創(chuàng)建了一些有用的widget乎串，其中包括一個Navigator， 它管理由字符串標(biāo)識的Widget棧（即頁面路由棧）速警。Navigator可以讓您的應(yīng)用程序在頁面之間的平滑的過渡叹誉。 是否使用MaterialApp完全是可選的，但是使用它是一個很好的做法闷旧。

void main(List<String> args) {
  runApp(
    MaterialApp(
      title: "flutter Tutorial",
      home: TutorialHome() ,
    )
  );
}


class TutorialHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("mater"),
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: "navigation menu",
          onPressed: null,
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            tooltip: "search",
            onPressed: null,
          )
        ],
      ),
      body: Center(
        child: Text("hello world"),
      ),
    );
  }
}

現(xiàn)在我們已經(jīng)從MyAppBar和MyScaffold切換到了AppBar和 Scaffold widget桂对， 我們的應(yīng)用程序現(xiàn)在看起來已經(jīng)有一些“Material”了！例如鸠匀，應(yīng)用欄有一個陰影蕉斜，標(biāo)題文本會自動繼承正確的樣式。我們還添加了一個浮動操作按鈕缀棍，以便進行相應(yīng)的操作處理宅此。

請注意，我們再次將widget作為參數(shù)傳遞給其他widget爬范。該 Scaffold widget 需要許多不同的widget的作為命名參數(shù)父腕，其中的每一個被放置在Scaffold布局中相應(yīng)的位置。 同樣青瀑，AppBar 中璧亮，我們給參數(shù)leading萧诫、actions、title分別傳一個widget枝嘶。 這種模式在整個框架中會經(jīng)常出現(xiàn)帘饶，這也可能是您在設(shè)計自己的widget時會考慮到一點。

處理手勢

大多數(shù)應(yīng)用程序包括某種形式與系統(tǒng)的交互群扶。構(gòu)建交互式應(yīng)用程序的第一步是檢測輸入手勢及刻。讓我們通過創(chuàng)建一個簡單的按鈕來了解它的工作原理：

void main(List<String> args) {
  runApp(
    MaterialApp(
      title: "flutter Tutorial",
      home: TutorialHome() ,
    )
  );
}


class TutorialHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("mater"),
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: "navigation menu",
          onPressed: null,
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            tooltip: "search",
            onPressed: null,
          )
        ],
      ),
      body: Center(
        child: MyButton(),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        print("hitMyButton");
      },
      child: Container(
        height: 36.0,
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          color: Colors.lightGreen[500]
        ),
        child: Center(
          child: Text("Engage"),
        ),
      ),
    );
  }
}

image.png

該GestureDetector widget并不具有顯示效果，而是檢測由用戶做出的手勢竞阐。 當(dāng)用戶點擊Container時缴饭， GestureDetector會調(diào)用它的onTap回調(diào)， 在回調(diào)中骆莹，將消息打印到控制臺颗搂。您可以使用GestureDetector來檢測各種輸入手勢，包括點擊幕垦、拖動和縮放峭火。

許多widget都會使用一個GestureDetector為其他widget提供可選的回調(diào)。 例如智嚷，IconButton、 RaisedButton纺且、 和FloatingActionButton 盏道，它們都有一個onPressed回調(diào)，它會在用戶點擊該widget時被觸發(fā)载碌。

根據(jù)用戶輸入改變widget

到目前為止猜嘱，我們只使用了無狀態(tài)的widget。無狀態(tài)widget從它們的父widget接收參數(shù)嫁艇， 它們被存儲在final型的成員變量中朗伶。 當(dāng)一個widget被要求構(gòu)建時，它使用這些存儲的值作為參數(shù)來構(gòu)建widget步咪÷劢裕看下面小例子

void main(List<String> args) {
  runApp(
    MaterialApp(
      title: "flutter Tutorial",
      home: Counter(),
    )
  );
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

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")
      ],
    );
  }
}

您可能想知道為什么StatefulWidget和State是單獨的對象。在Flutter中猾漫，這兩種類型的對象具有不同的生命周期： Widget是臨時對象点晴，用于構(gòu)建當(dāng)前狀態(tài)下的應(yīng)用程序，而State對象在多次調(diào)用build()之間保持不變悯周，允許它們記住信息(狀態(tài))粒督。

上面的例子接受用戶點擊，并在點擊時使_counter自增禽翼，然后直接在其build方法中使用_counter值屠橄。在更復(fù)雜的應(yīng)用程序中族跛，widget結(jié)構(gòu)層次的不同部分可能有不同的職責(zé)； 例如锐墙，一個widget可能呈現(xiàn)一個復(fù)雜的用戶界面礁哄，其目標(biāo)是收集特定信息（如日期或位置），而另一個widget可能會使用該信息來更改整體的顯示贮匕。

在Flutter中姐仅，事件流是“向上”傳遞的，而狀態(tài)流是“向下”傳遞的（譯者語：這類似于React/Vue中父子組件通信的方式：子widget到父widget是通過事件通信刻盐，而父到子是通過狀態(tài)）掏膏，重定向這一流程的共同父元素是State。讓我們看看這個稍微復(fù)雜的例子是如何工作的：

void main(List<String> args) {
  runApp(
    MaterialApp(
      title: "flutter Tutorial",
      home: Counter(),
    )
  );
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;
  void _increment(){
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
       CounterIncrementor(onPressed: _increment),
       CounterDisplay(count: _counter)
      ],
    );
  }
}

class CounterDisplay extends StatelessWidget {
  CounterDisplay({this.count});
  final int count;
  @override
  Widget build(BuildContext context) {
    return Text("Count:$count");
  }
}


class CounterIncrementor extends StatelessWidget {
final VoidCallback onPressed;
CounterIncrementor({this.onPressed});
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: onPressed,
      child: Text("InCrement"),
    );
  }
}

image.png

注意我們是如何創(chuàng)建了兩個新的無狀態(tài)widget的敦锌！我們清晰地分離了 顯示 計數(shù)器（CounterDisplay）和 更改 計數(shù)器（CounterIncrementor）的邏輯馒疹。 盡管最終效果與前一個示例相同，但責(zé)任分離允許將復(fù)雜性邏輯封裝在各個widget中乙墙，同時保持父項的簡單性颖变。

重點，事件流是向上傳遞的听想。層次結(jié)構(gòu)是counter widget 包含CounterIncrementor widget腥刹，在CounterIncrementor的上層，而事件觸發(fā)在下層CounterIncrementor widget 里汉买，我們可以將上層的事件傳遞到下層去衔峰。（其實就是將上層響應(yīng)指針傳遞到下層去，下層去調(diào)用這個指針）

狀態(tài)流是向下傳遞蛙粘，我們知道counter widget 在調(diào)用_increment 方法的使用是調(diào)用setState 方法垫卤，這樣，counter widget 更改了屬性值_counter出牧， 因為穴肘，我們將_counter 傳遞給了下層CounterDisplay widget ，因此CounterDisplay widget 也跟著變化了舔痕。

完整的例子

我們考慮一個更完整的例子评抚，將上面介紹的概念匯集在一起??。我們假設(shè)一個購物應(yīng)用程序伯复，該應(yīng)用程序顯示出售的各種產(chǎn)品盈咳，并維護一個購物車。

void main(List<String> args) {
  runApp(
      MaterialApp(
       title: "shopping app",
       home: ShoppingList(
         products: <Product>[
           Product(name: "eggs"),
           Product(name: "flour"),
           Product(name: "chocolate chips")
         ],
       ),
     )
  );
}


class Product {
  const Product({this.name});
  final String name;
}

typedef void CartChangedCallBack(Product product,bool inCart);

class ShoppingListItem extends StatelessWidget {
  final Product product;
  final bool inCart;
  final CartChangedCallBack onCartChanged;
  ShoppingListItem({Product product,this.inCart,this.onCartChanged}):product=product,super(key:ObjectKey(product));
  
  Color _getColor(BuildContext context){
    return inCart?Colors.black54:Theme.of(context).primaryColor;
  }
  TextStyle _getTextStyle(BuildContext context){
    if (!inCart) {
      return null;
    }
    return TextStyle(
      color: Colors.black54,
      decoration: TextDecoration.lineThrough
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: (){
        onCartChanged(product,!inCart);
      },
      leading: CircleAvatar(
        backgroundColor: _getColor(context),
        child: Text(product.name[0]),
      ),
      title: Text(
        product.name,
        style:_getTextStyle(context)
      ),
    );
  }
}

class ShoppingList extends StatefulWidget {
  
  final List<Product> products;

  const ShoppingList({Key key, this.products}) : super(key: key);
  @override
  _ShoppingListState createState() => _ShoppingListState();
}

class _ShoppingListState extends State<ShoppingList> {
Set<Product> _shoppingCart =Set<Product>();
void _handleCartChanged(Product product,bool inCart){
  setState(() {
    if (inCart) {
      _shoppingCart.add(product);
    }else{
      _shoppingCart.remove(product);
    }
  });
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("shopping list")
      ),
      body: ListView(
        padding: EdgeInsets.symmetric(vertical:8.0),
        children: widget.products.map(
        (Product product){
          return ShoppingListItem(
            product: product,
            inCart: _shoppingCart.contains(product),
            onCartChanged: _handleCartChanged,
          ); 
        }
        ).toList(),
      ),
    );
  }
}

image.png

ShoppingList類繼承自StatefulWidget边翼，這意味著這個widget可以存儲狀態(tài)鱼响。 當(dāng)ShoppingList首次插入到樹中時，框架會調(diào)用其 createState 函數(shù)以創(chuàng)建一個新的_ShoppingListState實例來與該樹中的相應(yīng)位置關(guān)聯(lián)（請注意组底，我們通常命名State子類時帶一個下劃線丈积，這表示其是私有的）筐骇。 當(dāng)這個widget的父級重建時，父級將創(chuàng)建一個新的ShoppingList實例江滨，但是Flutter框架將重用已經(jīng)在樹中的_ShoppingListState實例铛纬，而不是再次調(diào)用createState創(chuàng)建一個新的。

要訪問當(dāng)前ShoppingList的屬性唬滑，_ShoppingListState可以使用它的widget屬性告唆。 如果父級重建并創(chuàng)建一個新的ShoppingList，那么 _ShoppingListState也將用新的widget值重建（譯者語：這里原文檔有錯誤晶密，應(yīng)該是_ShoppingListState不會重新構(gòu)建擒悬，但其widget的屬性會更新為新構(gòu)建的widget）。 如果希望在widget屬性更改時收到通知稻艰，則可以覆蓋didUpdateWidget函數(shù)懂牧，以便將舊的oldWidget與當(dāng)前widget進行比較。

處理onCartChanged回調(diào)時尊勿，_ShoppingListState通過添加或刪除產(chǎn)品來改變其內(nèi)部_shoppingCart狀態(tài)僧凤。 為了通知框架它改變了它的內(nèi)部狀態(tài)，需要調(diào)用setState元扔。調(diào)用setState將該widget標(biāo)記為”dirty”(臟的)躯保，并且計劃在下次應(yīng)用程序需要更新屏幕時重新構(gòu)建它。 如果在修改widget的內(nèi)部狀態(tài)后忘記調(diào)用setState澎语，框架將不知道您的widget是”dirty”(臟的)途事，并且可能不會調(diào)用widget的build方法，這意味著用戶界面可能不會更新以展示新的狀態(tài)咏连。

通過以這種方式管理狀態(tài)，您不需要編寫用于創(chuàng)建和更新子widget的單獨代碼鲁森。相反祟滴，您只需實現(xiàn)可以處理這兩種情況的build函數(shù)。

響應(yīng)widget生命周期事件

在StatefulWidget調(diào)用createState之后歌溉，框架將新的狀態(tài)對象插入樹中垄懂，然后調(diào)用狀態(tài)對象的initState。 子類化State可以重寫initState痛垛，以完成僅需要執(zhí)行一次的工作草慧。 例如，您可以重寫initState以配置動畫或訂閱platform services匙头。initState的實現(xiàn)中需要調(diào)用super.initState漫谷。

當(dāng)一個狀態(tài)對象不再需要時，框架調(diào)用狀態(tài)對象的dispose阱冶。 您可以覆蓋該dispose方法來執(zhí)行清理工作翔始。例如，您可以覆蓋dispose取消定時器或取消訂閱platform services进泼。 dispose典型的實現(xiàn)是直接調(diào)用super.dispose惕稻。

Key

您可以使用key來控制框架將在widget重建時與哪些其他widget匹配竖共。默認(rèn)情況下，框架根據(jù)它們的runtimeType和它們的顯示順序來匹配俺祠。 使用key時公给，框架要求兩個widget具有相同的key和runtimeType。

Key在構(gòu)建相同類型widget的多個實例時很有用蜘渣。例如淌铐，ShoppingList構(gòu)建足夠的ShoppingListItem實例以填充其可見區(qū)域：

• 如果沒有key，當(dāng)前構(gòu)建中的第一個條目將始終與前一個構(gòu)建中的第一個條目同步宋梧，即使在語義上匣沼，列表中的第一個條目如果滾動出屏幕，那么它將不會再在窗口中可見捂龄。

• 通過給列表中的每個條目分配為“語義” key释涛，無限列表可以更高效，因為框架將同步條目與匹配的語義key并因此具有相似（或相同）的可視外觀倦沧。 此外唇撬，語義上同步條目意味著在有狀態(tài)子widget中，保留的狀態(tài)將附加到相同的語義條目上展融，而不是附加到相同數(shù)字位置上的條目窖认。

全局 Key

您可以使用全局key來唯一標(biāo)識子widget。全局key在整個widget層次結(jié)構(gòu)中必須是全局唯一的告希，這與局部key不同扑浸，后者只需要在同級中唯一。由于它們是全局唯一的燕偶，因此可以使用全局key來檢索與widget關(guān)聯(lián)的狀態(tài)喝噪。

借鑒文章