flutter widget 框架概述

作者: 充满活力的早晨 | 来源:发表于2019-03-19 11:50 被阅读0次

今天开始，我们开始系统的学习下flutter widget 框架

介绍

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改（译者语：类似于React/Vue中虚拟DOM的diff算法）。

重点：响应式框架

hello world

一个最简单的Flutter应用程序，只需一个widget即可！如下面示例：将一个widget传给runApp函数即可：

import 'package:flutter/material.dart';

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

这里背景是黑的，想设置背景颜色，只能通过Container widget来实现

该runApp函数接受给定的Widget并使其成为widget树的根。在此示例中，widget树由两个widget:Center(及其子widget)和Text组成。框架强制根widget覆盖整个屏幕，这意味着文本“Hello, world”会居中显示在屏幕上。文本显示的方向需要在Text实例中指定，当使用MaterialApp时，文本的方向将自动设定，稍后将进行演示。

在编写应用程序时，通常会创建新的widget，这些widget是无状态的StatelessWidget或者是有状态的StatefulWidget，具体的选择取决于您的widget是否需要管理一些状态。widget的主要工作是实现一个build函数，用以构建自身。一个widget通常由一些较低级别widget组成。Flutter框架将依次构建这些widget，直到构建到最底层的子widget时，这些最低层的widget通常为RenderObject，它会计算并描述widget的几何形状。

重点：根widget 是强制覆盖全屏

基础 Widget

Flutter有一套丰富、强大的基础widget，其中以下是很常用的：

Text：该 widget 可让创建一个带格式的文本。
Row、 Column：这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。
Stack：取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠，你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。
Container： Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(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，可帮助您构建遵循Material Design的应用程序。Material应用程序以MaterialAppwidget开始，该widget在应用程序的根部创建了一些有用的widget，其中包括一个Navigator，它管理由字符串标识的Widget栈（即页面路由栈）。Navigator可以让您的应用程序在页面之间的平滑的过渡。是否使用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"),
      ),
    );
  }
}

现在我们已经从MyAppBar和MyScaffold切换到了AppBar和 Scaffold widget，我们的应用程序现在看起来已经有一些“Material”了！例如，应用栏有一个阴影，标题文本会自动继承正确的样式。我们还添加了一个浮动操作按钮，以便进行相应的操作处理。

请注意，我们再次将widget作为参数传递给其他widget。该 Scaffold widget 需要许多不同的widget的作为命名参数，其中的每一个被放置在Scaffold布局中相应的位置。同样，AppBar 中，我们给参数leading、actions、title分别传一个widget。这种模式在整个框架中会经常出现，这也可能是您在设计自己的widget时会考虑到一点。

处理手势

大多数应用程序包括某种形式与系统的交互。构建交互式应用程序的第一步是检测输入手势。让我们通过创建一个简单的按钮来了解它的工作原理：


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并不具有显示效果，而是检测由用户做出的手势。当用户点击Container时， GestureDetector会调用它的onTap回调，在回调中，将消息打印到控制台。您可以使用GestureDetector来检测各种输入手势，包括点击、拖动和缩放。

许多widget都会使用一个GestureDetector为其他widget提供可选的回调。例如，IconButton、 RaisedButton、和FloatingActionButton ，它们都有一个onPressed回调，它会在用户点击该widget时被触发。

根据用户输入改变widget

到目前为止，我们只使用了无状态的widget。无状态widget从它们的父widget接收参数，它们被存储在final型的成员变量中。当一个widget被要求构建时，它使用这些存储的值作为参数来构建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是临时对象，用于构建当前状态下的应用程序，而State对象在多次调用build()之间保持不变，允许它们记住信息(状态)。

上面的例子接受用户点击，并在点击时使_counter自增，然后直接在其build方法中使用_counter值。在更复杂的应用程序中，widget结构层次的不同部分可能有不同的职责；例如，一个widget可能呈现一个复杂的用户界面，其目标是收集特定信息（如日期或位置），而另一个widget可能会使用该信息来更改整体的显示。

在Flutter中，事件流是“向上”传递的，而状态流是“向下”传递的（译者语：这类似于React/Vue中父子组件通信的方式：子widget到父widget是通过事件通信，而父到子是通过状态），重定向这一流程的共同父元素是State。让我们看看这个稍微复杂的例子是如何工作的：

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

