如何在不使当前视图混乱的情况下实现这种滑动效果

Question

我是新手，所以我很难掌握动画，谁能帮助我在两个listViews之间添加过渡效果？ 这是我的代码，结果是针对的 代码正在

上运行

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,
    );
  }
}

Answer 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);
    }
  }
}

Answer 2

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

  page_transition: ^1.1.0

在更改屏幕后，然后以这种方式调用。

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