Flutter-从使用小部件中控制器的小部件外部运行函数

Question

我写了一个函数，它将SingleChildScrollView返回到顶部。我想在这个小部件外部的按钮上执行这个功能，我应该如何实现？

这是我当前的代码。

时间轴.dart

import 'package:flutter/material.dart';
import 'package:social_app/functions/functions.dart';

class TimeLinePage extends StatelessWidget {
const TimeLinePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final ScrollController timeLineScrollController = ScrollController();
void timeLineJumpToTop() {
jumpToTop(timeLineScrollController);
}
...

函数。dart

import 'package:flutter/material.dart';
void jumpToTop(ScrollController scrollController) {
scrollController.animateTo(0.0,
duration: const Duration(milliseconds: 1000), curve: Curves.easeInOutQuart);
}

谢谢。

Answer 1

您可以创建自定义控制器并在父窗口小部件中使用它

typedef JumpToTopCallback = void Function();
class TimeLinePageController{
TimeLinePageController();
JumpToTopCallback? _onJumpToTopCallBack;
set jumpToTopCallBack(JumpToTopCallback? onJumpToTop){
_onJumpToTopCallBack = onJumpToTop;
}
void jumpToTop(){
_onJumpToTopCallBack?.call();
}
}

class TimeLinePage extends StatefulWidget {
const TimeLinePage({
this.controller,
Key? key
}) : super(key: key);
final TimeLinePageController? controller;
@override
TimeLinePageState createState() => TimeLinePageState();
}
class TimeLinePageState extends State<TimeLinePage> {
final ScrollController _scrollController = ScrollController();
@override
void initState() {
widget.controller?.jumpToTopCallBack = onJumpToTop;
super.initState();
}

@override
void dispose() {
widget.controller?.jumpToTopCallBack = null;
_scrollController.dispose();
super.dispose();
}
void onJumpToTop(){
_scrollController.animateTo(0.0,
duration: const Duration(milliseconds: 1000), curve: Curves.easeInOutQuart);
}

@override
Widget build(BuildContext context) {

return SingleChildScrollView(
controller: _scrollController
child: ....
);
}
}

父widet可以调用控制器方法。

class ParentWidget ....
{
final _timeLinePageController = TimeLinePageController();

@override
Widget build(BuildContext context) {
return TimeLinePage(
controller: _timeLinePageController
)
);
void jumpTo(){
_timeLinePageController.jumpToTop();
}
}

Answer 2

您可以将控制器添加到可滚动的小部件中，然后跳到顶部滚动此小部件。下面是这个例子。

class TimeLinePage extends StatefulWidget {
const TimeLinePage({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => _TimeLinePageState();
}
class _TimeLinePageState extends State<TimeLinePage> {
ScrollController timeLineScrollController; // give this controller object to scrollview
@override
void initState() {
timeLineScrollController = ScrollController();
Future.delayed(const Duration(milliseconds: 1000), () {
WidgetsBinding.instance!.addPostFrameCallback((_) {
jumpToTop(timeLineScrollController);
});
});
super.initState();
}
@override
Widget build(BuildContext context) {}
}