滚动到特定的小部件Flutter web

Question

我正在创建一个简单的web投资组合，以便在扑动中进行实践。我想知道其他网站是如何工作的，当我们点击home/about/contact按钮时，网页滚动到那个特定的小部件。

我试着这样做，但没有得到它如何实现这个功能

代码示例将是有帮助的，将被赞赏为upvote。

Answer 1

您可以为要滚动到的小部件提供全局键如

final dataKey = new GlobalKey(); 

将其分配给小部件

Container(key:dataKey);

，然后在按下的按钮上写入以下代码

onPressed: (){
Scrollable.ensureVisible(dataKey.currentContext);
}

Answer 2

你可以使用这个包scroll_to_id

下面是github@yusukeinouehatchout

做的一个例子

import 'package:flutter/material.dart';
import 'package:scroll_to_id/scroll_to_id.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
ScrollToId? scrollToId;
final ScrollController scrollController = ScrollController();
List<Color> _colorList = [
Colors.green,
Colors.red,
Colors.yellow,
Colors.blue
];
void _scrollListener() {
print(scrollToId!.idPosition());
}
@override
void initState() {
super.initState();
/// Create ScrollToId instance
scrollToId = ScrollToId(scrollController: scrollController);
scrollController.addListener(_scrollListener);
}
/// Generate 10 Container
/// Case [Axis.horizontal] set buildStackHorizontal() to body
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Scroll to id',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Scroll to id'),
),
body: buildStackVertical(),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.navigate_next),
onPressed: () {
scrollToId!.animateToNext(
duration: Duration(milliseconds: 500), curve: Curves.ease);
},
),
),
);
}
/// [Axis.vertical]
/// https://raw.githubusercontent.com/wiki/yusukeinouehatchout/scroll_to_id/gif/scroll_to_id_vertical.gif
Widget buildStackVertical() {
return Stack(
alignment: Alignment.topRight,
children: [
InteractiveScrollViewer(
scrollToId: scrollToId,
children: List.generate(10, (index) {
return ScrollContent(
id: '$index',
child: Container(
alignment: Alignment.center,
width: double.infinity,
height: 200,
child: Text(
'$index',
style: TextStyle(color: Colors.white, fontSize: 50),
),
color: _colorList[index % _colorList.length],
),
);
}),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 3),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(10, (index) {
return GestureDetector(
child: Container(
width: 100,
alignment: Alignment.center,
height: 50,
child: Text(
'$index',
style: TextStyle(color: Colors.white),
),
color: _colorList[index % _colorList.length],
),
onTap: () {
/// scroll with animation
scrollToId!.animateTo('$index',
duration: Duration(milliseconds: 500),
curve: Curves.ease);
/// scroll with jump
// scrollToId.jumpTo('$index');
},
);
}),
),
)
],
);
}
/// [Axis.horizontal]
/// https://raw.githubusercontent.com/wiki/yusukeinouehatchout/scroll_to_id/gif/scroll_to_id_horizontal.gif
Widget buildStackHorizontal() {
return Column(
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 3),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: List.generate(10, (index) {
return Expanded(
child: GestureDetector(
child: Container(
alignment: Alignment.center,
height: 80,
child: Text(
'$index',
style: TextStyle(color: Colors.white),
),
color: _colorList[index % _colorList.length],
),
onTap: () {
/// scroll with animation
scrollToId!.animateTo('$index',
duration: Duration(milliseconds: 500),
curve: Curves.ease);
/// scroll with jump
// scrollToId.jumpTo('$index');
},
),
);
}),
),
),
Expanded(
child: InteractiveScrollViewer(
scrollToId: scrollToId,
scrollDirection: Axis.horizontal,
children: List.generate(10, (index) {
return ScrollContent(
id: '$index',
child: Container(
alignment: Alignment.center,
width: 200,
child: Text(
'$index',
style: TextStyle(color: Colors.white, fontSize: 50),
),
color: _colorList[index % _colorList.length],
),
);
}),
),
),
],
);
}
}

Answer 3

我遇到了同样的问题，但我设法用这个包解决了它，它很有用，很容易scroll_to_index

• 定义一个listview控制器

  ListView( controller: controller, )

• 那么你只需要用AutoScrollTag像

  一样包裹屏幕中的元素

  AutoScrollTag(
  key: ValueKey(index),
  controller: controller,
  index: index,
  child: YOUR_CHILD_HERE
  

  )

• 最终滚动到我们的元素，像这样

  controller.scrollToIndex(index, preferPosition: AutoScrollPosition.begin)