好租客-04 首页轮播图实现

好租客04 首页轮播图实现

1、UI效果：

模拟器上效果显示有点瑕疵。

2、第三方库 flutter_swiper 引入

dependencies:
  flutter:
    sdk: flutter
  # 安装第三方的路由管理页面
  fluro: "^1.5.1"
  # 引入轮播图组件
  flutter_swiper: ^1.1.4  

3、轮播图使用

(1) 图片数据源
List _imgUrlList = [
    'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tdgve1j30ku0bsn75.jpg',
    'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2whp87sj30ku0bstec.jpg',
    'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tl1v3bj30ku0bs77z.jpg'
  ];
  

（2）swiper使用
import 'package:flutter_swiper/flutter_swiper.dart';

var screenWidth = MediaQuery.of(context).size.width;
var swiperHeight = screenWidth / 750 * 424.0;
Swiper(
	itemCount: _imgUrlList.length,
	autoplay: true,Container(
              height: swiperHeight,
              width: double.infinity,
              child: Swiper(
                  itemCount: _imgUrlList.length,
                  autoplay: true,
                  control: SwiperControl(),
                  pagination: SwiperPagination(margin: EdgeInsets.all(10.0)),
                  itemBuilder: (context, index) {
                    return Image.network(
                      _imgUrlList[index],
                      fit: BoxFit.cover,
                    );
                  }),
            )
	control: SwiperControl(),
	pagination: SwiperPagination(margin: EdgeInsets.all(10.0)),
	itemBuilder: (context, index) {
		return Image.network(
			_imgUrlList[index],
            fit: BoxFit.cover,
		);
	}
),