(两百三十六)学习Flutter 开发文档 - Widgets介绍(二)

继续学习https://flutter.cn/docs/development/ui/widgets-intro#changing-widgets-in-response-to-input

(两百三十四)学习Flutter 开发文档 - Widgets介绍(一)

 

根据用户输入改变 widget

到目前为止,这个页面仅使用了无状态的 widget。无状态 widget 接收的参数来自于它的父 widget,它们储存在 final 成员变量中。当 widget 需要被 build() 时,就是用这些存储的变量为创建的 widget 生成新的参数。

为了构建更复杂的体验,例如,以更有趣的方式对用户输入做出反应—应用通常带有一些状态。 Flutter 使用 StatefulWidgets 来实现这一想法。 StatefulWidgets 是一种特殊的 widget,它会生成 State 对象,用于保存状态。看看这个基本的例子,它使用了前面提到的RaisedButton

class Counter extends StatefulWidget {
  // This class is the configuration for the state. It holds the
  // values (in this case nothing) provided by the parent and used by the build
  // method of the State. Fields in a Widget subclass are always marked "final".

  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      // This call to setState tells the Flutter framework that
      // something has changed in this State, which causes it to rerun
      // the build method below so that the display can reflect the
      // updated values. If you change _counter without calling
      // setState(), then the build method won't be called again,
      // and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called,
    // for instance, as done by the _increment method above.
    // The Flutter framework has been optimized to make rerunning
    // build methods fast, so that you can just rebuild anything that
    // needs updating rather than having to individually change
    // instances of widgets.
    return Row(
      children: <Widget>[
        RaisedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
        Text('Count: $_counter'),
      ],
    );
  }
}

效果是点击一下按钮计数+1

 

您可能想知道为什么 StatefulWidget 和 State 是独立的对象。在 Flutter 中,这两种类型的对象具有不同的生命周期。 Widget 是临时对象,用于构造应用当前状态的展示。而 State 对象在调用 build() 之间是持久的,以此来存储信息。

上面的示例接受用户输入并直接在其 build() 方法中直接使用结果。在更复杂的应用中,widget 层次不同的部分可能负责不同的关注点;例如,一个 widget 可能呈现复杂的用户界面,来收集像日期或位置这样特定的信息,而另一个 widget 可能使用该信息来改变整体的展现。

在 Flutter 中,widget 通过回调得到状态改变的通知,同时当前状态通知给其他 widget 用于显示。重定向这一流程的共同父级是 State,下面稍微复杂的示例显示了它在实践中的工作原理:

class CounterDisplay extends StatelessWidget {
  CounterDisplay({this.count});

  final int count;

  @override
  Widget build(BuildContext context) {
    return Text('Count: $count');
  }
}

class CounterIncrementor extends StatelessWidget {
  CounterIncrementor({this.onPressed});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: onPressed,
      child: Text('Increment'),
    );
  }
}

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),
    ]);
  }
}

注意创建两个新的无状态 widget 的方式,它清楚地分离了 显示 计数器(CounterDisplay)和 改变 计数器(CounterIncrementor)。尽管最终结果与前面的示例相同,但是责任的分离将更大的复杂性封装在各个 widget 中,保证了父级的简单性。

有关更多信息,请参阅:

如上所说其实效果是一样的,只是对两个组件进行了各自widget的分离

 

整合在一起

下面是一个更完整的示例,汇集了上面介绍的概念:假定一个购物应用显示各种出售的产品,并在购物车中维护想购买的物品。首先定义一个用于展示的类,ShoppingListItem

class Product {
  const Product({this.name});
  final String name;
}

typedef void CartChangedCallback(Product product, bool inCart);

class ShoppingListItem extends StatelessWidget {
  ShoppingListItem({this.product, this.inCart, this.onCartChanged})
      : super(key: ObjectKey(product));

  final Product product;
  final bool inCart;
  final CartChangedCallback onCartChanged;

  Color _getColor(BuildContext context) {
    // The theme depends on the BuildContext because different parts of the tree
    // can have different themes.  The BuildContext indicates where the build is
    // taking place and therefore which theme to use.

    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)),
    );
  }
}

ShoppingListItem widget 遵循无状态 widget 的通用模式。它将构造函数中接受到的值存储在 final 成员变量中,然后在 build() 函数中使用它们。例如,inCart 布尔值使两种样式进行切换:一个使用当前主题的主要颜色,另一个使用灰色。

当用户点击列表中的一项,widget 不会直接改变 inCart 的值,而是通过调用从父 widget 接收到的 onCartChanged 函数。这种方式可以在组件的生命周期中存储状态更长久,从而使状态持久化。甚至,widget 传给 runApp() 的状态可以持久到整个应用的生命周期。

当父级接收到 onCartChanged 回调时,父级会更新其内部状态,从而触发父级重建并使用新的 inCart 值来创建新的 ShoppingListItem 实例。尽管父级在重建时会创建 ShoppingListItem 的新实例,但是由于框架会将新构建的 widget 与先前构建的 widget 进行比较,仅将差异应用于底层的 RenderObject,这种代价是很小的。

