Flutter：滚动小部件列表

Question

Is there any way in flutter, to only scroll through a certain number of widgets?

Like in PlayStore, the smaller widgets can be scrolled to the next 3 widgets however hard or fast the screen is scrolled. The same can be seen in the larger widgets, which can be scrolled through only one widget at a time?

Answer 1

You just need to think about the top slider as of PageView with each 3 children wrapped in their own parent block.

Here's an example:

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'),
        ],
      ),
    );
  }
}

After that you just assign a PageController with viewportFraction lower than 1.0 so that it will display the next and previous blocks too.