如何在轮播滑块的每张幻灯片上添加按钮

Question

我一直在使用 flutter 和 carousel slider 包来创建 3 个图像的图像滑块 https://pub.dev/packages/carousel_slider 但是，我想像您一样在图像顶部的每个滑块上添加一个按钮例如，在电子商务应用程序中查看“立即购买”促销等，如下所示：

class _MainScreenState extends State<MainScreen> {
  final featuredImages = [
    'lib/assets/images/elitefeatured.jpg',
    'lib/assets/images/guabafeatured.jpg',
    'lib/assets/images/eliteclubfeatured.jpg'
  ]; 
  @override
  Widget build(BuildContext context) { //extra non-relevant code in here

 Padding(
                    padding: EdgeInsets.only(
                      top: 85,
                    ),
                    child: SizedBox(
                      width: 450,
                      height: 300,
                      child: CarouselSlider(
                        options: CarouselOptions(
                          autoPlay: true,
                        ),
                        items: featuredImages.map((featuredImage) {
                          return Padding(
                            padding: EdgeInsets.symmetric(horizontal: 7),
                            child: Image.asset(featuredImage),
                          );
                        }).toList(),
                      ),
                    ),
                  ),
}

Answer 1

有两个重要的想法：

1. 使用Stack小部件显示向右和向左箭头
2. 使用 aCarouselController以编程方式控制您的轮播

在代码中：

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class _MainScreenState extends State<MainScreen> {
  /// Create a controller to control the carousel programmatically
  CarouselController carouselController = CarouselController();

  final featuredImages = [
    'lib/assets/images/elitefeatured.jpg',
    'lib/assets/images/guabafeatured.jpg',
    'lib/assets/images/eliteclubfeatured.jpg'
  ];

  @override
  Widget build(BuildContext context) {
    //extra non-relevant code in here

    Padding(
      padding: EdgeInsets.only(
        top: 85,
      ),
      child: SizedBox(
        width: 450,
        height: 300,
        child: Stack(
          children: [
            CarouselSlider(
              carouselController: carouselController, // Give the controller
              options: CarouselOptions(
                autoPlay: true,
              ),
              items: featuredImages.map((featuredImage) {
                return Padding(
                  padding: EdgeInsets.symmetric(horizontal: 7),
                  child: Image.asset(featuredImage),
                );
              }).toList(),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: IconButton(
                onPressed: () {
                  // Use the controller to change the current page
                  carouselController.previousPage();
                },
                icon: Icon(Icons.arrow_back),
              ),
            ),
            Align(
              alignment: Alignment.centerRight,
              child: IconButton(
                onPressed: () {
                  // Use the controller to change the current page
                  carouselController.nextPage();
                },
                icon: Icon(Icons.arrow_forward),
              ),
            ),
          ],
        ),
      ),
    );
  }
}