美文网首页
Flutter - PageView

Flutter - PageView

作者: 辻子路 | 来源:发表于2019-07-23 15:42 被阅读0次

    滑屏翻页,我们可以用到PageView这个组件

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: ThemeData.light(),
          home: new DefaultTabController(
            length: 4,
            child: Scaffold(
              body: PageView(
                // pageSnapping: false,  // 是否允许停止自动翻页
                scrollDirection: Axis.vertical, //变成垂直滚动
                onPageChanged: (currentPage) => debugPrint('$currentPage'), // 换页事件
                controller: PageController(
                  initialPage: 1, // 初始页面是在第几个
                  viewportFraction: 0.85, // 占用可视口的85%
                ),
                children: <Widget>[
                  Container(
                    color: Colors.brown[900],
                    alignment: Alignment(0.0, 0.0),
                    child: Text('ONE',
                        style: TextStyle(fontSize: 32.0, color: Colors.white)),
                  ),
                  Container(
                    color: Colors.yellow[900],
                    alignment: Alignment(0.0, 0.0),
                    child: Text('Two',
                        style: TextStyle(fontSize: 32.0, color: Colors.white)),
                  ),
                  Container(
                    color: Colors.green[900],
                    alignment: Alignment(0.0, 0.0),
                    child: Text('Three',
                        style: TextStyle(fontSize: 32.0, color: Colors.white)),
                  )
                ],
              ),
            ),
          ),
        );
      }
    }
    
    

    相关文章

      网友评论

          本文标题:Flutter - PageView

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