模拟在Google Play应用中看到的图像水平列表

Question

我想创建一个行为与Google Play应用中的水平滚动列表（例如，对于推荐应用而言）相同的小部件。

我的意思的例子：

我已经尝试使用Page Viewer小部件，但是它做的并不完全相同。一些值得注意的事实：

1）可以完全看到3个完全平方的图像，而部分显示了另一个图像。第二个（绿色的）在中间。

2）最左边的图像（蓝色的图像）与标题“为您推荐”完美对齐。

3）所有4个平方的图像都有圆角。

4）支持项目捕捉

这是我能够通过PageView小部件模仿这种行为的最好方法：

• 红色是包含网页浏览量的容器的背景色。
• 绿色是偶数项的颜色，蓝色是奇数项的颜色
• 在每个项目中添加了100x100的图像。

这是代码：

  return Container(
      width: double.infinity,
      color: Colors.red,
      height: 100,
      child:
          PageView(
              pageSnapping: true,
              controller:
                  PageController(initialPage: 1, viewportFraction: 0.315),
              children: List<Widget>.generate(10, (index) {
                return Container(
                  color: index%2 ==0 ? Colors.green : Colors.blue,
                  child:Image.network("http://via.placeholder.com/100x100",
                      fit: BoxFit.fitHeight)
                );
              })));
宽度我的代码有两件事是行不通的：

1）仅通过使用viewportFraction，我无法从右侧显示部分可见的项目，使3个完全可见的项目保持第二个项目完全居中，就像原始图像形式google play一样。

2）我无法对商品图像应用圆角，因为如您所见，容器不是方形的，而是图像。因此，当我应用ClipRRect时，它不会正确应用。我试图添加另一个容器，将其大小设置为100x100，并在该容器内的图像上应用ClipRRect，但是当它在PageView内时，给出的宽度/高度似乎无效。它们似乎由PageView内部控制。

所以，有人能帮助解决这个问题以获得与Google Play水平滚动列表相同的行为吗？

干杯！

我想创建一个小部件，其行为与google play应用中的水平滚动列表（例如，推荐的应用）相同。我的意思的示例：我试图使用Page ...

Answer 1

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double edge = 120.0;
    double padding = edge / 10.0;
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.red,
        padding: const EdgeInsets.symmetric(vertical: 8),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              for (int i = 0; i < 10; i++)
                Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(padding),
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(edge * .2)),
                        child: Container(
                          width: edge,
                          height: edge,
                          color: Colors.blue,
                          child: Image.network("http://via.placeholder.com/${edge.round()}x${edge.round()}", fit: BoxFit.fitHeight),
                        ),
                      ),
                    ),
                    Container(
                      width: edge + padding,
                      padding: EdgeInsets.only(left: padding),
                      child: Text(
                        'foo app bar baz app apk',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: padding),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Text('4.2'),
                          Icon(
                            Icons.star,
                            size: 16,
                          )
                        ],
                      ),
                    ),
                  ],
                )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

您可以修改PageScrollPhysics以创建捕捉效果。

Answer 3