这里有一个示例展示父组件是如何存储可变状态:

class ShoppingList extends StatefulWidget {
  ShoppingList({Key key, this.products}) : super(key: key);

  final List<Product> products;

  // The framework calls createState the first time a widget appears at a given
  // location in the tree. If the parent rebuilds and uses the same type of
  // widget (with the same key), the framework re-uses the State object
  // instead of creating a new State object.

  @override
  _ShoppingListState createState() => _ShoppingListState();
}

class _ShoppingListState extends State<ShoppingList> {
  Set<Product> _shoppingCart = Set<Product>();

  void _handleCartChanged(Product product, bool inCart) {
    setState(() {
      // When a user changes what's in the cart, you need to change
      // _shoppingCart inside a setState call to trigger a rebuild.
      // The framework then calls build, below,
      // which updates the visual appearance of the app.

      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(),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    title: 'Shopping App',
    home: ShoppingList(
      products: <Product>[
        Product(name: 'Eggs'),
        Product(name: 'Flour'),
        Product(name: 'Chocolate chips'),
      ],
    ),
  ));
}

ShoppingList 类继承自 StatefulWidget,这意味着这个 widget 存储着可变状态。当 ShoppingList 首次插入到 widget 树中时,框架调用 createState() 函数来创建 _ShoppingListState 的新实例,以与树中的该位置相关联。(注意,State 的子类通常以下划线开头进行命名,表示它们的实现细节是私有的)当该 widget 的父 widget 重建时,父 widget 首先会创建一个 ShoppingList 的实例,但是框架会复用之前创建的 _ShoppingListState,而不会重新调用 createState

为了访问当前 ShoppingList 的属性,_ShoppingListState 可以使用它的 widget 属性。当父组件重建一个新的 ShoppingList 时,_ShoppingListState 会使用新的 widget 值来创建。如果希望在 widget 属性更改时收到通知,则可以重写 didUpdateWidget() 函数,该函数将 oldWidget 作为参数传递,以便将 oldWidget 与当前 widget。

当处理 onCartChanged 回调时,_ShoppingListState 通过增加或删除 _shoppingCart 中的产品来改变其内部状态。为了通知框架它改变了它的内部状态,需要调用 setState()。调用 setState() 会将该 widget 标记为“dirty”(脏的),并且计划在下次应用需要更新屏幕时重新构建它。如果在修改 widget 的内部状态后忘记调用 setState,框架将不知道这个 widget 是“dirty”(脏的),并且可能不会调用 widget 的 build() 方法,这意味着用户界面可能不会更新以展示新的状态。通过以这种方式管理状态,你不需要编写用于创建和更新子 widget 的单独代码。相反,你只需实现 build 函数,它可以处理这两种情况。

效果是点一下改变下效果,

 

 

响应 widget 的生命周期事件

在 StatefulWidget 上调用 createState() 之后,框架将新的状态对象插入到树中,然后在状态对象上调用 initState()State 的子类可以重写 initState 来完成只需要发生一次的工作。例如,重写 initState 来配置动画或订阅平台服务。实现 initState 需要调用父类的 super.initState 方法来开始。

当不再需要状态对象时,框架会调用状态对象上的 dispose() 方法。可以重写dispose 方法来清理状态。例如,重写 dispose 以取消计时器或取消订阅平台服务。实现 dispose 时通常通过调用 super.dispose 来结束。

有关更多信息,请参阅 State

Keys

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

Key 在构建相同类型 widget 的多个实例时很有用。例如,ShoppingList widget,它只构建刚刚好足够的 ShoppingListItem 实例来填充其可见区域:

  • 如果没有 key,当前构建中的第一个条目将始终与前一个构建中的第一个条目同步,在语义上,列表中的第一个条目如果滚动出屏幕,那么它应该不会再在窗口中可见。

  • 通过给列表中的每个条目分配为“语义” key,无限列表可以更高效,因为框架将通过相匹配的语义 key 来同步条目,并因此具有相似(或相同)的可视外观。此外,语义上同步条目意味着在有状态子 widget 中,保留的状态将附加到相同的语义条目上,而不是附加到相同数字位置上的条目。

有关更多信息,请参阅 Key API。

全局 key

全局 key 可以用来标识唯一子 widget。全局 key 在整个 widget 结构中必须是全局唯一的,而不像本地 key 只需要在兄弟 widget 中唯一。由于它们是全局唯一的,因此可以使用全局 key 来检索与 widget 关联的状态。

有关更多信息,请参阅 GlobalKey API。

相关推荐
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本套视频目标从UI分类开始讲起,结合网易新闻功能点实例讲解每一大类组件布局的使用。最后以一个完整的仿网易新闻的UI实战讲解,教会大家如何合理选择UI组件,并且使用组件快速实现我们的需求,完成一个完整的Flutter项目。 </p> <p> <br /> </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858">https://edu.csdn.net/course/detail/26858</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页