Как разместить изображение под списком в флаттере? - PullRequest
0 голосов
/ 16 октября 2018

Используя этот простой дизайн, как я могу отобразить второе изображение под списком?В действительности список будет извлечен из базы данных, где каждый элемент представляет собой 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
    ]));
  }
}

1 Ответ

0 голосов
/ 16 октября 2018

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

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

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)
         )
        ),
      ]
    )
  );
}

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

...