如何在颤动的列表视图下方放置图像？

Question

使用这个简单的设计，如何在列表视图下显示第二张图片？实际上，该列表将从 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
    ]));
  }
}

Answer 1

我理解您的问题的方式是，您希望底部图像出现在列表视图内而不是在其下方，就好像它只是另一个项目。解决方案：让它成为另一个项目！

更具体地说，这是您使用图像丰富列表的辅助函数的实现方式可能如下所示：

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

另外，我相信您的问题类似于this one。