0

如何在 Flutter 中实现这种行为?任何小部件或插件示例?

看这个动图

我尝试了轮播插件和 viewPagers 小部件,但无法使其工作。

这是我开始使用的示例代码。

CarouselSlider(
   items: [
        Container(child: Text("Complimentary"), width: double.infinity),
        Container(child: Text("Complimentary"), width: double.infinity),
        Container(child: Text("Complimentary"), width: double.infinity),
        Container(child: Text("Complimentary"), width: double.infinity),
        Container(child: Text("Complimentary"), width: double.infinity),
   ],
   options: CarouselOptions(
        height: 39 * resizeFactor,
        autoPlay: false,
        enlargeCenterPage: true,
        autoPlayInterval: Duration(seconds: 10),
   ),
),
4

1 回答 1

0

我通过使用 Swiper 和 Row of arrows 使其工作,代码如下:

      Stack(
        children: [
          Container(
            height: 39 * resizeFactor,
            child: Swiper(
              itemCount: 4,
              itemBuilder: (context, index) => getIndexWidget(index), // -> Text widget.
              viewportFraction: 0.4,
              onIndexChanged: (value) {
                setState(() => carouselIndex = value);
              },
              loop: false,
              controller: swiperController,
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 30 * resizeFactor),
            height: 39 * resizeFactor,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                getIndicatorWidget(false),  // back arrow icon.
                getIndicatorWidget(true),   // forward arrow icon.
              ],
            ),
          ),
        ],
      ),

感谢您的贡献。

于 2020-06-15T00:33:49.043 回答