Flutter(Widget)-轮播图

截屏2022-06-28 21.16.34.png

flutter_swiper: ^1.1.6

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class ZFLSwiperPage extends StatefulWidget {
  @override
  _ZFLSwiperPageState createState() => _ZFLSwiperPageState();
}

class _ZFLSwiperPageState extends State<ZFLSwiperPage> {
  List 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"},
    {"url": "https://www.itying.com/images/flutter/4.png"}
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        children: [
          AspectRatio(
            aspectRatio: 16 / 9,
            child: Swiper(
              itemBuilder: (BuildContext context, int index) {
                return Image.network(
                  list[index]["url"],
                  fit: BoxFit.fill,
                );
              },
              itemCount: list.length,
              autoplay: true,
              pagination: SwiperPagination(),
            ),
          ),
          Container(
            padding: EdgeInsets.only(left: 10),
            alignment: Alignment.topLeft,
            child: Text("张三"),
          )
        ],
      ),
    );
  }
}

1655690737403702.gif