gpt4 book ai didi

Flutter:为用户滚动增加摩擦,而不是 Spring

转载 作者:行者123 更新时间:2023-12-03 14:44:53 27 4
gpt4 key购买 nike

我有一个带有自定义滚动物理类的 ListView ,该类定义了我想要的列表的滚动和 Spring 效果。我已经设法按照我想要的方式设置 Spring 阻尼,但我似乎找不到任何设置来使用户的阻力变重。
我的意思是当用户拖动 时我想让列表感觉它有张力 所以用户需要比他们平时拖得更远,我将使用自定义滚动物理处理列表中下一个项目的移动。
我希望它感觉像在火车站的转弯风格。你的 body 会承受很多压力,一旦你通过转弯,风格就会重置为中心。
列表:

child: ListView.builder(
cacheExtent: MediaQuery.of(context).size.height * 2,
padding: EdgeInsets.only(top: 0),
itemExtent: constraints.maxHeight -
SizeConfig.blockSizeVertical * 40,
itemCount: channelList?.length ?? 0,
controller: _controller,
physics: _physics,
itemBuilder: (BuildContext context, int index) =>
buildList(index),
),
自定义滚动类:
import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';

class CustomScrollPhysics extends ScrollPhysics {
final double itemDimension;
static final SpringDescription customSpring =
SpringDescription.withDampingRatio(
mass: 4,
stiffness: 150.0,
ratio: 2.0,
);

@override
double get dragStartDistanceMotionThreshold => 40;

@override
double get minFlingVelocity => double.infinity;

@override
double get maxFlingVelocity => double.infinity;

@override
double get minFlingDistance => double.infinity;

CustomScrollPhysics({this.itemDimension, ScrollPhysics parent})
: super(parent: parent);

@override
CustomScrollPhysics applyTo(ScrollPhysics ancestor) {
return CustomScrollPhysics(
itemDimension: itemDimension, parent: buildParent(ancestor));
}

double _getPage(ScrollPosition position) {
return position.pixels / itemDimension;
}

double _getPixels(double page) {
return page * itemDimension;
}

double _getTargetPixels(
ScrollPosition position, Tolerance tolerance, double velocity) {
double page = _getPage(position);
if (velocity < -tolerance.velocity) {
page -= 0.01;
} else if (velocity > tolerance.velocity) {
page += 0.01;
}
return _getPixels(page.roundToDouble());
}

@override
Simulation createBallisticSimulation(
ScrollMetrics position, double velocity) {
// If we're out of range and not headed back in range, defer to the parent
// ballistics, which should put us back in range at an item boundary.
if ((velocity <= 0.0 && position.pixels <= position.minScrollExtent) ||
(velocity >= 0.0 && position.pixels >= position.maxScrollExtent))
return super.createBallisticSimulation(position, (velocity));
final Tolerance tolerance = this.tolerance;
final double target = _getTargetPixels(position, tolerance, velocity);
if (target != position.pixels) {
return ScrollSpringSimulation(
customSpring, position.pixels, target, velocity,
tolerance: tolerance);
}
return null;
}

@override
bool get allowImplicitScrolling => false;
}

/// Note: This Widget creates the ballistics model for a snap-to physics in a ListView.
/// Normally you might use the ListViewScrollView, however that widget currently
/// has a bug that prevents onTap detection of child widgets.

该列表以屏幕为中心,大约为 View 高度的 60%。

最佳答案

如果您一次只需要在列表中显示一个项目并且项目的渲染适合屏幕,请使用 PageView小部件可能会给您带来您想要的效果。

关于Flutter:为用户滚动增加摩擦,而不是 Spring ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64294731/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com