Flutter ListView设置分割线及列表嵌套不同的Item

一.flutter分割线divider中属性简介

 const Divider({
    Key? key,
    this.height, //分割线区域的高度
    this.thickness, //分割线的厚度，即分割线的高度
    this.indent, //起点缩进距离
    this.endIndent, //终点缩进距离
    this.color, //分割线颜色
  }) : assert(height == null || height >= 0.0),
       assert(thickness == null || thickness >= 0.0),
       assert(indent == null || indent >= 0.0),
       assert(endIndent == null || endIndent >= 0.0),
       super(key: key);

二.ListView.builder属性简介

ListView.builder({
    Key? key,
    Axis scrollDirection = Axis.vertical, //设置滑动方向 Axis.horizontal 水平默认 Axis.vertical垂直
    bool reverse = false, //是否倒序显示 默认正序false,倒序true
    ScrollController? controller, //滑动监听
    bool? primary, //false，如果内容不足，则用户无法滚动,而如果[primary]为true，它们总是可以尝试滚动
    ScrollPhysics? physics, //滑动类型设置(1.AlwaysScrollableScrollPhysics()总是可以滑动;2.NeverScrollableScrollPhysics禁止滚动;
	//3.BouncingScrollPhysics 内容超过一屏上拉有回弹效果;4.ClampingScrollPhysics 包裹内容不会有回弹)
    bool shrinkWrap = false, //内容适配
    EdgeInsetsGeometry? padding, //内间距
    this.itemExtent, //确定每一个item的高度 会让item加载更加高效
    this.prototypeItem,
    required IndexedWidgetBuilder itemBuilder,
    int? itemCount, //item 数量
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double? cacheExtent,  //cacheExtent  设置预加载的区域 
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge,
  })

三.flutter listview 嵌套不同的item

1.定义不同类型的数据源

abstract class ListItem {}

class TitleItem implements ListItem {
  //only show title
  late final String title;
  TitleItem(this.title);
}

class ChatItem implements ListItem {
  //show sender and content
  final String sender;
  final String content;
  ChatItem(this.sender, this.content);
}

2.创建item显示的总数及分类显示规则

home: Scaffold(
      body: Center(
        //child: Text(wordPair.asPascalCase),
        child: ListViewPage(
          listItems: List.generate(
            200,
                (i) => i % 2 == 0
                ? TitleItem("title is $i")
                : ChatItem("Sender is $i", "content is $i"),
          ),
        ),
      ),
    ));

3.listviewpage.dart代码展示

import 'package:flutter/material.dart';

class ListViewPage extends StatelessWidget {
  final List listItems;
  const ListViewPage({Key? key, required this.listItems}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'listView show';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            title,
            textAlign: TextAlign.center,
          ),
        ),
        body: _buildListView(listItems),
      ),
    );
  }
}

Widget _buildListView(List listItems){


  // ignore: dead_code
  return ListView.builder(

      itemCount: listItems.length,
      itemBuilder:(context, index) {
        final listItem = listItems[index];
        if (listItem is TitleItem) {
          return Column(
            children: [
              ListTile(
                title: Text(
                  listItem.title,
                ),
              ),
              const Divider(), //Divider
            ],
          );
        }else if(listItem is ChatItem){
          return Column(
            children: [
              ListTile(
                title: Text(listItem.sender),
                subtitle: Text(listItem.content),
              ),
              const Divider(), //Divider
            ],
          );
        }else{
          return Column(
            children: const [
              ListTile(
                title: Text(
                  "null item",
                ),
              ),
              Divider(), //Divider
            ],
          );
        }

        
      });
}

abstract class ListItem {}

class TitleItem implements ListItem {
  //only show title
  late final String title;
  TitleItem(this.title);
}

class ChatItem implements ListItem {
  //show sender and content
  final String sender;
  final String content;
  ChatItem(this.sender, this.content);
}

4.效果展示