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

介紹

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

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

hello world

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

import 'package:flutter/material.dart';

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

這里背景是黑的，想設(shè)置背景顏色，只能通過(guò)Container widget來(lái)實(shí)現(xiàn)

該runApp函數(shù)接受給定的Widget并使其成為widget樹(shù)的根。在此示例中，widget樹(shù)由兩個(gè)widget:Center(及其子widget)和Text組成?？蚣軓?qiáng)制根widget覆蓋整個(gè)屏幕，這意味著文本“Hello, world”會(huì)居中顯示在屏幕上。文本顯示的方向需要在Text實(shí)例中指定，當(dāng)使用MaterialApp時(shí)，文本的方向?qū)⒆詣?dòng)設(shè)定，稍后將進(jìn)行演示。

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

重點(diǎn)：根widget 是強(qiáng)制覆蓋全屏

基礎(chǔ) Widget

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

Text：該 widget 可讓創(chuàng)建一個(gè)帶格式的文本。
Row、 Column：這些具有彈性空間的布局類Widget可讓您在水平（Row）和垂直（Column）方向上創(chuàng)建靈活的布局。其設(shè)計(jì)是基于web開(kāi)發(fā)中的Flexbox布局模型。
Stack：取代線性布局 (譯者語(yǔ)：和Android中的LinearLayout相似)，Stack允許子 widget 堆疊，你可以使用 Positioned 來(lái)定位他們相對(duì)于Stack的上下左右四條邊的位置。Stacks是基于Web開(kāi)發(fā)中的絕度定位（absolute positioning )布局模型設(shè)計(jì)的。
Container： Container 可讓您創(chuàng)建矩形視覺(jué)元素。container 可以裝飾為一個(gè)BoxDecoration, 如 background、一個(gè)邊框、或者一個(gè)陰影。 Container 也可以具有邊距（margins）、填充(padding)和應(yīng)用于其大小的約束(constraints)。另外， Container可以使用矩陣在三維空間中對(duì)其進(jìn)行變換。

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開(kāi)始，該widget在應(yīng)用程序的根部創(chuàng)建了一些有用的widget，其中包括一個(gè)Navigator，它管理由字符串標(biāo)識(shí)的Widget棧（即頁(yè)面路由棧）。Navigator可以讓您的應(yīng)用程序在頁(yè)面之間的平滑的過(guò)渡。是否使用MaterialApp完全是可選的，但是使用它是一個(gè)很好的做法。


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)在看起來(lái)已經(jīng)有一些“Material”了！例如，應(yīng)用欄有一個(gè)陰影，標(biāo)題文本會(huì)自動(dòng)繼承正確的樣式。我們還添加了一個(gè)浮動(dòng)操作按鈕，以便進(jìn)行相應(yīng)的操作處理。

請(qǐng)注意，我們?cè)俅螌idget作為參數(shù)傳遞給其他widget。該 Scaffold widget 需要許多不同的widget的作為命名參數(shù)，其中的每一個(gè)被放置在Scaffold布局中相應(yīng)的位置。同樣，AppBar 中，我們給參數(shù)leading、actions、title分別傳一個(gè)widget。這種模式在整個(gè)框架中會(huì)經(jīng)常出現(xiàn)，這也可能是您在設(shè)計(jì)自己的widget時(shí)會(huì)考慮到一點(diǎn)。

處理手勢(shì)

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


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并不具有顯示效果，而是檢測(cè)由用戶做出的手勢(shì)。當(dāng)用戶點(diǎn)擊Container時(shí)， GestureDetector會(huì)調(diào)用它的onTap回調(diào)，在回調(diào)中，將消息打印到控制臺(tái)。您可以使用GestureDetector來(lái)檢測(cè)各種輸入手勢(shì)，包括點(diǎn)擊、拖動(dòng)和縮放。

許多widget都會(huì)使用一個(gè)GestureDetector為其他widget提供可選的回調(diào)。例如，IconButton、 RaisedButton、和FloatingActionButton ，它們都有一個(gè)onPressed回調(diào)，它會(huì)在用戶點(diǎn)擊該widget時(shí)被觸發(fā)。

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

