Question

使用此简单设计，如何在列表视图下显示第二个图像？实际上，列表将从Firebase提取，其中每个项目都是一个ExpansionTile，因此无法固定Listview的高度。

该列应该是可滚动的，因此，如果您向下滚动列表下方，则可以看到完整图像。

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。

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

1 个答案: