flutter - 如何在flutter中更改页面时限制PageView

Question

我正在使用 PageView，我想限制滚动时下一页的可见部分。如果您需要了解我的意思，我附上了两张我想要的截图。

这是我希望的样子:

第一页: https://imgur.com/a/wNfkQbY

第二页: https://imgur.com/a/LJSFTno

我尝试在滚动到另一个屏幕时更改视口(viewport)大小，但这只会弄乱一切。

这是我当前的代码:

class OrderList extends StatefulWidget {
  static const String routeName = "/OrderList";

  @override
  _OrderListState createState() => _OrderListState();
}

class _OrderListState extends State<OrderList> {
  PageController controller = PageController();
  int _previousPage;
  var currentPageValue = 0.0;
  double _viewportScale = 1.0;

  @override
  Widget build(BuildContext context) {
    this.controller = PageController(
      initialPage: 0,
      viewportFraction: _viewportScale,
    );

    return Scaffold(
      backgroundColor: WHITE,
      body: 
      PageView(
        onPageChanged: (num) {
          print("Current page number is " + num.toString());
        },
        //physics: BouncingScrollPhysics(),
        controller: controller,
        scrollDirection: Axis.vertical,
        pageSnapping: false,

        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            color: Colors.transparent,
            child: Stack( ),
          ),
          Container(
            color: Colors.redAccent,
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
          )
        ],
      ),
    );
  }
}

基本上，我只想在两个页面之间平滑过渡，同时第一页的一部分在另一页上仍然可见。

任何帮助将不胜感激:D

Answer 1

您可以将视口(viewport)比例设置为 90% (0.9)，并将第一页的比例添加到 110% (1.1)