注意我们是如何创建了两个新的无状态widget的！我们清晰地分离了显示计数器（CounterDisplay）和更改计数器（CounterIncrementor）的逻辑。尽管最终效果与前一个示例相同，但责任分离允许将复杂性逻辑封装在各个widget中，同时保持父项的简单性。

重点，事件流是向上传递的。层次结构是counter widget 包含CounterIncrementor widget，在CounterIncrementor的上层，而事件触发在下层CounterIncrementor widget 里，我们可以将上层的事件传递到下层去。（其实就是将上层响应指针传递到下层去，下层去调用这个指针）

状态流是向下传递，我们知道counter widget 在调用_increment 方法的使用是调用setState 方法，这样，counter widget 更改了属性值_counter，因为，我们将_counter 传递给了下层CounterDisplay widget ，因此CounterDisplay widget 也跟着变化了。

完整的例子

我们考虑一个更完整的例子，将上面介绍的概念汇集在一起。我们假设一个购物应用程序，该应用程序显示出售的各种产品，并维护一个购物车。

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可以存储状态。当ShoppingList首次插入到树中时，框架会调用其 createState 函数以创建一个新的_ShoppingListState实例来与该树中的相应位置关联（请注意，我们通常命名State子类时带一个下划线，这表示其是私有的）。当这个widget的父级重建时，父级将创建一个新的ShoppingList实例，但是Flutter框架将重用已经在树中的_ShoppingListState实例，而不是再次调用createState创建一个新的。

要访问当前ShoppingList的属性，_ShoppingListState可以使用它的widget属性。如果父级重建并创建一个新的ShoppingList，那么 _ShoppingListState也将用新的widget值重建（译者语：这里原文档有错误，应该是_ShoppingListState不会重新构建，但其widget的属性会更新为新构建的widget）。如果希望在widget属性更改时收到通知，则可以覆盖didUpdateWidget函数，以便将旧的oldWidget与当前widget进行比较。

处理onCartChanged回调时，_ShoppingListState通过添加或删除产品来改变其内部_shoppingCart状态。为了通知框架它改变了它的内部状态，需要调用setState。调用setState将该widget标记为”dirty”(脏的)，并且计划在下次应用程序需要更新屏幕时重新构建它。如果在修改widget的内部状态后忘记调用setState，框架将不知道您的widget是”dirty”(脏的)，并且可能不会调用widget的build方法，这意味着用户界面可能不会更新以展示新的状态。

通过以这种方式管理状态，您不需要编写用于创建和更新子widget的单独代码。相反，您只需实现可以处理这两种情况的build函数。

响应widget生命周期事件

在StatefulWidget调用createState之后，框架将新的状态对象插入树中，然后调用状态对象的initState。子类化State可以重写initState，以完成仅需要执行一次的工作。例如，您可以重写initState以配置动画或订阅platform services。initState的实现中需要调用super.initState。

当一个状态对象不再需要时，框架调用状态对象的dispose。您可以覆盖该dispose方法来执行清理工作。例如，您可以覆盖dispose取消定时器或取消订阅platform services。 dispose典型的实现是直接调用super.dispose。

Key

您可以使用key来控制框架将在widget重建时与哪些其他widget匹配。默认情况下，框架根据它们的runtimeType和它们的显示顺序来匹配。使用key时，框架要求两个widget具有相同的key和runtimeType。

Key在构建相同类型widget的多个实例时很有用。例如，ShoppingList构建足够的ShoppingListItem实例以填充其可见区域：

如果没有key，当前构建中的第一个条目将始终与前一个构建中的第一个条目同步，即使在语义上，列表中的第一个条目如果滚动出屏幕，那么它将不会再在窗口中可见。
通过给列表中的每个条目分配为“语义” key，无限列表可以更高效，因为框架将同步条目与匹配的语义key并因此具有相似（或相同）的可视外观。此外，语义上同步条目意味着在有状态子widget中，保留的状态将附加到相同的语义条目上，而不是附加到相同数字位置上的条目。

全局 Key

您可以使用全局key来唯一标识子widget。全局key在整个widget层次结构中必须是全局唯一的，这与局部key不同，后者只需要在同级中唯一。由于它们是全局唯一的，因此可以使用全局key来检索与widget关联的状态。

借鉴文章

flutter widget 框架概述

介绍

hello world

基础 Widget

使用 Material 组件

处理手势

根据用户输入改变widget

完整的例子

响应widget生命周期事件

Key

全局 Key

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读