用 flutter 实现轮播图

最新推荐文章于 2024-09-02 09:44:27 发布

Lavau

最新推荐文章于 2024-09-02 09:44:27 发布

阅读量1k

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/snakehj/article/details/96599776

版权

flutter 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本博客使用 flutter 实现轮播图。
了解更多

源代码

///第一个dart文件
import 'package:flutter/material.dart';
import 'package:flutter_shop/pages/index_page.dart';

///能套一个方便的组件的话，就套一个，方便以后修改
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: IndexPage(),
    );
  }
}

///第二个dart 文件
import 'package:flutter/material.dart';
import 'package:flutter_shop/service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:convert';

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

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  String homePageContent = '正在获取数据';

  List swiperDateList = [
    'https://i0.hdslb.com/bfs/sycp/creative_img/201907/752528c6f4b9dc2724dd02fd5a92f689.jpg@880w_440h.jpg',
    'https://i0.hdslb.com/bfs/sycp/creative_img/201907/c25fad63f4c27dc59c597b779454ae16.jpg@880w_440h.jpg',
    'https://i0.hdslb.com/bfs/archive/0c735996f2ec270a2bb6e003136dea541c493e2f.jpg@880w_440h.jpg',
    'https://i0.hdslb.com/bfs/archive/2a17825d9738c3f862149d74342d2b27d99653c5.jpg@880w_440h.jpg',
  ]；
  
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Scaffold(
        body:SingleChildScrollView(
          // controller: controller,
          child: Column(
            children: <Widget>[Container(
              height: 333,
              child: Swiper(
                itemBuilder: (BuildContext context, int index){
                  return Image.network('${swiperDateList[index]}');
                },
                itemCount: swiperDateList.length,
                pagination: SwiperPagination(),
                autoplay: true,
              )
            )],
          ),
        ),
       ),
    );
  }
}

使用 Swiper 组件实现图片的轮播
Swiper(
itemBuilder: (BuildContext context, int index){
return Image.network(’${swiperDateList[index]}’);
},
itemCount: swiperDateList.length,
pagination: SwiperPagination(),
autoplay: true,
)