dart - 如何知道用户是否看到了颤振图像
问题描述
我Image
在可滚动屏幕中有一个组件。刚开始屏幕打开时看不到图像,但需要向下滚动才能查看。
如何确保用户在滚动到图像后完全看到图像?我想计算用户的形象印象。
你如何在颤振中实现这一点?
解决方案
我没有太多关于你的代码的信息,所以这就是我解决它的方法。仅当图像在屏幕上完全可见时才会计算展示次数,您可以使用_count =
表达式更改它。我用简单Container
的Image
.
先看看这个截图。
代码
void main() => runApp(MaterialApp(home: HomePage()),);
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
ScrollController _scrollController;
double _heightListTile = 56, _heightContainer = 200, _oldOffset = 0, _heightBox, _initialAdd;
int _initialCount, _count, _previousCount = 0, _itemsInList = 4;
@override
void initState() {
super.initState();
_heightBox = ((_itemsInList) * _heightListTile) + _heightContainer;
_scrollController = ScrollController();
_scrollController.addListener(() {
double offset = _scrollController.offset;
if (offset >= _oldOffset) {
_oldOffset = offset;
_count = _initialCount + (offset + _initialAdd) ~/ _heightBox;
if (_count != _previousCount) setState(() {});
_previousCount = _count;
}
});
Timer.run(() {
bool isIos = Theme.of(context).platform == TargetPlatform.iOS;
var screenHeight = MediaQuery.of(context).size.height - (isIos ? 100 : 80); // for non notches phone use 76 instead of 100 (it's the height of status and navigation bar)
_initialCount = screenHeight ~/ _heightBox;
_initialAdd = screenHeight % _heightBox;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(_count == null ? "Let's count" : "Images shown = ${_count}")),
body: ListView.builder(
itemCount: 100,
controller: _scrollController,
itemBuilder: (context, index) {
if (index == 0) return Container();
if (index != 0 && index % (_itemsInList + 1) == 0) {
return Container(
height: _heightContainer,
alignment: Alignment.center,
color: Colors.blue[(index * 20) % 1000],
child: Text("Image #${(index + 1) ~/ 5}"),
);
}
return SizedBox(height: _heightListTile, child: ListTile(title: Text("Item ${index}")));
},
),
);
}
}
推荐阅读
- android - 蓝牙与 DisplayOnly 配对不出现密码框
- html - Chrome 剪切长页面
- node.js - NodeJS 注册 - 用户名区分大小写(唯一字段)
- intellij-idea - 无法解析另一个模块中的类的符号
- python - Google Groups Settings API 400“无效值”错误
- docker - docker 容器是如何构建的?
- c++ - 为什么数组中对象的析构函数在被另一个对象替换时不被调用?
- php - PHP - 获取不大于下一个数组值的数组值
- c# - WPF子菜单覆盖而不是展开
- groovy - 使用 groovy 脚本的 Jenkins 管道:执行 sh 命令时出错