You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter实现Inshorts新闻App滑动效果及PageView底部启动问题

Flutter实现Inshorts新闻App滑动切换效果:PageView无法从底部加载页面

我需要在Flutter中实现类似Inshorts新闻App的滑动切换动画,目前已经编写了对应的PageTransformer代码,但遇到一个问题:无法让PageView从底部开始加载页面。尝试修改了部分代码逻辑,但问题仍未解决。

以下是我编写的代码:

import 'dart:math' as math;

// 自定义PageTransformer抽象类(或使用第三方包中的对应类)
abstract class PageTransformer {
  Widget transform(Widget child, TransformInfo info);
}

class TransformInfo {
  final double? position;
  TransformInfo({this.position});
}

class InshortsPageTransformer extends PageTransformer {
  @override
  Widget transform(Widget child, TransformInfo info) {
    double position = info.position ?? 0;
    double rotation = position * 0.2;
    double scale = math.max(0.8, 1 - position.abs());
    if (position < -1) {
      rotation = 0;
      child = Opacity(
        opacity: 0,
        child: child,
      );
    } else if (position <= 0) {
      child = Opacity(
        opacity: 1,
        child: child,
      );
      child = Transform(
        transform: Matrix4.identity()
          ..setEntry(3, 2, 0.001)
          ..rotateY(rotation)
          ..scale(scale),
        alignment: Alignment.center,
        child: child,
      );
    } else if (position <= 1) {
      child = Opacity(
        opacity: 1,
        child: child,
      );
      child = Transform(
        transform: Matrix4.identity()
          ..setEntry(3, 2, 0.001)
          ..rotateY(rotation)
          ..scale(scale),
        alignment: Alignment.center,
        child: child,
      );
    } else {
      rotation = 0;
      child = Opacity(
        opacity: 0,
        child: child,
      );
    }

    return Transform(
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001)
        ..rotateY(rotation)
        ..scale(scale),
      alignment: Alignment.center,
      child: child,
    );
  }
}

class ScaleAndFadeTransformer extends PageTransformer {
  final double _scale;
  final double _fade;

  ScaleAndFadeTransformer({double fade = 0.3, double scale = 0.8})
      : _fade = fade,
        _scale = scale;

  @override
  Widget transform(Widget item, TransformInfo info) {
    double position = info.position ?? 0;
    double scaleFactor = (1 - position.abs()) * (1 - _scale);
    double fadeFactor = (1 - position.abs()) * (1 - _fade);
    double opacity = _fade + fadeFactor;
    double scale = _scale + scaleFactor;
    return Opacity(
      opacity: opacity,
      child: Transform.scale(
        scale: scale,
        child: item,
      ),
    );
  }
}

内容的提问来源于stack exchange,提问作者ShikharVayuz

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.31 17:35:14