如何在 PageView 中的页面之间留出一些空间（边距/填充）？

Question

我正在使用PageView.builder创建页面。

PageView.builder(
          itemCount: _pagesList.length,
          itemBuilder: (BuildContext context, int index) {
            return Container( 
                    color: _pagesList[index],
                           );
                          }
                         )

我目前拥有的：

我想要的是：

即我想Padding在页面之间提供一些（当它们被滚动时）

原因：我将在这些页面中显示图像，并且由于图像将覆盖每个页面的整个宽度，因此滚动页面时看起来不太好，因为它们被编织在一起，如下所示：

我该如何解决这个问题？

Answer 1

这个答案来自 Amon Kataria Github提出的问题

final pageController = PageController(viewportFraction: 1.1);

PageView.builder(
  controller: pageController,
  itemCount: _pagesList.length,
  itemBuilder: (BuildContext context, int index) {
    return FractionallySizedBox(
      widthFactor: 1 / pageController.viewportFraction,
      child: Container(
       color: _pagesList[index],
      ),
    );
  },
);

谢谢@mono0926

Answer 2

PageController imagesController =
        PageController(initialPage: 0, viewportFraction: 1.1);

PageView(
    itemBuilder: (BuildContext context, int index) {
     return Padding(
      padding: EdgeInsets.only(left: 10, right: 10),
        child: Container( 
            color: _pagesList[index],
        ),
     );
  }
),

Answer 3

最大努力：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: MyPageView()
      )
    );
  }
}


class MyPageView extends StatefulWidget {
  MyPageView({Key key}) : super(key: key);

  _MyPageViewState createState() => _MyPageViewState();
}

class _MyPageViewState extends State<MyPageView> {
  @override
  Widget build(BuildContext context) {
    return PageView(
     children: <Widget>[
    Container(
      color: Colors.black,
      child: Card(
        color: Colors.red,
        )
      ),
    Container(
      color: Colors.black,
      child: Card(
        color: Colors.blue,
      ),
    ),
    Container(
      color: Colors.black,
      child: Card(
        color: Colors.green,
      ),
    ),

  ],
  );
  }
}