Flutter（二十一）：轮播图

使用 flutter_swiper 轮播库。

1 全屏轮播

import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

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

  _FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  List<Map> imgList = [
    {"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"},
    {"url": "https://www.itying.com/images/flutter/4.png"}
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("测试"),
      ),
      body: new Swiper(
        itemBuilder: (BuildContext context, int index) {
          return new Image.network(
            imgList[index]['url'],
            fit: BoxFit.fill,
          );
        },
        itemCount: imgList.length,
        pagination: new SwiperPagination(),
        control: new SwiperControl(),
        index: 0,
        loop: true,
        autoplay: true,
        onTap: (int index) {
          // 点击触发
          print(index);
        },
        onIndexChanged: (int index) {
          // 当用户手动拖拽或者自动播放引起下标改变的时候调用
          print(index);
        },
      ),
    );
  }
}

效果

2 顶部轮播自适应

使用 AspectRatio 结合实现效果，设置对应的比例。

import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

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

  _FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  List<Map> imgList = [
    {"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"},
    {"url": "https://www.itying.com/images/flutter/4.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(
                    imgList[index]['url'],
                    fit: BoxFit.fill,
                  );
                },
                itemCount: imgList.length,
                pagination: new SwiperPagination(),
                control: new SwiperControl(),
                index: 0,
                loop: true,
                autoplay: true,
                onTap: (int index) {
                  // 点击触发
                  print(index);
                },
                onIndexChanged: (int index) {
                  // 当用户手动拖拽或者自动播放引起下标改变的时候调用
                  print(index);
                },
              ),
            ),
          ),
          Row(
            children: <Widget>[Text('继续布局')],
          ),
        ],
      ),
    );
  }
}

效果