Android 颤振：如何在代码中的每个列表项之间添加分隔符？

如何将分隔符添加到列表中？我在Android上使用Flutter。我想在每个列表项之间添加一个分隔符，我想给分隔符上色并添加样式

我尝试添加

新的分隔符（）但我有错误。我还尝试了
返回新的分隔符（）

以下是我的应用程序的屏幕截图：

这是我的代码：

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

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

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          primarySwatch: Colors.purple,

          buttonTheme: const ButtonThemeData(
            textTheme: ButtonTextTheme.primary,
          )
      ),
      home: const MyHomePage(),
    );
  }
}

class Kitten {
  const Kitten({this.name, this.description, this.age, this.imageurl});

  final String name;
  final String description;
  final int age;
  final String imageurl;
}

final List<Kitten> _kittens = <Kitten>[
  Kitten(
      name: "kitchen",
      description: "mehraboon",
      age: 2,
      imageurl:
      "https://images.pexels.com/photos/104827/cat-pet-animal-domestic- 
      104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350",
  ),
  Kitten(
      name: "garage",
      description: "khashen",
      age: 1,
      imageurl:
      "https://images.pexels.com/photos/4602/jumping-cute-playing-animals.jpg? 
      auto=compress&cs=tinysrgb&dpr=2&h=350",
  ),
  Kitten(
      name: "bedroom",
      description: "khar zoor",
      age: 5,
      imageurl:
      "https://images.pexels.com/photos/978555/pexels-photo-978555.jpeg? 
      auto=compress&cs=tinysrgb&dpr=2&h=350",
  ),
  Kitten(
      name: "living room",
      description: "chorto",
      age: 3,
      imageurl:
      "https://images.pexels.com/photos/209037/pexels-photo-209037.jpeg? 
      auto=compress&cs=tinysrgb&dpr=2&h=350",
  ),
];

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);

  Widget _dialogBuilder(BuildContext context, Kitten kitten) {
    return SimpleDialog(contentPadding: EdgeInsets.zero, children: [
      Image.network(kitten.imageurl, fit: BoxFit.fill),
      Padding(
          padding: const EdgeInsets.all(16.0),
          child:
          Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
            Text(kitten.name),
            Text('${kitten.age}'),
            SizedBox(
              height: 16.0,
            ),
            Text(kitten.description),
            Align(
              alignment: Alignment.centerRight,
              child: Wrap(
                children: [
                  FlatButton(onPressed: () {}, child: const
                  Text("noooo!"),color: Colors.red,),
                  Padding(padding: const EdgeInsets.all(2.0),),
                  RaisedButton(onPressed: () {}, child: const
                  Text("yesss!"),color: Colors.green)
                ],
              ),
            )
          ]))
    ]);
  }

  Widget _listItemBuilder(BuildContext context, int index) {
    return new GestureDetector(

      onTap: () => showDialog(
          context: context,
          builder: (context) => _dialogBuilder(context, _kittens[index])),
      child:
      Container(

        padding: EdgeInsets.all( 16.0),
        alignment: Alignment.centerLeft,
        child: Text(_kittens[index].name,
            style: Theme.of(context).textTheme.headline),

      ),


    ) ;

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Keys"),
        centerTitle: true,


      ),
      body: ListView.builder(
        itemCount: _kittens.length,
        itemExtent: 60.0,
        itemBuilder: _listItemBuilder,

      ),
    );
  }
}
 

