首页轮播,并屏幕适配

1、添加依赖ide

flutter_swiper: ^1.1.6
flutter_screenutil: ^0.6.1

查看最新版本:https://pub.flutter-io.cnui

2、代码spa

import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

class _HomePageState extends State<HomePage> {
  List _imageUrls = [
    'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg',
    'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg',
    'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg',
    'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg',
    'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'
    ];

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil.getInstance()..init(context);

    return Scaffold(
      body: Center(
       child: Column(
         children: <Widget>[
           Container(
             width:ScreenUtil().setWidth(1080),
             height:ScreenUtil().setHeight(500),
             child: Swiper(
               pagination: SwiperPagination(
                 alignment: Alignment.bottomCenter, //指示器显示的位置
                 margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),// 距离调整 
                 builder: DotSwiperPaginationBuilder(// 指示器构建
                 space: 2, // 点之间的间隔
                 size: 6,// 没选中时的大小
                 activeSize: 12,// 选中时的大小
                 color: Colors.white, // 没选中时的颜色
                 activeColor: Colors.yellow),//选中时的颜色
               ),
               itemCount: _imageUrls.length,
               autoplay: true,
               itemBuilder: (BuildContext contex,int index){
                 return Image.network(
                   _imageUrls[index],
                   fit: BoxFit.fill
                 );
               },
               ),
           )
         ],
       ),
      ),
    );
  }
}

参考:https://www.jianshu.com/p/3f6770f823dd.net

相关文章
相关标签/搜索