Question

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

我尝试使用carousels插件和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),
   ),
),

Answer 1

我通过同时使用Swiper和Row of Arrow使其工作，并带有以下代码：

      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.
              ],
            ),
          ),
        ],
      ),

谢谢您的贡献。

带有内部箭头的颤振幻灯片

1 个答案: