Как разместить изображение под списком во флаттере?

Используя этот простой дизайн, как я могу отобразить второе изображение под списком? На самом деле список будет извлечен из firebase, где каждый элемент является ExpansionTile, поэтому высоту списка никоим образом нельзя зафиксировать.

Столбец должен иметь возможность прокрутки, чтобы вы могли видеть полное изображение, если прокрутите вниз под списком.

import 'package:flutter/material.dart';

List<Widget> list = <Widget>[
  ListTile(
    title: Text('CineArts at the Empire',
        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
    subtitle: Text('85 W Portal Ave'),
    leading: Icon(
      Icons.theaters,
      color: Colors.blue[500],
    ),
  ),
  ListTile(
    title: Text('The Castro Theater',
        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
    subtitle: Text('429 Castro St'),
    leading: Icon(
      Icons.theaters,
      color: Colors.blue[500],
    ),
  ),
];

class CartWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Column(children: <Widget>[
      Image.network("https://via.placeholder.com/350x150"),
      Expanded(
        child: ListView(
          children: list,
        ),
      ),
      Image.network("https://via.placeholder.com/350x500"), // error: hides above widget
    ]));
  }
}

flutter dart flutter-layout
person Robin Manoli    schedule 16.10.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Насколько я понимаю, ваша проблема заключается в том, что вы хотите, чтобы нижнее изображение отображалось внутри списка, а не под ним, как если бы это был просто еще один элемент. Решение: Сделайте это просто еще одним предметом!

Более конкретно, вот как может выглядеть ваша реализация вспомогательной функции, которая обогащает список изображением:

List<Widget> _buildListWithFooterImage(List<Widget> items) {
  return items.followedBy([
    Image.network("https://via.placeholder.com/350x500")
  ]);
}

Затем вы можете использовать эту функцию во время сборки:

Widget build(BuildContext context) {
  return SafeArea(
    child: Column(
      children: <Widget>[
        Image.network("https://via.placeholder.com/350x150"),
        Expanded(
          child: ListView(
            children: _buildListWithFooterImage(list)
         )
        ),
      ]
    )
  );
}

Кроме того, я считаю, что ваш вопрос похож на этот.

person Marcel    schedule 16.10.2018
comment
Спасибо ... хотя это похоже на взлом, чтобы поместить изображение в список. Разве с вашим решением не будет скрыт какой-либо дочерний столбец после представления списка? - person Robin Manoli; 16.10.2018
comment
Нисколько! Во время компоновки Column размещает своих дочерних элементов в следующем порядке: сначала негибкие (например, верхнее изображение или что-нибудь нестандартное ниже ListView) и только после этих гибких (например, виджет Expanded). Таким образом, ListView всегда занимает остальную часть доступного пространства, не больше и не меньше. - person Marcel; 16.10.2018
comment
Полагаю, тогда списки не предназначены для столбцов? В моем случае список был создан с помощью .toList (), поэтому .followedBy не работал, но я заставил его работать с помощью .toList () + [Image.network (...)] - person Robin Manoli; 16.10.2018
comment
Ох, круто, я не знал, что Lists переопределяют оператор + ... полезно знать. И да, хотя вы можете очень гибко составлять виджеты во Flutter, ListViews не предназначены для использования в качестве прямых потомков для Columns. Причина в том, что ListViews занимают все доступное пространство, которое могут, а Columns предоставляют каждому дочернему элементу бесконечные ограничения по высоте как способ связи с ними, чтобы они были как можно меньше. Для получения дополнительной информации ознакомьтесь с этим интересным Google Tech Talk о конвейере рендеринга Flutter. - person Marcel; 16.10.2018