【安卓跨端】Flutter PageView基础使用教程

安卓开发中，一般使用ViewPager实现页面的滑动切换，再Flutter中也有对应的组件：PageView，下面我们不说其他多余的事情，直接对PageView的使用方法进行归纳，以最简单的形式展示出来。

 

回顾安卓的ViewPager使用步骤

1.一个ViewPager

2.一组Fragment

3.最后绑定ViewPager

 

安卓中使用ViewPager还是比较简单，基本涉及这几个类：ViewPager、Fragment、FragmentPagerAdapter。

 

在Flutter中，类似的组件PageView使用起来还更方便，就一个类PageView可以立马上手操作。

 

PageView的简单使用

构造函数：

1.PageView ： 创建一个可滚动列表。

2.PageView.builder ： 创建一个滚动列表，指定数量。

3.PageView.custom ： 创建一个可滚动的列表，自定义子项。

 

使用第一个构造函数：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var pageview = new PageView(
      children: <Widget>[
        new Text("1"),
        new Text("2")
      ],
    );

    return MaterialApp(
      title: 'PageView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: pageview,
    );
  }
}

 

使用PageView.builder命名构造函数：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var pageview = new PageView.builder(itemBuilder: ((context, index) {
      return Text("Index : " + index.toString());
    }), itemCount: 3,);

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: pageview,
    );
  }
}

 

使用PageView.custom命名构造函数：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var pageview = new PageView.custom(
        childrenDelegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Text(index.toString());
          },
          childCount: 3
        )
    );

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: pageview,
    );
  }
}

 

转载于:https://www.cnblogs.com/nicojerry/p/11528589.html