Flutter Widget移动UI框架使用Material和密匙Key实战

时间:2022-12-23 黎燃人气:0

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: &lt;Widget&gt;[
          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个像素

加载全部内容