【自学Flutter】20.3 ListView.separated 的使用-优快云博客

本文详细介绍并展示了如何在Flutter中使用ListView.separated组件来创建带有交替颜色分割线的列表视图，通过实例代码和效果截图，帮助读者理解并掌握其使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.效果图

效果图