如何在不使当前视图颤动的情况下实现这种幻灯片效果

Posted 2023-02-23

【中文标题】如何在不使当前视图颤动的情况下实现这种幻灯片效果

【英文标题】：how to achieve this kind of slide effect without leaving the current view in flutter

【发布时间】：2019-10-02 09:40:58

【问题描述】：

我是新来的，所以我发现很难掌握动画，任何人都可以帮我在两个列表视图之间添加一个过渡效果提前谢谢：v 这是我的代码，结果是我的目标 代码正在处理中

class Home extends StatefulWidget 
  Home(Key key) : super(key: key);

  _HomeState createState() => _HomeState();


class _HomeState extends State<Home> 
  @override
  Widget build(BuildContext context) 
    int pageIndex = 1;
    Widget firstPage = ListView.builder(
      itemCount: 5,
      itemBuilder: (BuildContext context, int index) 
        return ListTile(
          title: Text("item $index"),
          onTap: () => setState(() => pageIndex = 2),
        );
      ,
    );
    Widget secondePage = ListView.builder(
      itemCount: 5,
      itemBuilder: (BuildContext context, int index) 
        return ListTile(
          title: Text("SubItem $index"),
        );
      ,
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("Page 1"),
      ),
      body: pageIndex == 1 ? firstPage : secondePage,
    );
  

【参考方案1】：

因为我的例子并不理想，只是作为一种选择

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: JustPage(title: 'Initial title'),
    );
  


class JustPage extends StatefulWidget 
  final String _initialTitle;

  JustPage(@required String title) : this._initialTitle = title;

  @override
  _JustPageState createState() => _JustPageState();


class _JustPageState extends State<JustPage> 
  StreamController<int> _streamController;
  PageController _pageController;
  String _currentTitle;

  @override
  void initState() 
    _streamController = StreamController<int>();
    _pageController = PageController()..addListener(() => _streamController.add(_pageController.page.toInt()));
    super.initState();
  

  @override
  void dispose() 
    _pageController.dispose();
    _streamController.close();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: StreamBuilder(
          initialData: 0,
          stream: _streamController.stream,
          builder: (context, snapshot) 
            return Text(snapshot.data == 0 ? widget._initialTitle : _currentTitle);
          ,
        ),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () => _onBackArrowTap(),
        ),
      ),
      body: PageView.builder(
        physics: const NeverScrollableScrollPhysics(),
        controller: _pageController,
        itemBuilder: (context, index) 
          if (index == 0) 
            return ListView.builder(
              key: PageStorageKey('Page1'),
              itemExtent: 80,
              itemCount: 50,
              itemBuilder: (context, index) 
                final title = 'Page 1, item $index';
                return GestureDetector(
                  child: Container(
                    alignment: Alignment.centerLeft,
                    color: Colors.green[100],
                    child: Text(title),
                  ),
                  onTap: () => _animateToPageWithTitle(1, title),
                );
              ,
            );
           else 
            return ListView.builder(
              key: PageStorageKey('Page2'),
              itemExtent: 56,
              itemCount: 50,
              itemBuilder: (context, index) 
                return Container(
                  alignment: Alignment.centerLeft,
                  color: Colors.teal[100],
                  child: Text('Page 2, item $index'),
                );
              ,
            );
          
        ,
      ),
    );
  

  _animateToPageWithTitle(int index, String title) 
    _currentTitle = title;
    return _pageController.animateToPage(index, curve: Curves.linear, duration: const Duration(milliseconds: 250));
  

  _onBackArrowTap() 
    if (_pageController.page == 0) 
      // Navigator.pop bla bla
     else 
      _animateToPageWithTitle(0, widget._initialTitle);
    
  

【讨论】：

这是个好主意！ ?

【参考方案2】：

尝试使用这个包.. 将此依赖项添加到 pubspec.yaml 中。在依赖部分。

  page_transition: ^1.1.0

当换屏后调用这种方式..

          Navigator.push(
              context,
              PageTransition(
                  type: PageTransitionType.rightToLeft,
                  child: MyDetails()));

【讨论】：

我已经尝试过页面之间的过渡，但正如您在 GIF 中看到的那样，AppBar 不包含在过渡中，这意味着我仍在同一页面中，我只想在正文中实现过渡效果