首頁輪播,並屏幕適配

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

相關文章
相關標籤/搜索