交互性 | Flutter 框架

如何修改您的应用以使其响应用户输入？在本教程中，您将为一个只包含非交互式组件的应用添加交互性。具体来说，您将通过创建一个管理两个无状态组件的自定义有状态组件来修改一个图标，使其可点击。

《构建布局教程》向您展示了如何创建以下截图的布局。

当应用首次启动时，星星是实心红色，表明该湖泊之前已被收藏。星星旁边的数字表示有 41 人收藏了该湖泊。完成本教程后，点击星星会取消其收藏状态，将实心星星替换为轮廓，并减少计数。再次点击会收藏该湖泊，绘制实心星星并增加计数。

为此，您将创建一个自定义组件，它包含星星和计数（它们本身也是组件）。点击星星会改变两个组件的状态，因此同一个组件应该管理它们。

您可以直接跳到《步骤 2：继承 StatefulWidget》中查看代码。如果您想尝试不同的状态管理方式，请跳至《管理状态》。

组件要么是有状态的，要么是无状态的。如果一个组件可以改变——例如，当用户与它交互时——它就是有状态的。

无状态组件永不改变。Icon、IconButton 和 Text 是无状态组件的例子。无状态组件继承 StatelessWidget。

有状态组件是动态的：例如，它可以响应用户交互触发的事件或接收到数据时改变其外观。Checkbox、Radio、Slider、InkWell、Form 和 TextField 是有状态组件的例子。有状态组件继承 StatefulWidget。

组件的状态存储在 State 对象中，将组件的状态与其外观分离。状态由可以改变的值组成，例如滑块的当前值或复选框是否被选中。当组件状态改变时，状态对象会调用 setState()，通知框架重新绘制组件。

在本节中，您将创建一个自定义有状态组件。您将用一个自定义有状态组件替换两个无状态组件（实心红色星星和旁边的数字计数），该自定义组件管理一个包含两个子组件的行：一个 IconButton 和一个 Text。

实现自定义有状态组件需要创建两个类

定义组件的 StatefulWidget 子类。
包含该组件状态并定义组件 build() 方法的 State 子类。

本节向您展示如何为 lakes 应用构建一个名为 FavoriteWidget 的有状态组件。设置完成后，您的第一步是选择如何管理 FavoriteWidget 的状态。

如果您已经按照《构建布局教程》构建了该应用，请跳到下一节。

确保您已经设置好您的环境。
创建一个新的 Flutter 应用.
将 lib/main.dart 文件替换为 main.dart。
将 pubspec.yaml 文件替换为 pubspec.yaml。
在您的项目中创建一个 images 目录，并添加 lake.jpg。

一旦您连接并启用了设备，或者启动了 iOS 模拟器（Flutter 安装的一部分）或 Android 模拟器（Android Studio 安装的一部分），您就可以开始了！

组件的状态可以通过多种方式管理，但在我们的示例中，组件本身，即 FavoriteWidget，将管理其自身状态。在本例中，切换星星是一个独立的操作，不影响父组件或 UI 的其余部分，因此组件可以在内部处理其状态。

在《管理状态》中了解更多关于组件和状态分离以及如何管理状态的信息。

FavoriteWidget 类管理其自身状态，因此它会覆盖 createState() 方法来创建一个 State 对象。框架在想要构建组件时会调用 createState()。在本例中，createState() 返回 _FavoriteWidgetState 的实例，您将在下一步中实现它。

dartclass FavoriteWidget extends StatefulWidget {
  const FavoriteWidget({super.key});

  @override
  State<FavoriteWidget> createState() => _FavoriteWidgetState();
}

_FavoriteWidgetState 类存储组件生命周期内可能改变的可变数据。当应用首次启动时，UI 显示一个实心红色星星，表明该湖泊处于“收藏”状态，并有 41 个赞。这些值存储在 _isFavorited 和 _favoriteCount 字段中

dartclass _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true;
  int _favoriteCount = 41;

该类还定义了一个 build() 方法，该方法创建一行，包含一个红色的 IconButton 和一个 Text。您使用 IconButton（而不是 Icon），因为它有一个 onPressed 属性，该属性定义了处理点击的回调函数（_toggleFavorite）。您将在下一步中定义该回调函数。

dartclass _FavoriteWidgetState extends State<FavoriteWidget> {
  // ···
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          padding: const EdgeInsets.all(0),
          child: IconButton(
            padding: const EdgeInsets.all(0),
            alignment: Alignment.center,
            icon: (_isFavorited
                ? const Icon(Icons.star)
                : const Icon(Icons.star_border)),
            color: Colors.red[500],
            onPressed: _toggleFavorite,
          ),
        ),
        SizedBox(width: 18, child: SizedBox(child: Text('$_favoriteCount'))),
      ],
    );
  }

  // ···
}

