如何在扑动页面视图小部件中给出图像卡的宽度

Question

我想创建如下图所示的页面视图:figma设计>

是我所拥有的就像下面的图片:我的网页浏览小工具

Pageview占用了viewport的全部宽度。我怎样才能使我的页面浏览量像在第一个图像。我的代码如下:

Container(
child: Directionality(
textDirection: TextDirection.rtl,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
width: 100,
child: PageView(
controller: controller,
children: imgList
.map((item) => Card(
// semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(16)),
child: Image.network(
item,
height: 150,
width: 50,
fit: BoxFit.fill,
),
))
.toList(),
),
),
],
),
),
) 

Answer 1

尝试使用pageviewcontroller:

PageController _pageController;
@override
void initState() {
super.initState();
_pageController = PageController(viewportFraction: 0.8);
}