Блог

Я использую ListView в flutter для создания табло. Я хочу разделить разных участников границей. Однако это создает проблему с моим текущим макетом.

Оформление коробки с границей выглядит следующим образом:

 return SizedBox(
  key: ValueKey(record.name),
  width: double.infinity,
  height: 80,
  child: Container(
    decoration: BoxDecoration(
      color: Colors.white,
      border: Border(
          bottom: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
      ),
    ),
    child: ListTile(
      leading: new CircleAvatar(
        radius: 35.0,
        backgroundImage: NetworkImage("https://i.imgur.com/XvoqJ6C.png"),
        backgroundColor: Colors.transparent,
      ),
      title: Text(record.name   ": "   record.score.toString(), style:
        new TextStyle(
          fontSize: 20,
        ),),
  

А изображение макета можно увидеть здесь:

Проблема, как можно видеть, в том, что граница находится не между различными списковыми элементами, а за картинкой, которую я пытаюсь показать.

попробуйте ListView.separated вот так :

 ListView.separated(
    itemCount: list.length,
    itemBuilder: (BuildContext context, int index) {
        return  _buildListItem(context, snapshot[index]);    
    },
    separatorBuilder: (BuildContext context, int index) {
      return Divider(
        height: 24.0,
        color: Colors.black26,
      );
    },

)
  

таким образом, вместо того, чтобы добавлять границу каждый раз, разделяйте свои виджеты, используя Divider()