輪播圖組件


一、Flutter 輪播圖組件
地址:https://pub.dev/packages/flutter_swiper
 
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
 
class SwiperPage extends StatefulWidget {
SwiperPage({Key key}) : super(key: key);
_SwiperPageState createState() => _SwiperPageState();
}
class _SwiperPageState extends State<SwiperPage> {
List<Map> list=[
{
"url":"https://www.itying.com/images/flutter/1.png"
},
{
"url":"https://www.itying.com/images/flutter/2.png"
},
{
"url":"https://www.itying.com/images/flutter/3.png"
}
];湖北眾猿騰網絡科技有限公司
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('輪播圖組件演示'),
),
body: Column(
children: <Widget>[
Container(
width: double.infinity,
child: AspectRatio(
aspectRatio: 16/9,
child: new Swiper(
itemBuilder: (BuildContext context,int index){
return
new
Image.network(this.list[index]["url"],fit: BoxFit.fill,);
},
itemCount: list.length,
pagination: new SwiperPagination(),
autoplay: true,
// control: new SwiperControl(),
),
),
)
],
),
);
}
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM