Flutter 轮播图制作（附完整代码）

最新推荐文章于 2024-08-09 08:02:28 发布

东宇科技

最新推荐文章于 2024-08-09 08:02:28 发布

阅读量975

点赞数

分类专栏： flutter

本文链接： https://blog.csdn.net/ldy889/article/details/109548085

版权

flutter 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

首先是引入swper组件 flutter_swiper: ^1.1.6

然后自动执行了flutter packages get.

写一个Future,这个是可以用dio获取数据。简单起见，我就直接返回数据了。

import 'package:dio/dio.dart';
import 'dart:async';
import 'dart:io';
import '../config/service_url.dart';
// 获取首页主体内容

Future getHomePageContent() async {
  print('开始获取首页主体。。。。'); //最好是网络图片。
  return {
    "data": {
      "slides": [
        {
          "image":
              "http://yuddef32ef320Max.jpg" 
        },
        {
          "image":
              "http://yuebebfMax.jpg"
        },
        {
          "image":
              "http://yuefa420bee211d650Max.jpg"
        }
      ]
    }
  };
}

修改lib下的main.dart.

import 'package:flutter/material.dart'; 
import 'pages/index_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
          title: '百姓生活+',
          debugShowCheckedModeBanner: false, //Flutter去除右上角Debug标签
          theme: ThemeData(primaryColor: Colors.pink),
          home: IndexPage()),
    );
  }
}

不管你愿不愿意，本例赠送了底部导航条。呵呵就是这个pages/indexPage.dart

import 'package:flutter/material.dart'; //谷歌 子墨
import 'package:flutter/cupertino.dart'; //ios 风格
import 'cart_page.dart';
import 'category_page.dart';
import 'home_page.dart';
import 'member_page.dart';

class IndexPage extends StatefulWidget {
  IndexPage({Key key}) : super(key: key);

  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), label: "首页"),
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.search), label: "分类"),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.shopping_cart), label: "购物车"),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.profile_circled), label: "会员中心"),
  ];

  final List tabBodies = [HomePage(), CategoryPage(), CartPage(), MemberPage()];
  int currentIndex = 0;
  var currentPage;
  @override
  void initState() {
    // TODO: implement initState
    currentPage = tabBodies[currentIndex];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomTabs,
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (index) {
          setState(() {
            currentIndex = index;
            currentPage = tabBodies[currentIndex];
          });
        },
      ),
      body: currentPage,
    );
  }
}

首先进来的是homePage(),其他几个page.类似，我就不贴了。轮播图只是在主页有。

import 'dart:convert';
import 'package:flutter/material.dart';
import '../service/service_method.dart';
import '../component/home_swiper.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String homePageContent = "正在获取数据";

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text(homePageContent),
        ),
        body: FutureBuilder(
          future: getHomePageContent(),
          builder: (context, snapshot) {
            //这里执行了2次。  ConnectionState.wait
            if (snapshot.connectionState == ConnectionState.done) {
              print("datxxxa");
              print(snapshot.data);
              var data = snapshot.data;
              print("datxxxb");
              print(data);
              List<Map> swiper = (data['data']['slides'] as List).cast();
              print(swiper);
              return Column(
                  children: <Widget>[SwiperDiy(swiperDataList: swiper)]);
            }

            return Center(
              child: Text("等下"),
            );
            // return Column(children: <Widget>[
            //   SwiperDiy(swiperDataList)
            // ],)
          },
        ),
      ),
    );
  }
}

差点忘记还有最关键的 SwiperDiy ,这个高度应该是定死的

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

class SwiperDiy extends StatelessWidget {
  final List swiperDataList;
  SwiperDiy({this.swiperDataList});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 333,
      child: Swiper(
        itemCount: swiperDataList.length,
        pagination: SwiperPagination(),
        autoplay: true,
        control: new SwiperControl(),
        itemBuilder: (BuildContext context, int index) {
          print(swiperDataList[index]['image']);
          return Image.network("${swiperDataList[index]['image']}");
        },
      ),
    );
  }
}

轮播图基本的参数有：