Flutter实现图片轮播carousel slider实例竟然是如此简单

已收录   阅读次数: 2,315
2021-07-1020:51:46 发表评论
摘要

伯衡君发现很多App会有首页的轮播图,Flutter制作的App自然也有这个组件,不过这个需要安装第三方支撑库,实现图片的轮播效果,这个组件的名称是carousel_slider,可以从pub.dev上找到资料,本篇就是以这个组件为实例,来实现图片轮播效果……

分享至:
Flutter实现图片轮播carousel slider实例竟然是如此简单

开篇寄语

伯衡君发现很多App会有首页的轮播图,Flutter制作的App自然也有这个组件,不过这个需要安装第三方支撑库,实现图片的轮播效果,这个组件的名称是carousel_slider,可以从pub.dev上找到资料,本篇就是以这个组件为实例,来实现图片轮播效果。

相关内容

内容详情

以下内容大多是更改lib下的main.dart文件内容,删掉里面的内容,复制粘贴代码,开启调试就可以出现了。

想要实现图片轮播,可以使用carousel_slider这个组件,安装和使用文档,可以参看这个地址:carousel_slider,安装完成后,试举例如下:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List data = [
    {
      "title": "Image 1",
      "url":
          "https://images.pexels.com/photos/1525043/pexels-photo-1525043.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
    {
      "title": "Image 2",
      "url":
          "https://images.pexels.com/photos/1525042/pexels-photo-1525042.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
    {
      "title": "Image 3",
      "url":
          "https://images.pexels.com/photos/1525041/pexels-photo-1525041.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
    {
      "title": "Image 4",
      "url":
          "https://images.pexels.com/photos/1525044/pexels-photo-1525044.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
    {
      "title": "Image 5",
      "url":
          "https://images.pexels.com/photos/1525045/pexels-photo-1525045.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
    {
      "title": "Image 6",
      "url":
          "https://images.pexels.com/photos/1525046/pexels-photo-1525046.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Column(
        children: [
          CarouselSlider(
            options: CarouselOptions(
              autoPlay: true,
              autoPlayInterval: Duration(seconds: 2),
              autoPlayAnimationDuration: Duration(milliseconds: 400),
              height: 300,
            ),
            items: data.map((item) {
              return GridTile(
                child: Image.network(item["url"], fit: BoxFit.cover),
                footer: Container(
                    padding: EdgeInsets.all(15),
                    color: Colors.black54,
                    child: Text(
                      item["title"],
                      style: TextStyle(color: Colors.white, fontSize: 20),
                      textAlign: TextAlign.right,
                    )),
              );
            }).toList(),
          ),
          SizedBox(height: 30),
          Text(
            'Other Content',
            style: TextStyle(
              fontSize: 24,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

生成效果如下图所示:

Flutter实现图片轮播carousel slider实例竟然是如此简单
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: