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

Posted 2023-03-28

【中文标题】如何在颤动的PageView小部件中给出图像卡的宽度

【英文标题】：how to give width of image card in PageView widget in flutter

【发布时间】：2021-10-21 13:50:04

【问题描述】：

我想创建如下图所示的综合浏览量： 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(),
                        ),
                      ),
                    ],
                  ),
                ),
              ) 

【问题讨论】：

检查 BoxFit 值，atm 我不能，但 .fill 以外的其他东西可以做到这一点。

也可以尝试将它们放在SizedBox中

我认为使用carousel_slider 会很容易处理

【参考方案1】：

尝试使用 pageviewcontroller 更改视口：

  PageController _pageController;

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