【自学Flutter】20.3 ListView.separated 的使用

20.3 ListView.separated 的使用

1.源代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    Widget redDivider = Divider(color: Colors.red);
    Widget blueDivider = Divider(color: Colors.blue);
    return MaterialApp(
        home: Scaffold(
          body: Scrollbar(
            child: Center(
              child: ListView.separated(
                itemCount: 50,
                separatorBuilder: (BuildContext context, int index){
                  return index % 2 == 0 ? redDivider:blueDivider;
                },
                itemBuilder: (BuildContext context, int index){
                  return ListTile(title: Text("我是列表$index"),);
                },
              )
            ),
          ),
        )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    //声明不同颜色的分割线
    Widget redDivider = Divider(color: Colors.red);
    Widget blueDivider = Divider(color: Colors.blue);
    return MaterialApp(
        home: Scaffold(
          body: Scrollbar(
            child: Center(
              child: ListView.separated(
                itemCount: 50,
                //判断奇偶数进行分割线颜色处理
                separatorBuilder: (BuildContext context, int index){
                  return index % 2 == 0 ? redDivider:blueDivider;
                },
                itemBuilder: (BuildContext context, int index){
                  return ListTile(title: Text("我是列表$index"),);
                },
              )
            ),
          ),
        )
    );
  }
}

3.效果图