五、Scrolling Widget之ListView、GridView、PageView

一、ListView

四种构造函数：

• ListView，默认构造函数
• ListView.builder，适用大量列表项(使用最多)
• ListView.separated，适用于固定数量列表项
• ListView.custom，自定义 子Widget

ListView(
  padding: EdgeInsets.zero,
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.local_offer),
      title: Text("收藏"),
      onTap: () {},
    ),
    Divider(),
    ListTile(
      leading: Icon(Icons.settings),
      title: Text("设置"),
      onTap: () {},
    ),
  ],
)



class _TestPageState extends State<TestPage> {
  List<String> list;

  _TestPageState(this.list);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('${list[index]}'),
          );
        });
  }
}



class _TestPageState extends State<TestPage> {
  List<String> list;

  _TestPageState(this.list);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemCount: list.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('${list[index]}'),
          );
        },
        separatorBuilder: (context, index) {//设置分割线以及分割线的样式
          return Container(
            constraints: BoxConstraints.tightFor(height: 1),
            color: Colors.black,
          );
        });
  }
}

二、GridView

五种构造函数：

• GridView，默认构造函数
• GridView.count：在横轴方向上具有固定数量的GridView
• GridView.extent：在横轴方向上具有最大范围的GridView
• GridView.builder：适用于具有大量（或无限）列表项
• GridView.custom：提供了自定义子Widget的能力

GridView.count(
  crossAxisCount: 3, //设置横轴item
  children: <Widget>[
    ListTile(
      title: Text('item1'),
    ),
    ListTile(
      title: Text('item2'),
    ),
    ListTile(
      title: Text('item3'),
    ),
    ListTile(
      title: Text('item4'),
    ),
    ListTile(
      title: Text('item5'),
    ),
    ListTile(
      title: Text('item6'),
    ),
    ListTile(
      title: Text('item7'),
    ),
    ListTile(
      title: Text('item8'),
    ),
    ListTile(
      title: Text('item9'),
    ),
  ],
)

三、PageView

三种构造函数：

• PageView：默认构造函数
• PageView.builder：适用于具有大量（或无限）列表项
• PageView.custom：提供了自定义子Widget的能力

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('PageView示例'),
        ),
        body: PageView(
          onPageChanged: (index) {//1
            print('当前为第 $index 页');
          },
          children: <Widget>[
            ListTile(
              title: Text('第0页'),
            ),
            ListTile(
              title: Text('第1页'),
            ),
            ListTile(
              title: Text('第2页'),
            ),
          ],
        ),
      ),
    );
  }
}

参考