导入“包装：颤振/材料.省道”；
进口“包装：颤振/基础.dart”；
void main（）=>runApp（const MyApp（））；
类MyApp扩展了无状态小部件{
常量MyApp（）；
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主题：主题数据(
原色样本：颜色。紫色，
buttonTheme:const buttonTheme数据(
textTheme:buttonexttheme.primary，
)
),
主页：const MyHomePage（），
);
}
}
班猫{
const Kitten（{this.name，this.description，this.age，this.imageurl}）；
最后的字符串名；
最终字符串描述；
最终积分；
最终字符串imageurl；
}
最终名单_小猫=[
小猫(
名称：“厨房”，
描述：“mehraboon”，
年龄:2岁，
图像URL：
"https://images.pexels.com/photos/104827/cat-pet-animal-domestic- 
104827.jpeg？auto=compress&cs=tinysrgb&dpr=2&h=350“，
),
小猫(
名称：“车库”，
描述：“哈申”，
年龄:1,，
图像URL：
"https://images.pexels.com/photos/4602/jumping-cute-playing-animals.jpg? 
auto=compress&cs=tinysrgb&dpr=2&h=350“，
),
小猫(
姓名：“卧室”，
描述：“哈尔·祖尔”，
年龄:5岁，
图像URL：
"https://images.pexels.com/photos/978555/pexels-photo-978555.jpeg? 
auto=compress&cs=tinysrgb&dpr=2&h=350“，
),
小猫(
名称：“客厅”，
描述：“chorto”，
年龄:3岁，
图像URL：
"https://images.pexels.com/photos/209037/pexels-photo-209037.jpeg? 
auto=compress&cs=tinysrgb&dpr=2&h=350“，
),
];
类MyHomePage扩展了无状态小部件{
constmyhomepage（{Key}）：超级（Key:Key）；
Widget\u dialogBuilder（BuildContext上下文，Kitten Kitten）{
返回SimpleDialog（contentPadding:EdgeInsets.zero，子项：[
Image.network（kitten.imageurl，fit:BoxFit.fill），
填充物(
填充：常数边集全部（16.0），
儿童：
列（crossAxisAlignment:crossAxisAlignment.stretch，子项：[
文本（kitten.name），
文本（“${kitten.age}”），
大小盒子(
身高：16.0，
),
文本（kitten.description），
对齐(
对齐：alignment.centerRight，
孩子：包裹(
儿童：[
扁平按钮（按下时：（）{}，子项：常量
文本（“noooo！”），颜色：Colors.red，），
填充（填充：常量边集全部（2.0），），
RaisedButton（按下时：（）{}，子项：常量
文本（“是！”），颜色：Colors.green）
],
),
)
]))
]);
}
Widget\u listItemBuilder（BuildContext上下文，int索引）{
返回新的手势检测器(
onTap:（）=>showDialog(
上下文：上下文，
生成器：（context）=>\u dialogBuilder（context，\u kittens[index]），
儿童：
容器(
填充：所有边缘设置（16.0），
对齐：alignment.centerLeft，
子项：文本（_kittens[index]。名称，
风格：Theme.of（context.textTheme.headline），
),
) ;
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“键”），
标题：对，
),
正文：ListView.builder(
itemCount:_kittens.length，
项目范围：60.0，
itemBuilder:\u listItemBuilder，
),
);
}
}
在本书中，他们提供的解决方案如下：

  body: ListView.builder(
    itemCount: _kittens.length,
    itemExtent: 60.0,
    itemBuilder: (context, i) {
        // Add a one-pixel-high divider widget before each row in theListView.
        if (i.isOdd) return new Divider(color: Colors.purple); // notice color is added to style divider

        return _listItemBuilder();
      },
  ),
  ...

考虑到奇数行和偶数行，应该添加分隔符

还要将分隔器pas“颜色”涂成：

将您的小部件放入容器中，并按如下所示使用BoxEdition

Container(
   child: YourWidgetHere(),
   decoration: BoxDecoration(
      border: Border(bottom: BorderSide(color: Colors.black26))),
);

查看此问题：
它明确指出：

如果您需要使用动态元素构建列表，那么现在您必须自己处理这个问题。我建议在row小部件构建中，在底部包含一个带有列或其他内容的，但最后一个除外（可以测试
index==listData.length-1
）

但是，如您所展示的示例中所示，如果您已经知道所有列表数据，或者您构建它时没有使用
ListView.builder
，那么您可以并且应该使用命名构造函数
ListView.divideTiles

ListView(
  children: ListTile.divideTiles( //          <-- ListTile.divideTiles
      context: context,
      tiles: [
        ListTile(
          title: Text('Horse'),
        ),
        ListTile(
          title: Text('Cow'),
        ),
        ListTile(
          title: Text('Camel'),
        ),
        ListTile(
          title: Text('Sheep'),
        ),
        ListTile(
          title: Text('Goat'),
        ),
      ]
  ).toList(),
)

