轮播组件

2020-10-06  本文已影响0人  编程的猫

在文件pubspec.yaml中添加轮播的依赖组件:

  #轮播组件
  flutter_swiper: ^1.0.6

示例代码:

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

class SwipBannerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return SwipBannerState();
  }
}

class SwipBannerState extends State<SwipBannerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("轮播组件"),
      ),
      //MediaQuery.of(context).size.width 铺满全屏
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: 220.0,
        child: Swiper(
          itemCount: 3,
          itemBuilder: _itemBuilder,
          pagination: SwiperPagination(
              builder: DotSwiperPaginationBuilder(
                  activeColor: Colors.white, color: Colors.black54)),
          control: SwiperControl(),
          scrollDirection: Axis.horizontal,
          autoplay: true,
          onTap: (index) => print('点击了第$index个'),
        ),
      ),
    );
  }

  Widget _itemBuilder(BuildContext context, int index) {
    return Image.network(
      "https://wanandroid.com/blogimgs/bfcf57e5-aa5d-4ca3-9ca9-245dcbfd31e9.png",
      fit: BoxFit.fill,
    );
  }
}

更多内容请查看:https://blog.csdn.net/u011272795/article/details/82776861?utm_medium=distribute.pc_relevant.none-task-blog-title-1&spm=1001.2101.3001.4242

上一篇 下一篇

猜你喜欢

热点阅读