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”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注蜗牛博客行业资讯频道。