Question

有什么办法只能滚动浏览一定数量的小部件吗？

就像在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：在小部件列表中滚动

1 个答案: