美文网首页
轮播组件

轮播组件

作者: 编程的猫 | 来源:发表于2020-10-06 14:45 被阅读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

相关文章

  • MUI组件(4)

    slide(轮播组件) 轮播组件是MUI提供的核心组件之一,基于轮播组件衍生出了图片轮播、可拖动式图文表格、可拖动...

  • 面向对象实战

    封装轮播组件 轮播 封装曝光加载组件 曝光加载 封装Tab 组件 Tab组件

  • 组件

    题目1: 封装一个轮播组件轮播组件轮播组件2,使用IIFE 题目2: 封装一个曝光加载组件曝光加载组件 题目3: ...

  • 面向对象实战

    代码预览 tab组件懒加载组件无限轮播组件无限轮播二次封装组件modal组件日历组件

  • 面向对象 实战 -常用JS组件

    轮播组件轮播二次封装预览 曝光加载组件预览 Tab 组件预览 日历组件预览 Modal 组件预览

  • 封装组件-面向对象

    tab组件化tab组件化代码 图片曝光组件化图片曝光组件化代码 轮播组件化轮播组件化代码

  • 高级3 组件

    轮播组件曝光组件tab组件

  • 高级任务3 面向对象实战

    tab组件轮播组件曝光组件

  • 3面向对象实战

    参考:tab组件229曝光组件187轮播组件172轮播二次封装154 我的: 1: 封装一个轮播组件 http:/...

  • 面向对象实战

    tab组件 曝光组件 轮播

网友评论

      本文标题:轮播组件

      本文链接:https://www.haomeiwen.com/subject/gojtpktx.html