最正确的方法是使用ListView.separated

ListView.separated(
     itemCount: 25,
     separatorBuilder: (BuildContext context, int index) => Divider(height: 1),
     itemBuilder: (BuildContext context, int index) {
       return ListTile(
         title: Text('item $index'),
       );
     },
);

做同样的事情有很多方法。让我在这里比较一下

查看一个简短的静态列表
使用
listile.divideTiles

ListView(
  children: ListTile.divideTiles( //          <-- ListTile.divideTiles
      context: context,
      tiles: [
        ListTile(
          title: Text('Horse'),
        ),
        ListTile(
          title: Text('Cow'),
        ),
        ListTile(
          title: Text('Camel'),
        ),
        ListTile(
          title: Text('Sheep'),
        ),
        ListTile(
          title: Text('Goat'),
        ),
      ]
  ).toList(),
)

这将为每个项目返回两个小部件，最后一个项目除外。
separatorBuilder
用于添加分隔符

用于在最后一项后添加分隔符
创建使用分隔符或框装饰的自定义项小部件

使用分隔器
final items=[“马”、“牛”、“骆驼”、“羊”、“山羊”]；
@凌驾
小部件构建（构建上下文）{
返回ListView.builder(
itemCount:items.length，
itemBuilder：（上下文，索引）{
返回列(
儿童：[
列表砖(
标题：文本（项目[索引]），
),
除法器（），//以下仅添加除法器（）：

列(
儿童：[
容器(
填充：所有边缘设置（16.0），
子：列(
儿童：[
Image.network（视频[“imageUrl”]），
容器(
身高：6.0，
ListView.separated(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('$index sheep'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];

@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return Column(
        children: <Widget>[
          ListTile(
            title: Text(items[index]),
          ),
          Divider(), //                           <-- Divider
        ],
      );
    },
  );
}

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];

@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return Container(
        decoration: BoxDecoration( //                    <-- BoxDecoration
          border: Border(bottom: BorderSide()),
        ),
        child: ListTile(
          title: Text(items[index]),
        ),
      );
    },
  );
}

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];

@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return Card( //                           <-- Card
        child: ListTile(
          title: Text(items[index]),
        ),
      );
    },
  );
}

         Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(16.0),
                    child: Column(
                      children: <Widget>[
                        Image.network(video["imageUrl"]),
                        Container(
                          height: 6.0,
                        ),
                        Text(
                          video["name"],
                          textScaleFactor: 1.05,
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                  Divider(
                    color: Theme.of(context).primaryColor,
                  )
                ],
              );                                                                           

 ListTile(
        leading: Icon(Icons.home),
        title: Text('Home'),
 ),
 Container(height: 1, color: Colors.grey), //divider
 ListTile(
        leading: Icon(Icons.logout),
        title: Text('Logout'),
 ),

Column(
   children: [
     for(var i=0; i<4; i+=1)
     ...[Container(height: 100, width: 100),
         Divider()
      ]])

Container(height: 1, color: Colors.grey),

 ListView.builder(
  itemCount: _feed.items.length,
  itemBuilder: (BuildContext context, int index) {
    final item = _feed.items[index];

     return  Column(
         children: <Widget>[
      Container(height: 1, color: Colors.grey),  //Container for devider
      ListTile(                                  //Your tile item
      title: title(item.title),
      subtitle: subtitle(item.pubDate),
      leading: thumbnail(item.enclosure.url),
      trailing: rightIcon(),
      contentPadding: EdgeInsets.all(5.0),
      onTap: () => openFeed(item.link),
    )]);
  },
);

 Column(
   children: <Widget>[
     row, // A custom Row
     Padding(
       padding: const EdgeInsets.only(
         left: 16,  // Adjust separator left padding.
         right: 16, // Adjust separator right padding.
       ),
       child: Container(
         height: 1,
         color: Styles.productRowDivider, // Custom style
       ),
     ),
   ],
 );

 ListView.separated(
   itemCount: 100,
   itemBuilder: (context, index) {
     return row;
   },
   separatorBuilder: (context, index) {
     return Container(
             height: 1,
             color: Styles.productRowDivider, // Custom style
           );
   },
 );