dart 如何在转盘滑块的每张幻灯片上添加按钮

at0kjp5o  于 2023-06-19  发布在  其他
关注(0)|答案(2)|浏览(88)

我一直在使用Flutter和旋转木马滑块包来创建一个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(),
                      ),
                    ),
                  ),
}
jdzmm42g

jdzmm42g1#

有两个重要的想法:
1.使用Stack小部件显示左右箭头
1.使用CarouselController以编程方式控制carousel
在代码中:

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

tmb3ates2#

我添加了因素,以前移动图标

alignment: Alignment.bottomLeft,
          heightFactor: 7.7,

并添加了逻辑,只有在有移动项时才显示图标

if(maxImageIndex>0 && feedProvider.currentImageIndex > 0) Align(
              alignment: Alignment.bottomLeft,
              heightFactor: 7.7,
              child: IconButton(
                onPressed: () {
                  // Use the controller to change the current page
                  buttonCarouselController.previousPage();
                },
                icon: Icon(Icons.arrow_back_ios, color: Colors.grey,),
              ),
            ),//left

            onPageChanged: (value, read) {
              setState(() {
                feedProvider.currentImageIndex = value;
              });
            },

相关问题