如何在颤动的PageView小部件中给出图像卡的宽度

Question

我想创建如下图所示的综合浏览量： figma design

但我所拥有的就像下图一样： my flutter pageview widget

Pageview 占用了视口的全宽。我怎样才能使我的网页浏览量像第一张图片一样。 我的代码如下：

  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);
  }