Flutter中PageView组件如何设置内部图片卡片的显示宽度？

你想要实现的是相邻页面露出边角的分页轮播效果，只需要调整PageController的配置并补充PageView的属性即可，具体修改点如下：

• 首先给你的PageController添加viewportFraction参数，该参数默认值为1.0（即单页占满PageView的全部宽度），你可以根据设计稿调整数值，比如设置为0.8就代表单页占PageView宽度的80%，剩下的空间会露出前后相邻的页面
• 给PageView组件添加padEnds: false属性，关闭默认的首尾页额外内边距，保证所有页面的左右留白一致
• 你当前包裹PageView的外层Container设置的width属性不生效，因为父级Column配置了CrossAxisAlignment.stretch，会强制子组件撑满横向可用宽度，不需要的话可以删掉该width配置

修改后的完整代码参考：

// 先修改PageController初始化代码
final PageController controller = PageController(
  viewportFraction: 0.8, // 可根据设计需求调整0~1之间的数值
  initialPage: 0,
);

// 组件部分修改如下
Container(
  child: Directionality(
    textDirection: TextDirection.rtl,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        PageView(
          controller: controller,
          padEnds: false, // 新增属性关闭首尾额外边距
          children: imgList
              .map((item) => Card(
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    shape: RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.circular(16)),
                    child: Image.network(
                      item,
                      height: 150,
                      fit: BoxFit.fill,
                    ),
                  ))
              .toList(),
        ),
      ],
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Behzod Rasulov