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

【问题标题】：How to add button on each slide of carousel slider如何在轮播滑块的每张幻灯片上添加按钮
【发布时间】：2021-11-24 21:18:06
【问题描述】：

我一直在使用颤振和轮播滑块包来创建一个包含 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(),
                      ),
                    ),
                  ),
}

【问题讨论】：

用Stack包裹你的CarouselSlider
您能详细说明一下吗？我如何为每张图片添加不同的按钮
不，您不需要为每个图像添加按钮，CarouselSlider 小部件将出现在 Stack 和 Stack 有 3 个小部件，每侧 2 个箭头和一个滑块

标签： flutter dart mobile

【解决方案1】：

有两个重要的想法：

使用Stack 小部件显示您的左右箭头
使用CarouselController 以编程方式控制您的轮播

在代码中：

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

【讨论】：