dart - 对齐 Flutter scrollview 的第一个小部件最初居中，但所有后续选定的小部件也在中心

Question

我想要实现的目标

我想让 ScrollView 的第一个小部件最初居中。但是，如果 ScrollView 滚动，则 ScrollView 应与父级具有相同的宽度，并且居中的小部件应为选定的小部件。

方法

我的第一个想法是使用 initialScrollOffset 属性。但这似乎没有任何效果。

@override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: _buildCarouselItems(),
      itemExtent: FrettirConstants.cardWidth,
      controller: new ScrollController(
          debugLabel: "Carousel",
          initialScrollOffset: -200,
        keepScrollOffset: true
      ),
    );
  }

素描

Answer 1

这听起来像是一种不好的做法，但您可以在第一个位置添加一个宽度为其他轮播小部件 3/4 宽度的空容器。

在我的虚拟代码中，每个轮播小部件的长度为 160，空容器必须有 3/4 的其他小部件。这样，第一个轮播小部件完全可见，而第二个只有 3/4 可见性。

Container(
  width: 160.0 * 3 / 4,
  color: Colors.transparent,
),
Container(
  margin: EdgeInsets.only(
    right: 10.0
  ),
  width: 160.0,
  color: Colors.red,
),
Container(
  margin: EdgeInsets.symmetric(
      horizontal: 10.0
  ),
  width: 160.0,
  color: Colors.blue,
),