dart - Flutter:向下滚动时移动顶部的固定元素
问题描述
我想知道当用户向下滚动页面时,Flutter 中是否可以将固定元素向上移动(换句话说,一旦垂直滚动到达目标位置,将其垂直向上移动)。
下面是 js 中的一个例子(见右边的“总结 1”框):
http://bigspotteddog.github.io/ScrollToFixed/
带有打印屏幕的示例:
任何想法?
解决方案
这应该可以使用sticky_headers插件来实现。
允许您将标题放置在可滚动内容上,这些标题将在滚动内容时粘在容器顶部。
这是一个关于如何实现此插件的简单示例:
import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blueGrey[900],
),
body: ListView.builder(
itemBuilder: (context, index) {
return StickyHeader(
header: Container(
height: 50.0,
color: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'Header #$index',
style: const TextStyle(color: Colors.white),
),
),
content: Column(
children: List<int>.generate(5, (index) => index)
.map((item) => Container(
height: 50,
color: Colors.grey[(item + 1) * 100],
))
.toList(),
),
);
},
),
);
}
}
推荐阅读
- .net - 我在 dotnet 项目上单独运行 ng build,然后出现“无法读取未定义的属性 'id'”错误
- r - 重塑网格中的数据并使用数据框名称填充列
- redux - 如何在 redux-persist 中等待 reducer 同步到磁盘
- django - django-rest 如何以正确的格式为前端返回序列化程序错误?
- swiftui - 在构建到设备 SwiftUI 时,我是否需要“PreviewProvider”才能使用 @ObservedObject
- python - python类方法,貌似语法错误
- html - 容器类没有被继承
- javascript - 如何避免我的 JSON 请求变成 Nonetype?
- python - 允许在 Jupyter notebook 中进行全盘访问
- zoom-sdk - Anguar 项目中的 Zoom 客户端 Web SDK 集成 - 无效签名错误