当 IconButton 被按下时调用的 _toggleFavorite() 方法会调用 setState()。调用 setState() 至关重要，因为它会告诉框架组件的状态已更改，并且应该重新绘制组件。setState() 的函数参数在这两种状态之间切换 UI

一个 star 图标和数字 41
一个 star_border 图标和数字 40

dartvoid _toggleFavorite() {
  setState(() {
    if (_isFavorited) {
      _favoriteCount -= 1;
      _isFavorited = false;
    } else {
      _favoriteCount += 1;
      _isFavorited = true;
    }
  });
}

将您的自定义有状态组件添加到应用 build() 方法中的组件树。首先，找到创建 Icon 和 Text 的代码并删除它。在相同位置，创建有状态组件

dartchild: Row(
  children: [
    // ...
    Icon(
      Icons.star,
      color: Colors.red[500],
    ),
    const Text('41'),
    const FavoriteWidget(),
  ],
),

就是这样！当您热重载应用时，星星图标现在应该响应点击。

如果您的代码无法运行，请在 IDE 中查找可能的错误。《调试 Flutter 应用》可能会有所帮助。如果您仍然无法找到问题，请对照 GitHub 上的交互式 lakes 示例检查您的代码。

如果您仍有疑问，请参阅开发者社区的任何一个频道。

本页的其余部分介绍了管理组件状态的几种方式，并列出了其他可用的交互式组件。

谁来管理有状态组件的状态？组件本身？父组件？两者都管理？还是另一个对象？答案是……视情况而定。有几种有效的方法可以使您的组件具有交互性。作为组件设计者，您根据对组件的使用预期来做出决定。以下是管理状态最常见的方式

组件管理自身状态
父组件管理组件的状态
混合搭配方法

您如何决定使用哪种方法？以下原则应该有助于您做出决定

如果所讨论的状态是用户数据，例如复选框的选中或未选中模式，或者滑块的位置，那么最好由父组件来管理状态。
如果所讨论的状态是美学方面的，例如动画，那么最好由组件本身来管理状态。

如果不确定，请从在父组件中管理状态开始。

我们将通过创建三个简单示例来展示不同的状态管理方式：TapboxA、TapboxB 和 TapboxC。这些示例都以类似的方式工作——每个都创建一个容器，当点击时，它会在绿色或灰色框之间切换。_active 布尔值决定颜色：绿色表示活跃，灰色表示非活跃。

这些示例使用 GestureDetector 来捕获 Container 上的活动。

有时，由组件在内部管理其状态是最有意义的。例如，当 ListView 的内容超出渲染框时，它会自动滚动。大多数使用 ListView 的开发者不想管理 ListView 的滚动行为，因此 ListView 本身管理其滚动偏移。

_TapboxAState 类

管理 TapboxA 的状态。
定义 _active 布尔值，它决定框的当前颜色。
定义 _handleTap() 函数，该函数在点击框时更新 _active 并调用 setState() 函数来更新 UI。
实现组件的所有交互行为。

dartimport 'package:flutter/material.dart';

// TapboxA manages its own state.

//------------------------- TapboxA ----------------------------------

class TapboxA extends StatefulWidget {
  const TapboxA({super.key});

  @override
  State<TapboxA> createState() => _TapboxAState();
}

class _TapboxAState extends State<TapboxA> {
  bool _active = false;

  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: _active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
        child: Center(
          child: Text(
            _active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

//------------------------- MyApp ----------------------------------

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter Demo')),
        body: const Center(child: TapboxA()),
      ),
    );
  }
}

通常，由父组件管理状态并告知其子组件何时更新是最有意义的。例如，IconButton 允许您将图标视为可点击按钮。IconButton 是一个无状态组件，因为我们认为父组件需要知道按钮是否已被点击，以便采取适当的操作。

在以下示例中，TapboxB 通过回调将其状态导出到其父级。由于 TapboxB 不管理任何状态，它继承 StatelessWidget。

ParentWidgetState 类

管理 TapboxB 的 _active 状态。
实现 _handleTapboxChanged()，这是点击框时调用的方法。
当状态改变时，调用 setState() 更新 UI。

TapboxB 类

继承 StatelessWidget，因为所有状态都由其父级处理。
当检测到点击时，它会通知父级。

dartimport 'package:flutter/material.dart';

// ParentWidget manages the state for TapboxB.

//------------------------ ParentWidget --------------------------------

