Flutter：滚动小部件列表

Question

Flutter 有什么方法可以只滚动一定数量的小部件吗？

就像在 PlayStore 中一样，较小的小部件可以滚动到接下来的 3 个小部件，无论屏幕滚动的速度有多快。在较大的小部件中也可以看到同样的情况，一次只能滚动一个小部件？

Answer 1

您只需要考虑 PageView 的顶部滑块，每 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，这样它就会显示下一个和上一个块。

Flutter：滚动小部件列表

Flutter: Scrolling through widgets list

horizontal-scrolling

flutter

flutter-layout