天天看點

輪播圖Banner功能的開發

1、

輪播圖Banner功能的開發

2、

使用插件 flutter_swiper

添加輪播圖

輪播圖Banner功能的開發
輪播圖Banner功能的開發

3、添加訓示器

輪播圖Banner功能的開發

4、

代碼:

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

class HomePage extends StatefulWidget{
  //_TabNavigatorState定義好後,就可以修改該函數的傳回值進行傳回
@override
_HomePageState  createState()=>_HomePageState();

}

//在dart裡面,如果要定義一個内部類,不能被外部通路的話,就可以以下劃線開頭
class _HomePageState extends State<HomePage>{
  List _imageUrls=[
    'http://pages.ctrip.com/commerce/promote/20180718/yxzy/img/640sygd.jpg',
    'http://dimg04.c-ctrip.com/images/700u0r000000gxvb93E54_810_235_85.jpg',
    'http://dimg04.c-ctrip.com/images/700c10000000pdili7D8B_780_235_57.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    //在build()方法裡面,可以将Scaffold()作為整個頁面的根節點
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              height: 160,
              child: Swiper(
                itemCount: _imageUrls.length,
                autoplay: true,
                itemBuilder: (BuildContext context,int index){
                  return Image.network(_imageUrls[index],fit: BoxFit.fill);
                },
                pagination: SwiperPagination(),
              ),
            )
          ],
        )
      )
    );
  }

}
           

注:

遇到的問題

1、Waiting for another flutter command to release the startup lock...

原因:異常關閉studio時插件沒下載下傳完

解決辦法:删除flutter安裝目錄下的flutter/bin/cache檔案夾下的lockfile檔案

如果無法删除或者提示需要權限時,可重新開機電腦試一下

2、flutter點選“Package get”後加載太慢

在環境變量中配置   變量名:PUB_HOSTED_URL和https://storage.flutter-io.cn

輪播圖Banner功能的開發

(我們在根據flutter中文網安裝flutter的時候,設定了環境變量PUB_HOSTED_URL為https://pub.flutter-io.cn .這其實是把flutter原來下載下傳第三方庫存的位址https://pub.dartlang.org改為了 https://pub.flutter-io.cn.   cn位址是專門給國内用的,但是内容沒有官方正宗org那個最新)

參考資料:https://blog.csdn.net/szintu/article/details/82454325

3、當配置完環境變量  變量名:PUB_HOSTED_URL和https://storage.flutter-io.cn後,點選package get,提示要下載下傳的插件在https://storage.flutter-io.cn  不存在

原因:專門為中國使用者提供的下載下傳位址中還沒有更新所需要下載下傳的插件

解決把辦法:将上面配置的變量  變量名:PUB_HOSTED_URL和https://storage.flutter-io.cn  删除

這樣預設還從位址https://pub.dartlang.org進行下載下傳,但是有時由于網絡或者運作商或者其它的問題,下載下傳不到,可以連接配接一下翻牆軟體或者連接配接手機的熱點試一下

4、pagination  [ˌpædʒɪˈneɪʃn]:分頁

注:搜尋插件位址:https://pub.dev/