到目前為止，我們只使用了無(wú)狀態(tài)的widget。無(wú)狀態(tài)widget從它們的父widget接收參數(shù)，它們被存儲(chǔ)在final型的成員變量中。當(dāng)一個(gè)widget被要求構(gòu)建時(shí)，它使用這些存儲(chǔ)的值作為參數(shù)來(lái)構(gòu)建widget?？聪旅嫘±?/p>

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是單獨(dú)的對(duì)象。在Flutter中，這兩種類型的對(duì)象具有不同的生命周期： Widget是臨時(shí)對(duì)象，用于構(gòu)建當(dāng)前狀態(tài)下的應(yīng)用程序，而State對(duì)象在多次調(diào)用build()之間保持不變，允許它們記住信息(狀態(tài))。

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

在Flutter中，事件流是“向上”傳遞的，而狀態(tài)流是“向下”傳遞的（譯者語(yǔ)：這類似于React/Vue中父子組件通信的方式：子widget到父widget是通過(guò)事件通信，而父到子是通過(guò)狀態(tài)），重定向這一流程的共同父元素是State。讓我們看看這個(gè)稍微復(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)建了兩個(gè)新的無(wú)狀態(tài)widget的！我們清晰地分離了顯示計(jì)數(shù)器（CounterDisplay）和更改計(jì)數(shù)器（CounterIncrementor）的邏輯。盡管最終效果與前一個(gè)示例相同，但責(zé)任分離允許將復(fù)雜性邏輯封裝在各個(gè)widget中，同時(shí)保持父項(xiàng)的簡(jiǎn)單性。

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

狀態(tài)流是向下傳遞，我們知道counter widget 在調(diào)用_increment 方法的使用是調(diào)用setState 方法，這樣，counter widget 更改了屬性值_counter，因?yàn)?，我們將_counter 傳遞給了下層CounterDisplay widget ，因此CounterDisplay widget 也跟著變化了。

完整的例子

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

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，這意味著這個(gè)widget可以存儲(chǔ)狀態(tài)。當(dāng)ShoppingList首次插入到樹(shù)中時(shí)，框架會(huì)調(diào)用其 createState 函數(shù)以創(chuàng)建一個(gè)新的_ShoppingListState實(shí)例來(lái)與該樹(shù)中的相應(yīng)位置關(guān)聯(lián)（請(qǐng)注意，我們通常命名State子類時(shí)帶一個(gè)下劃線，這表示其是私有的）。當(dāng)這個(gè)widget的父級(jí)重建時(shí)，父級(jí)將創(chuàng)建一個(gè)新的ShoppingList實(shí)例，但是Flutter框架將重用已經(jīng)在樹(shù)中的_ShoppingListState實(shí)例，而不是再次調(diào)用createState創(chuàng)建一個(gè)新的。

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

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

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

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

在StatefulWidget調(diào)用createState之后，框架將新的狀態(tài)對(duì)象插入樹(shù)中，然后調(diào)用狀態(tài)對(duì)象的initState。子類化State可以重寫initState，以完成僅需要執(zhí)行一次的工作。例如，您可以重寫initState以配置動(dòng)畫或訂閱platform services。initState的實(shí)現(xiàn)中需要調(diào)用super.initState。

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

Key

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

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

如果沒(méi)有key，當(dāng)前構(gòu)建中的第一個(gè)條目將始終與前一個(gè)構(gòu)建中的第一個(gè)條目同步，即使在語(yǔ)義上，列表中的第一個(gè)條目如果滾動(dòng)出屏幕，那么它將不會(huì)再在窗口中可見(jiàn)。
通過(guò)給列表中的每個(gè)條目分配為“語(yǔ)義” key，無(wú)限列表可以更高效，因?yàn)榭蚣軐⑼綏l目與匹配的語(yǔ)義key并因此具有相似（或相同）的可視外觀。此外，語(yǔ)義上同步條目意味著在有狀態(tài)子widget中，保留的狀態(tài)將附加到相同的語(yǔ)義條目上，而不是附加到相同數(shù)字位置上的條目。

全局 Key

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

借鑒文章

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

flutter widget 框架概述

flutter widget 框架概述

介紹

hello world

基礎(chǔ) Widget

使用 Material 組件

處理手勢(shì)

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

完整的例子

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

Key

全局 Key

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

flutter widget 框架概述

介紹

hello world

基礎(chǔ) Widget

使用 Material 組件

處理手勢(shì)

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

完整的例子

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

Key

全局 Key

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av