Flutter實現馬蜂窩小紅書自適應高度輪播圖

最終效果

項目地址

演示代碼地址

實現方法

使用PageView組件

NotificationListener能夠監聽PageView的改變，好比滑動的距離，頁面索引等，目前只使用的了索引。裏面的一些方法挺有用的。

NotificationListener(
                onNotification: (ScrollNotification scrollInfo) {
                  // print(scrollInfo.metrics.pixels);
                  // print(scrollInfo.metrics.viewportDimension);
                  // print(_controller.page);
                  this.setState(() {
                    this.activeIndex = _controller.page.round();
                  });
                  return true;
                },
                child: PageView(
                    controller: _controller,
                    children: pictrueList
                        .map((PictrueData data) => FadeInImage.assetNetwork(
                              placeholder: "lib/assets/loading_img.gif",
                              image: data.url,
                              fit: BoxFit.cover,
                              alignment: Alignment.center,
                            ))
                        .toList()),
              ),
複製代碼

AnimatedContainer

使用AnimatedContainer組件保證切換之後會有流程的過渡效果,表現的會平滑一些。

完整代碼

AnimatedContainer(
          duration: Duration(milliseconds: 300),
          height: pictrueData.height * deviceWidth / pictrueData.width,
          curve: Curves.ease,
          child: Stack(
            children: <Widget>[
              NotificationListener(
                onNotification: (ScrollNotification scrollInfo) {
                  // print(scrollInfo.metrics.pixels);
                  // print(scrollInfo.metrics.viewportDimension);
                  // print(_controller.page);
                  this.setState(() {
                    this.activeIndex = _controller.page.round();
                  });
                  return true;
                },
                child: PageView(
                    controller: _controller,
                    children: pictrueList
                        .map((PictrueData data) => FadeInImage.assetNetwork(
                              placeholder: "lib/assets/loading_img.gif",
                              image: data.url,
                              fit: BoxFit.cover,
                              alignment: Alignment.center,
                            ))
                        .toList()),
              ),
              Positioned(
                bottom: 10.0,
                right: 10.0,
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(0, 0, 0, 0.5),
                      borderRadius: BorderRadius.circular(20.0)),
                  child: Text(
                    '${activeIndex + 1}/${pictrueList.length}',
                    style: TextStyle(
                        color: const Color(0xffffffff), fontSize: 10.0),
                  ),
                ),
              )
            ],
          ),
        )
複製代碼

重點

首先，返回數據須要包含圖片的寬高信息，就像這樣:

List<PictrueData> pictrueList = [
    PictrueData(
        width: 1920.0,
        height: 1152.0,
        url:
            "http://admin.soscoon.com/uploadImages/24294a8960f7cec4a5bb77276b8d1804eddc0023.jpg"),
    PictrueData(
        width: 550.0,
        height: 810.00,
        url:
            "http://admin.soscoon.com/uploadImages/72041ef01b9c8dd543511968d8659817c0086145.jpeg"),
    PictrueData(
        width: 1600.0,
        height: 900.00,
        url:
            "http://admin.soscoon.com/uploadImages/c236aa0af948e5d8812d23bd9eb1878682f247d8.jpg"),
    PictrueData(
        width: 1900.0,
        height: 1200.00,
        url:
            "http://admin.soscoon.com/uploadImages/41b2b4490204912f345b80be4fa88d7f5c9487a7.jpg"),
    PictrueData(
        width: 1920.0,
        height: 1000.00,
        url:
            "http://admin.soscoon.com/uploadImages/52a138c4dfcfbaab74daec69f128a2dd6dbf558f.jpg"),
  ];
複製代碼

若是返回的只有圖片信息沒有寬高數據能夠使用如下方法去得到圖片的信息,這樣也能夠獲得圖片的寬高信息，不太建議，仍是直接叫後端給，咱們也方便處理，要是後端說他們給不了就拿上磚頭去叫他們加，就想偷懶。

class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    Image image = new Image.network(
        'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1564812422&di=a113f4b98d25442643ad9236f01ecbf5&src=http://hbimg.b0.upaiyun.com/0338cbe93580d5e6b0e89f25531541d455f66fda4a6a5-eVWQaf_fw658');
    Completer<ui.Image> completer = new Completer<ui.Image>();
    image.image.resolve(new ImageConfiguration()).addListener(
        ImageStreamListener(
            (ImageInfo info, bool _) => completer.complete(info.image)));
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Image Dimensions Example"),
      ),
      body: new ListView(
        children: [
          new FutureBuilder<ui.Image>(
            future: completer.future,
            builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
              if (snapshot.hasData) {
                return new Text(
                  '${snapshot.data.width}x${snapshot.data.height}',
                  style: Theme.of(context).textTheme.display3,
                );
              } else {
                return new Text('Loading...');
              }
            },
          ),
          image,
        ],
      ),
    );
  }
}
複製代碼

自適應輪播圖的高度咱們須要原始圖片的寬高比，或者知道原始圖的寬高。顯示的時候按照原始的寬高比進行等比例縮放。

_controller.page獲取到的是一個浮點數，相似1.0325441,使用round四捨五入出現的效果就是咱們拖到一半或以上就能夠獲得下一個activeIndex，activeIndex是一個整數。

_controller.page

flutter: 0.01314531968164951
flutter: 0.026430343836238882
flutter: 0.03609217958503115
flutter: 0.048169474271021494
flutter: 0.0517926626768186
flutter: 0.0590390394884128
flutter: 0.06386995736280894
flutter: 0.9918596275657323
flutter: 0.9928677347556618
flutter: 0.9948281247819616
flutter: 0.9955746971008173
flutter: 0.9966901944924708
flutter: 0.9971838269533462
flutter: 0.9978950491069947
flutter: 0.9981962948156735
flutter: 0.998685063281176
flutter: 1.0
複製代碼

// 當前展現的banner圖數據
PictrueData pictrueData = pictrueList[activeIndex];
// 等比縮放算出如今的高度
height: pictrueData.height * deviceWidth / pictrueData.width,
複製代碼

咱們動態獲取了圖片的寬度之後放入AnimatedContainer就能夠有過渡效果，真機和模擬器測試都很流暢，能夠已60幀渲染。