Flutter中如何使用controller

在Flutter中，如何使用controller来管理Widget的状态？比如TextEditingController或ScrollController，具体应该怎么初始化、监听值变化以及在dispose时释放资源？能否提供一个完整的使用示例，说明常见的使用场景和注意事项？

2 回复

在Flutter中，使用controller（如TextEditingController）需先创建实例，绑定到widget（如TextField），通过controller.text读写值，最后在dispose中释放资源，避免内存泄漏。

更多关于Flutter中如何使用controller的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，Controller用于控制和管理特定Widget的状态或行为。常见的Controller包括：

1. TextEditingController - 文本输入控制

TextEditingController _controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return TextField(
    controller: _controller,
    onChanged: (text) {
      print("当前文本: $text");
    },
  );
}

// 获取文本
String text = _controller.text;

// 设置文本
_controller.text = "新文本";

// 清空文本
_controller.clear();

@override
void dispose() {
  _controller.dispose(); // 必须释放资源
  super.dispose();
}

2. ScrollController - 滚动控制

ScrollController _scrollController = ScrollController();

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    print("滚动位置: ${_scrollController.offset}");
  });
}

ListView(
  controller: _scrollController,
  // ...
)

// 滚动到指定位置
_scrollController.animateTo(
  500.0,
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
);

3. PageController - 页面控制

PageController _pageController = PageController(initialPage: 0);

PageView(
  controller: _pageController,
  children: [Page1(), Page2(), Page3()],
)

// 跳转到指定页面
_pageController.animateToPage(
  2,
  duration: Duration(milliseconds: 500),
  curve: Curves.ease,
);

4. AnimationController - 动画控制

AnimationController _animationController;

@override
void initState() {
  super.initState();
  _animationController = AnimationController(
    vsync: this,
    duration: Duration(seconds: 2),
  );
}

// 启动动画
_animationController.forward();

// 重置动画
_animationController.reset();

// 反向播放
_animationController.reverse();

使用要点：

  1. 必须调用dispose() 释放资源
  2. 在initState()中初始化，避免build中重复创建
  3. 使用SingleTickerProviderStateMixin 配合AnimationController
  4. 监听状态变化 通过addListener()

根据具体需求选择合适的Controller类型。

回到顶部