ListView实施

Question

请帮助我或给我一个有关如何实现以上图像的想法。我打算使用ListView。下面是我的示例代码，但这是水平滚动的。

Widget build(BuildContext context) {
return Container(
    height: 210,
    color: Theme.of(context).primaryColor,
    padding: EdgeInsets.symmetric(vertical: 10),
    child: ListView.builder(
      itemCount: _foodsList.featuredList.length,
      itemBuilder: (context, index) {
        double _marginLeft = 0;
        (index == 0) ? _marginLeft = 20 : _marginLeft = 0;
        return FoodsCarouselItemWidget(
          heroTag: 'home_food_carousel',
          marginLeft: _marginLeft,
          food: _foodsList.featuredList.elementAt(index),
        );
      },
      scrollDirection: Axis.horizontal,
    ));

} }

Answer 1

您需要在ListView的itemBuilder属性中构建布局。如果要将文本放置在图像上，最好的布局小部件是Stack。

请参阅以下内容以获取抖动的布局系统：https://flutter.io/tutorials/layout/

，有关所有可用的布局小部件，请参见：https://flutter.io/widgets/layout/

和堆栈：https://docs.flutter.io/flutter/widgets/Stack-class.html

类似这样的内容：new Stack( children: <Widget>[ new Positioned.fill( child: new FadeInImage( placeholder: new AssetImage('placeholder.png'), image: new CachedNetworkImageProvider(photos[int].url), fit: BoxFit.contain, alignment: Alignment.center, fadeInDuration: new Duration(milliseconds: 200), fadeInCurve: Curves.linear, ), ), new Positioned( top: 10.0, left: 10.0, child: new Container( child: new Text(photos[int].title) ), ), ], )

Answer 2

我已尽力做到这一点，但由于时间问题，您可能会发现有所不同。

使用的软件包：null reference

  

这是完整的代码。

https://pub.dev/packages/cached_network_image#-installing-tab-

输出：