class ParentWidget extends StatefulWidget {
  const ParentWidget({super.key});

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: TapboxB(active: _active, onChanged: _handleTapboxChanged),
    );
  }
}

//------------------------- TapboxB ----------------------------------

class TapboxB extends StatelessWidget {
  const TapboxB({super.key, this.active = false, required this.onChanged});

  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap() {
    onChanged(!active);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
        child: Center(
          child: Text(
            active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

对于某些组件，混合搭配方法最有意义。在这种情况下，有状态组件管理部分状态，而父组件管理状态的其他方面。

在 TapboxC 示例中，按下时，框周围会出现深绿色边框。松开时，边框消失，框的颜色改变。TapboxC 将其 _active 状态导出到其父级，但内部管理其 _highlight 状态。这个示例有两个 State 对象，_ParentWidgetState 和 _TapboxCState。

_ParentWidgetState 对象

管理 _active 状态。
实现 _handleTapboxChanged()，这是点击框时调用的方法。
当发生点击且 _active 状态改变时，调用 setState() 更新 UI。

_TapboxCState 对象

管理 _highlight 状态。
GestureDetector 监听所有点击事件。当用户按下时，它添加高亮（实现为深绿色边框）。当用户松开时，它移除高亮。
在按下、松开或取消点击时，以及 _highlight 状态改变时，调用 setState() 更新 UI。
在点击事件中，使用 widget 属性将该状态更改传递给父组件，以便其采取适当的操作。

dartimport 'package:flutter/material.dart';

//---------------------------- ParentWidget ----------------------------

class ParentWidget extends StatefulWidget {
  const ParentWidget({super.key});

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: TapboxC(active: _active, onChanged: _handleTapboxChanged),
    );
  }
}

//----------------------------- TapboxC ------------------------------

class TapboxC extends StatefulWidget {
  const TapboxC({super.key, this.active = false, required this.onChanged});

  final bool active;
  final ValueChanged<bool> onChanged;

  @override
  State<TapboxC> createState() => _TapboxCState();
}

class _TapboxCState extends State<TapboxC> {
  bool _highlight = false;

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

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

  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    widget.onChanged(!widget.active);
  }

  @override
  Widget build(BuildContext context) {
    // This example adds a green border on tap down.
    // On tap up, the square changes to the opposite state.
    return GestureDetector(
      onTapDown: _handleTapDown, // Handle the tap events in the order that
      onTapUp: _handleTapUp, // they occur: down, up, tap, cancel
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: widget.active ? Colors.lightGreen[700] : Colors.grey[600],
          border: _highlight
              ? Border.all(color: Colors.teal[700]!, width: 10)
              : null,
        ),
        child: Center(
          child: Text(
            widget.active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

另一种实现方式可能是将高亮状态导出到父级，同时保持活跃状态在内部，但如果您让某人使用那个点击框，他们可能会抱怨这没有太大意义。开发者关心框是否活跃。开发者可能不关心高亮是如何管理的，并且更倾向于点击框自行处理这些细节。

Flutter 提供了各种按钮和类似的交互式组件。这些组件大多实现了 Material Design 指南，该指南定义了一套具有明确 UI 风格的组件。

如果您愿意，可以使用 GestureDetector 为任何自定义组件构建交互性。您可以在《管理状态》中找到 GestureDetector 的示例。在 Flutter Cookbook 中的食谱《处理点击》中了解更多关于 GestureDetector 的信息。

当您需要交互性时，使用预制组件是最简单的。以下是部分列表

以下资源可能有助于您为应用添加交互性。

《手势》，Flutter Cookbook 中的一个章节。

处理手势: 如何创建按钮并使其响应输入。
Flutter 中的手势: Flutter 手势机制的描述。
Flutter API 文档: 所有 Flutter 库的参考文档。
Wonderous 应用运行应用，代码库: 具有自定义设计和引人入胜交互的 Flutter 演示应用。
Flutter 的分层设计（视频）: 此视频包含有关有状态和无状态组件的信息。由 Google 工程师 Ian Hickson 演示。

此页面内容有帮助吗？

感谢你的反馈！

提供详情

感谢你的反馈！请告诉我们如何改进。

提供详情

除非另有说明，本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2025 年 5 月 19 日。查看源文件或报告问题。

为您的 Flutter 应用添加交互性

有状态和无状态组件

创建有状态组件

步骤 0：准备工作

步骤 1：决定哪个对象管理组件的状态

步骤 2：继承 StatefulWidget

步骤 3：继承 State

步骤 4：将有状态组件插入组件树

遇到问题？

状态管理

组件管理自身状态

父组件管理组件的状态

混合搭配方法

其他交互式组件

标准组件

Material 组件

资源