Question

如果您遵循在网上找到的示例代码，则在脚手架下构造脚手架时，您可以：

body: PageView(
    controller: _pageController,
        onPageChanged: (index) {
        setState(() => _selectedPage = index);
    },
    children: <Widget>[
        Container(color: Colors.pink,),
        Container(color: Colors.cyan,),
        Container(color: Colors.deepPurple,),
    ],
)

当您在显示粉红色的页面上向左滑动时，则从右侧出现一个青色页面。但是，现在我为用例扩展了它，现在有：

body: PageView(
    controller: _pageController,
        onPageChanged: (index) {
        setState(() => _selectedPage = index);
    },
    children: <Widget>[
        Container(child: _pageOptions[_selectedPage],),
        Container(child: _pageOptions[_selectedPage],),
        Container(child: _pageOptions[_selectedPage],),
    ],

）

“ _ pageOptions []”的定义如下：

final _pageOptions = [
    Page1(),
    Page2(),
    Page3(),
];

我的问题如下：例如，当您在Page1上并向左滑动时，Page2应该是从右侧进入并成为您正在查看的新页面。但是，当您从Page1缓慢滑动到Page2时，您会看到从右侧进入的页面是Page1而不是Page2。直到中途滑动一遍，传入的页面将变为Page2。但是，此时，您要向左滑动的页面（应该是Page1）也将变为Page2。

我该如何解决？ Page1（）和其余的返回一个小部件。例如，类Page1的编码为：

class Page1 extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(25.0),
        child: Text('Page1', style: TextStyle(fontSize: 36.0),)
    );
    }
}

Answer 1

在：

children: <Widget>[
    Container(child: _pageOptions[_selectedPage],),
    Container(child: _pageOptions[_selectedPage],),
    Container(child: _pageOptions[_selectedPage],),
],

子项根据_selectedPage的变化而变化，而_selectedPage的变化是onPageChanged。

如果您在Page1中，则_selectedPage = 1，因此所有子级都是_pageOptions [1]，即Page1。将代码更改为：

children: <Widget>[
    Container(child: _pageOptions[0],),
    Container(child: _pageOptions[1],),
    Container(child: _pageOptions[2],),
],

Flutter：如何使PageView onPageChanged动画平滑

1 个答案: