美文网首页
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