Flutter實戰視頻-移動電商-14.首頁_url_launcher一鍵撥打店長電話

14.首頁_url_launcher一鍵撥打店長電話

首頁撥打電話的功能。

 

接收兩個值，一個是店長的頭像，一個是電話號碼，

然后開始寫我們的build方法。點擊圖片的時候要有一個撥打電話的動作。我們要接收一個單擊的事件。這里就可以用我們InkWell()來完成

這樣我們的店長模塊基本就寫完了。

 

准備下數據，看下UI的效果

 

從json數據中獲取圖片和電話。調用我們的店長電話widget展示出來

 

展示效果

 

 

撥打電話模塊

需要用到一個插件

插件的地址：

https://github.com/flutter/plugins/tree/master/packages/url_launcher

依然在我們的pubspec.yaml配置包

 

解決package一直下載中，但是下載不下來的問題

在我們的homePage里面添加引用

添加引用

這里遇到一個坑，添加完成包的配置以后，一直在下載更新，。科學的上網下載也沒下載來。 后來干脆開着電腦自己下去吧 就睡覺去了 結果第二天還沒下載完。。。。。-_-!蛋疼

 

 

重寫一個內部方法

11分41秒

 

package下載不了解決方法

https://www.jianshu.com/p/147f0e20c312

https://www.jianshu.com/p/22675c1632dc

先是根據上面文章增加了兩個環境變量

 

刪除項目的：pubspec.lock文件。

下面三個文件是從

 

下面的是參考文章：https://github.com/flutter/flutter/issues/17422

D:\Flutter\flutter\bin\cache\lockfile刪除掉，剛開始不能刪除，然后我重啟電腦才可以刪除。

然后再打開VSCode重新下載包就沒問題了。

 

更新包成功：並沒有翻牆

 繼續寫代碼：

Home_Page內添加引用：

 

店長模塊，點擊的事件這里

在店長模塊里面，重新寫一個內部方法：_launchURL。先用canLauncher判斷一下這個url能不能訪問到。如果能就執行laucher方法。不能就拋出異常。

因為我們這里使用的是一個異步的，所以要用await等待一下。

又遇到錯誤：no connected devices

我直接打安卓studio運行原來最開始創建的一個項目，發現也不行，運行不起來

 

自己重新再去創建一個設備試試吧。發現也是不行  還是同樣的問題

之前上面的問題package下載不下來。有個評論說要把：C:\Users\wjw\.android

下的三個文件刪除，我按照 此方法把三個文件剪切出去了。就出了此問題。 我查了很多的方法都不行，就想着，再復制回來試試

在android studio里面發現可以運行flutter的程序了。

但是在VSCode里面，可能需要下載一些東西，運行flutter run 比較長一段時間之后就可以運行了

就是以下三個文件

cache文件件

adbkey

adbkey.pub文件

 繼續代碼

糾正一個地方tel的后面是帶冒號的

 

效果展示

點擊就會跳轉到撥打電話的頁面

點擊三下返回的按鈕 就會跳轉到原來的app首頁上了。

 

換成打開網址的形式：

點擊就打開了網址：

 

最終代碼：

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:convert';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String homePageContent='正在獲取數據';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('百姓生活+')),
      body: FutureBuilder(
        future: getHomePageContent(),
        builder: (context, snapshot) {
          if(snapshot.hasData){
            var data=json.decode(snapshot.data.toString());
            List<Map> swiper=(data['data']['slides'] as List).cast();
            List<Map> navigatorList=(data['data']['category'] as List).cast();
            String adPicture=data['data']['advertesPicture']['PICTURE_ADDRESS'];
            String leaderImage=data['data']['shopInfo']['leaderImage'];
            String leaderPhone=data['data']['shopInfo']['leaderPhone'];
            return Column(
              children: <Widget>[
                SwiperDiy(swiperDateList: swiper),
                TopNavigator(navigatorList:navigatorList ,),
                AdBanner(adPicture:adPicture),
                LeaderPhone(leaderImage: leaderImage,leaderPhone: leaderPhone,)
              ],
            );
          }else{
            return Center(child: Text('加載中....'));
          }
        },
      ),
    );
  }
}
//首頁輪播插件
class SwiperDiy extends StatelessWidget {
  final List swiperDateList;
  //構造函數
  SwiperDiy({this.swiperDateList});

  @override
  Widget build(BuildContext context) {
  
   

    print('設備的像素密度：${ScreenUtil.pixelRatio}');
    print('設備的高：${ScreenUtil.screenWidth}');
    print('設備的寬：${ScreenUtil.screenHeight}');

    return Container(
      height: ScreenUtil().setHeight(333),//
      width:ScreenUtil().setWidth(750),
      child: Swiper(
        itemBuilder: (BuildContext context,int index){
          return Image.network("${swiperDateList[index]['image']}",fit: BoxFit.fill,);
        },
        itemCount: swiperDateList.length,
        pagination: SwiperPagination(),
        autoplay: true,
      ),
    );
  }
}

class TopNavigator extends StatelessWidget {
  final List navigatorList;

  TopNavigator({Key key, this.navigatorList}) : super(key: key);

  Widget _gridViewItemUI(BuildContext context,item){
    return InkWell(
      onTap: (){print('點擊了導航');},
      child: Column(
        children: <Widget>[
          Image.network(item['image'],width: ScreenUtil().setWidth(95)),
          Text(item['mallCategoryName'])
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    if(this.navigatorList.length>10){
      this.navigatorList.removeRange(10,this.navigatorList.length);//從第十個截取，后面都截取掉
    }
    return Container(
      height: ScreenUtil().setHeight(320),//只是自己大概預估的一個高度，后續可以再調整
      padding: EdgeInsets.all(3.0),//為了不讓它切着屏幕的邊緣，我們給它一個padding
      child: GridView.count(
        crossAxisCount: 5,//每行顯示5個元素
        padding: EdgeInsets.all(5.0),//每一項都設置一個padding，這樣他就不挨着了。
        children: navigatorList.map((item){
          return _gridViewItemUI(context,item);
        }).toList(),
      ),
    );
  }
}

class AdBanner extends StatelessWidget {
  final String adPicture;

  AdBanner({Key key, this.adPicture}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.network(adPicture),
    );
  }
}

//店長電話模塊
class LeaderPhone extends StatelessWidget {
  final String leaderImage;//店長圖片
  final String leaderPhone;//店長電話 


  LeaderPhone({Key key, this.leaderImage,this.leaderPhone}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: InkWell(
        onTap: _launchURL,
        child: Image.network(leaderImage),
      ),
    );
  }

  void _launchURL() async {
    String url = 'tel:'+leaderPhone;
    //String url = 'http://jspang.com';
    if(await canLaunch(url)){
      await launch(url);
    }else{
      throw 'url不能進行訪問，異常';
    }
  }
}