美文网首页
flutter ScrollPhysics

flutter ScrollPhysics

作者: Victory_886 | 来源:发表于2019-08-14 11:08 被阅读0次

    flutter 之 ScrollPhysics的使用。

      double _currentPage = 0.0;
      final PageController _pageController = PageController();
    
      Widget _scrollPhysics() {
          return Container(
            height: 300,
            width: MediaQuery.of(context).size.width,
            child: LayoutBuilder(
              builder: (context, constraints) => NotificationListener(
                onNotification: (ScrollNotification note) {
                  setState(() {
                    _currentPage = _pageController.page;
                  });
                },
                child: PageView.custom(
                  physics: PageScrollPhysics(parent: BouncingScrollPhysics()),
                  controller: _pageController,
                  childrenDelegate: SliverChildBuilderDelegate(
                    (context, index) => _SimplePage(
                      "$index",
                      parallaxOffset:
                          constraints.maxWidth / 2.0 * (index - _currentPage),
                    ),
                    childCount: 9,
                  ),
                ),
              ),
            ),
          );
        }
    
    return Scaffold(
          body: Container(
            child: _scrollPhysics(),
          ),
    );
    
    
    • _SimplePage

    class _SimplePage extends StatelessWidget {
      final String data;
      final double parallaxOffset;
    
      const _SimplePage(this.data, {Key key, this.parallaxOffset = 0})
          : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  data,
                  style: TextStyle(fontSize: 60, color: Colors.red),
                ),
                SizedBox(
                  height: 40.0,
                ),
                Transform(
                  transform: Matrix4.translationValues(parallaxOffset, 0, 0),
                  child: Text("左右滑动"),
                )
              ],
            ),
          ),
        );
      }
    }
    
    



    运行结果如下:

    效果图片

    相关文章

      网友评论

          本文标题:flutter ScrollPhysics

          本文链接:https://www.haomeiwen.com/subject/oqtgjctx.html