Flutter?Widget移動UI框架怎么使用Material和密匙Key

本文小編為大家詳細介紹“Flutter Widget移動UI框架怎么使用Material和密匙Key”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Flutter Widget移動UI框架怎么使用Material和密匙Key”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

Flutter

Flutter是谷歌的移動UI框架，可以在IOS和Android上快速構建高質量的本地用戶界面。Flutter可以使用現有代碼。

在世界上，Flutter正被越來越多的開發人員和組織使用，Flutter是完全免費和開源的。這也是構建未來Google Fuchsia應用程序的主要方式。

import 'package:flutter/material.dart';
void main() {
  runApp(
    new Center(
      child: new Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

runApp函數接受給定的小部件，并使其成為小部件樹的根。在本例中，小部件樹由兩個小部件組成：Center（及其子小部件）和Text。框架強制根小部件覆蓋整個屏幕，這意味著文本“Hello，world”將位于屏幕中心。需要在text實例中指定文本顯示的方向。使用MaterialApp時，將自動設置文本方向，稍后將進行演示。 編寫應用程序時，通常會創建新的小部件。這些小部件是無狀態無狀態小部件或有狀態有狀態小部件。具體選擇取決于小部件是否需要管理某些狀態。小部件的主要工作是實現一個構建函數來構建自己。小部件通常由一些較低級別的小部件組成。Flutter框架將依次構建這些小部件，直到構建最低級別的子小部件。這些最低級別的小部件通常是RenderObject，它將計算和描述小部件的幾何結構。

Material

Flutter提供了許多小部件來幫助構建遵循Material Design的應用程序。Material應用程序從MaterialApp小部件開始，它在應用程序的根位置創建一些有用的小部件，包括一個Navigator，它管理由字符串標識的小部件堆棧（即頁面路由堆棧）。導航器允許應用程序在頁面之間平滑過渡。是否使用MaterialApp是完全可選的，但使用它是一個很好的做法。 Scaffold是Material中主要的布局組件.

import 'package:flutter/material.dart';
void main() {
  runApp(new MaterialApp(
    title: 'Flutter Tutorial',
    home: new TutorialHome(),
  ));
}
class TutorialHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        leading: new IconButton(
          icon: new Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: new Text('Example title'),
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
      body: new Center(
        child: new Text('Hello, world!'),
      ),
      floatingActionButton: new FloatingActionButton(
        tooltip: 'Add', // used by assistive technologies
        child: new Icon(Icons.add),
        onPressed: null,
      ),
    );
  }
}

更完整的示例

讓我們考慮一個更完整的示例，它將上面介紹的概念結合在一起。讓我們假設一個顯示各種待售產品并維護購物車的購物應用程序。讓我們先定義ShoppingListItem：

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

ShoppingListItem小部件是無狀態的。它將在構造函數中接收的值存儲在最終成員變量中，然后在構建函數中使用它們。例如，inCart布爾值表示在兩種視覺呈現效果之間切換：一種使用當前主題的主色，另一種使用灰色。 當用戶單擊列表項時，小部件不會直接修改其inCart值。相反，小部件將調用其父小部件賦予它的onCartChanged回調函數。此模式允許在小部件層次結構中存儲更高的狀態，從而使狀態持續更長時間。在極端情況下，存儲并傳遞給runApp應用程序的小部件的狀態將持續整個生命周期。 當父項收到onCartChanged回調時，父項將更新其內部狀態，這將觸發父項使用新的inCart值重新生成ShoppingListItem的新實例。盡管父ShoppingListItem在重建時創建了一個新實例，但操作成本很低，因為Flutter框架會將新構建的小部件與先前構建的小組件進行比較，并且只將差異應用于底層RenderObject。

Key

可以使用該鍵控制在重新構建小部件時框架將匹配哪些其他小部件。默認情況下，框架根據其runtimeType和顯示順序進行匹配。當使用鍵時，框架要求兩個小部件具有相同的鍵和runtimeType。 鍵對于構建相同類型的小部件的多個實例非常有用。例如，ShoppingList構建了足夠的ShoppingListItem實例來填充其可見區域： 如果沒有密鑰，則當前生成中的第一個項將始終與上一個生成中的首個項同步。即使在語義上，如果列表中的第一個項目滾動到屏幕外，它在窗口中也不再可見。 通過將列表中的每個項目指定為“語義”鍵，無限列表可以更有效，因為框架將使項目與匹配的語義鍵同步，從而具有相似（或相同）的視覺外觀。此外，語義同步條目意味著在有狀態的子窗口小部件中，保留狀態將附加到相同的語義條目，而不是附加到相同編號位置的條目。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget titleSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Row(
        children: [
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                new Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: new Text(
                    'Oeschinen Lake Campground',
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Text(
                  'Kandersteg, Switzerland',
                  style: new TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),
          ),
          new Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          new Text('41'),
        ],
      ),
    );
  //...
}

將第一行文本放入容器，然后在底部添加8個像素。列中的第二個子項（也是文本）顯示為灰色。 標題行中的最后兩項是紅星圖標和文本“41”。將整行放在容器中，沿每條邊填充32個像素。

讀到這里，這篇“Flutter Widget移動UI框架怎么使用Material和密匙Key”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。