Flutter：滾動小部件列表

Question

flutter 中是否有任何方法只能滾動瀏覽一定數量的小部件？

就像在 PlayStore 中一樣，較小的小部件可以滾動到接下來的 3 個小部件，無論屏幕滾動的速度有多快。 在較大的小部件中也可以看到相同的情況，一次只能滾動一個小部件？

Answer 1

您只需要考慮 PageView 的頂部 slider ，每 3 個孩子都包裝在自己的父塊中。

這是一個例子：

class SmallSlider extends StatefulWidget {
  @override
  _SmallSliderState createState() => _SmallSliderState();
}

class _SmallSliderState extends State<SmallSlider> {
  final PageController controller = PageController(viewportFraction: 0.9);

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 3 / 2,
      child: PageView.builder(
        controller: controller,
        itemCount: 5,
        itemBuilder: (context, index) => Row(
          children: <Widget>[
            for (int i = 0; i < 3; i++)
              Expanded(
                child: SmallSliderItem(),
              ),
          ],
        ),
      ),
    );
  }
}

class SmallSliderItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          AspectRatio(
            aspectRatio: 1.0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.circular(10.0),
              ),
            ),
          ),
          SizedBox(height: 5.0),
          Text('Title'),
          SizedBox(height: 5.0),
          Text('99 MB'),
        ],
      ),
    );
  }
}

之后，您只需分配一個 viewportFraction 低於 1.0 的 PageController，以便它也會顯示下一個和上一個塊。