Flutter – 旋转木马滑块

旋转木马滑块是当今大多数应用程序中使用的最流行的图像滑块之一。这些旋转木马滑块主要出现在各种电子商务网站中，例如亚马逊、Flipkart、Myntra 等等。在滑块中显示图像可提供有吸引力的用户体验。由于这些滑块是自动化的，您可以看到其中的各种类型的图像和内容。

旋转木马滑块的属性：

• 项目：我们必须在其中声明在我们的应用程序中使用的资产图像或网络图像
• 选项：它由许多属性组成，例如：

1. 高度：显示图像的卡片总高度
2. 自动播放：卡片一次自动滑动
3. autoplaycurve：决定动画曲线
4. aspectRatio： Aspect Ratio 用于声明高度
5. autoPlayAnimationDuration：用于声明自动幻灯片的时间

在本文中，我们将研究 Carousel Slider 在Flutter应用程序中的实现。要在Flutter实现 Carousel Slider，您必须遵循以下步骤：

第一步：首先在lib文件夹下的pubspec.yaml文件中添加Carousel Slider依赖

我们在位于依赖项中的lib文件夹中的pubspec.yaml文件中添加了 Carousel Slider 的依赖项，如下所示：

Dart

dependencies:
  
    carousel_slider: ^2.3.1

现在点击pub.get进行配置。

第 2 步：现在导航到 main。 dart() 文件并返回 Material App()。

首先，我们在 main函数的runApp中声明了MyApp() 。然后我们为 MyApp 创建了StatelessWidget ，其中我们返回了MaterialApp()。在这个MaterialApp() 中，我们给出了应用程序的标题，然后将应用程序的主题声明为深色主题。然后我们在主页中给出了我们的第一个屏幕或滑块应用程序： HomePage()

Dart

void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        
      // Title of App
      title: 'GFG slider',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      darkTheme: ThemeData.dark(),
        
      //First Screen of Slider App
      home: HomePage(),
    );
  }
}

第 3 步：现在在 HomePage 中导入 Carousel Slider 依赖项。 dart() 文件。

在主页。 dart()首先我们必须导入我们的包 carousel-slider。dart。然后我们在Scaffold() 中创建了appbar 。在这个appbar，我们已经给出了应用程序的标题。之后。在主体内部，我们已经声明了ListView() ，我们在其中声明了CarouselSlider() ，其中我们给出了 5 个项目。每个项目都放置在一个Container() 中，它由属性组成，例如从四面八方给出的边距。之后，我们提供了用于装饰我们的 Container() 的 boxdecoration。我们将boderRadius 指定为圆形。这使得我们的 Container() 通过给定一个特定的半径从四面八方四舍五入。现在我们给出了一个图像，其中我们已经声明了DecorationImage() ，它用于通过 URL 在我们的 Container() 中显示图像。并将图像拟合为BoxFit.cover。将图像调整为容器大小。现在对于其他 4 个容器，我们遵循了相同的步骤。之后，我们在选项中声明了CarouselOptions()

Dart

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
  
  
class  HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GFG Slider"),
      ),
      body: ListView(
        children: [
          CarouselSlider(
              items: [
                  
                //1st Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                  
                //2nd Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                  
                //3rd Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                  
                //4th Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                  
                //5th Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
  
          ],
              
            //Slider Container properties
              options: CarouselOptions(
                height: 180.0,
                enlargeCenterPage: true,
                autoPlay: true,
                aspectRatio: 16 / 9,
                autoPlayCurve: Curves.fastOutSlowIn,
                enableInfiniteScroll: true,
                autoPlayAnimationDuration: Duration(milliseconds: 800),
                viewportFraction: 0.8,
              ),
          ),
        ],
      ),
  
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！