Flutter交互并使用小工具管理其状态widget的state详解

更新时间：2022年12月23日 10:05:57 作者：黎燃

这篇文章主要为大家介绍了Flutter交互并使用小工具管理其状态widget的state详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

交互

当小部件的状态发生变化时，状态对象调用setState（）来告诉框架重新绘制小部件创建一个自定义的有状态小部件。将用一个自定义的有状态小部件替换两个无状态小部件-红色实心星形图标及其旁边的数字计数-小部件管理一行，其中包含两个子小部件：IconButton和Text。

class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => new _FavoriteWidgetState();
}

要创建自定义的有状态小部件，需要创建两个类：StatefulWidget和State state对象包含小部件的状态和build（）方法。

要实现自定义有状态小部件，需要创建两个类：定义从StatefulWidget继承的小部件类包含小部件状态并定义小部件build（）方法的类。它继承自State 本节介绍如何为Lakes应用程序构建名为FavoriteWidget的有状态Widget。第一步是选择如何管理FavoriteWidgets的状态。

步骤1：确定哪个对象管理小部件的状态小部件的状态可以通过多种方式进行管理，但在我们的示例中，小部件本身（FavoriteWidget）将管理自己的状态。在本例中，切换星形图标是一个独立的操作，不会影响父窗口小部件或其他用户界面，因此小部件可以在内部处理自己的状态。

步骤2：创建StatefulWidget的子类 FavoriteWidget类管理自己的状态，因此它重写createState（）以创建状态对象。框架在构建小部件时调用createState（）。createState（）创建了FavoriteWidgetState的一个实例，将在下一步中实现它。

new Icon(
  Icons.star,
  color: Colors.red[500],
),
new Text('41')

小工具管理其状态

有时，小部件最好在内部管理其状态。例如，当ListView的内容超过渲染框时，ListView会自动滚动。大多数使用ListView的开发人员不希望管理ListView的滚动行为，因此ListView本身管理其滚动偏移。

class TapboxA extends StatefulWidget {
  TapboxA({Key key}) : super(key: key);
  @override
  _TapboxAState createState() => new _TapboxAState();
}
class _TapboxAState extends State<TapboxA> {
  bool _active = false;
  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _handleTap,
      child: new Container(
        child: new Center(
          child: new Text(
            _active ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: _active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
}

_TapboxAState类：管理TapboxA的状态 Definition_Active：确定框当前颜色的布尔值定义_当框被单击时，handleTap（）函数会更新，并调用setState（）更新UI

widget的state

实现小部件的所有交互行为对于父窗口小部件，管理状态并告诉其子窗口小部件何时更新通常是最有意义的。例如，IconButton允许将图标视为可单击的按钮。IconButton是一个无状态小部件，因为我们认为父小部件需要知道按钮是否被单击以采取相应的操作。在下面的示例中，TapboxB通过回调将其状态导出到其父级。因为TapboxB不管理任何状态，所以它的父类是StatelessWidget。

ParentWidgetState类：管理TapboxB_活动状态 Implementation_ HandleTapboxChanged（），单击框时调用的方法当状态更改时，调用setState（）更新UI TapboxB类：继承StatelessWidget类，因为所有状态都由其父控件处理当检测到单击时，它会通知父控件

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => new _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;
  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapboxB(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

混合管理

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => new _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;
  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapboxC(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

对于某些小部件，mashup管理方法是最有意义的。在这种情况下，有状态小部件管理一些状态，而父小部件管理其他状态。在TapboxC示例中，单击时，框周围会出现一个深绿色边框。单击时，边框将消失，框的颜色将更改。TapboxC将_活动状态导出到其父控件，但内部管理_突出显示状态。此示例有两个状态对象_PrentWidgetState和_TapboxCState

class _TapboxCState extends State<TapboxC> {
  bool _highlight = false;
  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

ParentWidgetState对象：管理_活动状态 Implementation HandleTapboxChanged（），单击该框时调用当单击框并_调用setState（）以在活动状态更改时更新UI时 _TapboxCState对象：管理_突出显示状态。手势检测器监听所有敲击事件。当用户单击时，它会添加高亮显示（深绿色边框）；当用户释放时，高亮显示将被删除。按下、抬起或取消时更新突出显示状态，调用setState（）更新UI。单击时，状态更改将传递给父控件

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }
  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

另一个实现可能会在保持活动状态的同时将突出显示的状态导出到父窗口小部件。活动状态是内部的，但如果你要求某人使用TapBox，他们可能会抱怨这没有多大意义。开发人员只关心盒子是否处于活动状态。开发人员可能不关心突出显示是如何管理的，而是倾向于让TapBox处理这些细节。

以上就是Flutter交互并使用小工具管理其状态widget的state详解的详细内容，更多关于Flutter交互状态管理widget state的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Android context源码详解及深入分析
这篇文章主要介绍了Android context源码详解及深入分析的相关资料,这里对Android Context 如何使用进行了详细介绍，需要的朋友可以参考下
2017-01-01
Android控件之ToggleButton的使用方法
本篇文章介绍了，Android控件之ToggleButton的使用方法。需要的朋友参考下
2013-04-04
Android使用多线程进行网络聊天室通信
这篇文章主要为大家详细介绍了Android使用多线程进行网络聊天室通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
Android学习之介绍Binder的简单使用
BInder方面的资料虽然感觉看的比较多，但是真正用的时候才发现有很多地方模棱两棵的，所以，打算用一个实例再来巩固一下binder的使用方法。这篇文章主要介绍了Android中Binder的简单使用，文中给出详细的示例代码,需要的朋友可以参考下
2016-12-12
Android TextWatcher三个回调以及监听EditText的输入案例详解
这篇文章主要介绍了Android TextWatcher三个回调以及监听EditText的输入案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08
Android12 蓝牙适配的实现步骤
本文主要介绍了Android12 蓝牙适配的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
Android加载长图的多种方案分享
这篇文章主要介绍了Android加载长图的多种方案分享，帮助大家更好的理解和学习使用Android开发，感兴趣的朋友可以了解下
2021-04-04
Android实现从本地图库/相机拍照后裁剪图片并设置头像
玩qq或者是微信的盆友都知道，这些聊天工具里都要设置头像，一般情况下大家的解决办法是从本地图库选择图片或是从相机拍照，然后根据自己的喜爱截取图片，接下来通过本文给大家介绍Android实现从本地图库/相机拍照后裁剪图片并设置头像，需要的朋友参考下
2016-02-02
Android视频/音频缓存框架AndroidVideoCache（Okhttp）详解
这篇文章主要为大家详细介绍了Android视频、音频缓存框架AndroidVideoCache，实现边下边播功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
解析Android开发优化之:软引用与弱引用的应用
Java从JDK1.2版本开始，就把对象的引用分为四种级别，从而使程序能更加灵活的控制对象的生命周期。这四种级别由高到低依次为：强引用、软引用、弱引用和虚引用，本篇文章重点介绍一下软引用和弱引用
2013-05-05