您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-22(轮播图 flutter_swiper 、AspectRatio 横纵比组件)

2020-04-30【Flutter】1071人已围观

简介## AspectRatio 适配横纵比组件 ``` AspectRatio( aspectRatio: 16 / 9, // 设置比例 child:, ) ``` ## 轮播图组件 [文档： https://pub.dev/packages/flutter_swiper]( https://pub.dev/packages/flutter_swiper) > SwiperDemo.dart ![image](http://image.api

## AspectRatio 适配横纵比组件

```
AspectRatio(
    aspectRatio: 16 / 9, // 设置比例
    child:,
)
```

## 轮播图组件

[文档： https://pub.dev/packages/flutter_swiper]( https://pub.dev/packages/flutter_swiper)

> SwiperDemo.dart

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200320174404.png)

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

class SwiperDemoPage extends StatefulWidget {
  SwiperDemoPage({Key key}) : super(key: key);
  _SwiperDemoPageState createState() => _SwiperDemoPageState();
}

class _SwiperDemoPageState extends State<SwiperDemoPage> {
  List<Map> 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"}
  ];
  @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(
                    this.list[index]["url"],
                    fit: BoxFit.fill,
                  );
                },
                itemCount: list.length,
                pagination: new SwiperPagination(),
                autoplay: true,
                control: new SwiperControl(),
              ),
            ),
          )
        ],
      ),
    );
  }
}

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-21(官方自带日期组件[showDatePicker、showTimePicker]、第三方日期组件)

下一篇：flutter-23(dialog 弹出层、 AlertDialog、SimpleDialog、showModalBottomSheet 、showToast)