Flutter自繪組件：微信懸浮窗（二）

系列指路：
Flutter自繪組件：微信懸浮窗（一）
Flutter自繪組件：微信懸浮窗（三）
Flutter自繪組件：微信懸浮窗（四）

功能實現(xiàn)

在上一篇文章中，實現(xiàn)了FloatingButtonPainter，對不同形態(tài)的按鈕進(jìn)行了繪制。這次主要是實際運用起來，讓它實現(xiàn)“動”起來的效果。“動”細(xì)分下有按鈕間形態(tài)變化的邏輯、按鈕的拖拽事件、按鈕按下時引起的重繪，及按鈕拖拽后釋放的動畫效果。要實現(xiàn)這些功能復(fù)雜的功能，先新建一個StatefulWidget作為自繪組件的父級，命名為FloatingButton，這個類中會有一些需要用到的變量，具體如下:

class FloatingButton extends StatefulWidget {

  FloatingButton({
    @required this.imageProvider
  });
  final ImageProvider imageProvider; //按鈕中心logo
  @override
  _FloatingButtonState createState() => _FloatingButtonState();

}

class _FloatingButtonState extends State<FloatingButton> with TickerProviderStateMixin {

  double _left = 0.0; //按鈕在屏幕上的x坐標(biāo)
  double _top = 100.0;    //按鈕在屏幕上的y坐標(biāo)

  bool isLeft = true;    //按鈕是否在按鈕左側(cè)
  bool isEdge = true;    //按鈕是否處于邊緣
  bool isPress = false;    //按鈕是否被按下

  AnimationController _controller;
  Animation _animation;    // 松開后按鈕返回屏幕邊緣的動畫
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container();
  }
}

補(bǔ)坑Image

在上次文章中有講到Canvas中的Image是屬于ui庫中的一個私有類，只能通過監(jiān)聽ImageProvider的圖片流來獲取一個Future<ui.Image>的對象，更多詳細(xì)解釋可以參考ui.Image 加載探索 （https://cloud.tencent.com/developer/article/1622733)，具體代碼如下：

    //通過ImageProvider獲取ui.image
  Future<ui.Image> loadImageByProvider(
      ImageProvider provider, {
        ImageConfiguration config = ImageConfiguration.empty,
      }) async {
    Completer<ui.Image> completer = Completer<ui.Image>(); //完成的回調(diào)
    ImageStreamListener listener;
    ImageStream stream = provider.resolve(config); //獲取圖片流
    listener = ImageStreamListener((ImageInfo frame, bool sync) {
      //監(jiān)聽
      final ui.Image image = frame.image;
      completer.complete(image); //完成
      stream.removeListener(listener); //移除監(jiān)聽
    });
    stream.addListener(listener); //添加監(jiān)聽
    return completer.future; //返回
  }

函數(shù)返回了一個Future<ui.Image>的對象，如何把這個對象傳進(jìn)FloatingButtonPainter呢？Future對象，我們很自然想到了異步更新UI的FutureBuilder組件。大概看一下FutureBuilder的構(gòu)造函數(shù)：

FutureBuilder({
  this.future,
  this.initialData,
  @required this.builder,
})

future : 一個異步耗時的Future對象
builder : Widget構(gòu)建器。構(gòu)建簽名如下：
Function (BuildContext context, AsyncSnapshot snapshot)
主要講一下snapshot，它包含了當(dāng)前異步任務(wù)的狀態(tài)和結(jié)果，因此通過它獲取函數(shù)返回的Future<ui.Image>執(zhí)行后返回的ui.Image對象，具體代碼如下：

FutureBuilder(
              future:  loadImageByProvider(widget.imageProvider),
              builder: (context,snapshot) => CustomPaint(
                size: Size(50,50),//繪制區(qū)域50x50
                painter: FloatingButtonPainter(isLeft: isLeft, isEdge: isEdge, isPress: isPress, buttonImage: snapshot.data),
              ),//CustomPaint
            ),//FutureBuilder

CustomPaint在上篇文章中說到是配合CustomPainter使用實現(xiàn)自定義圖形繪制。

取色補(bǔ)充

上篇文章繪制各個部分的顏色選取都是根據(jù)微信懸浮窗的截圖然后通過在線取色網(wǎng)站進(jìn)行取色。


image

按鈕的拖拽事件和變化邏輯

按鈕的變化其實是和拖拽事件相關(guān)的，因為坐標(biāo)是按鈕形態(tài)變化的標(biāo)準(zhǔn)，當(dāng)x坐標(biāo)為0的時候便是左邊緣按鈕，為屏幕寬度減去自身寬度的時候便是右邊緣按鈕，處于兩者之間的時候就是中心按鈕的形態(tài)，而拖拽改變了組件的坐標(biāo)。拖拽事件需要注意的是，當(dāng)拖拽位置從邊緣到中間或者從中間到邊緣的時候，會觸發(fā)按鈕從邊緣按鈕到中心按鈕或中心按鈕到邊緣按鈕的形態(tài)變化。

拖拽事件可以使用到的組件有Draggable和GestureDetector，這里使用我較為熟悉的后者，具體代碼如下：

    GestureDetector(
            //拖拽更新事件
            onPanUpdate: (details){
              var pixelDetails = MediaQuery.of(context).size; //獲取屏幕信息
              
              //拖拽后更新按鈕信息，是否處于邊緣
              if(_left + details.delta.dx > 0 && _left + details.delta.dx < pixelDetails.width - 50{
                setState(() {
                  isEdge = false;
                });
              }else{
                setState(() {
                  isEdge = true;
                });
              }
              //拖拽更新坐標(biāo)
              setState(() {
                _left += details.delta.dx;
                _top += details.delta.dy;
              });
              
            },
            
            child: FutureBuilder(
              future:  loadImageByProvider(widget.imageProvider),
              builder: (context,snapshot) => CustomPaint(
                size: Size(50,50),
                painter: FloatingButtonPainter(isLeft: isLeft, isEdge: isEdge, isPress: isPress, buttonImage: snapshot.data),
              ),//CustomPaint
            ),//FutureBuilder
          ),//GestureDetector

按鈕按下時引起的重回及釋放時的動畫效果

按下和釋放這兩個手勢在GestureDetector中也可以進(jìn)行監(jiān)聽，但是這兩個手勢會與拖拽手勢發(fā)生競爭與沖突，導(dǎo)致按下與釋放兩個手勢失效或者需要靜止的情況下才能觸發(fā)按下與釋放兩個手勢事件，這明顯是不符合我們的要求。手勢沖突可以通過Listener直接識別原始指針事件來解決。就是在GestureDetector外面套一層Listener，在Listener中監(jiān)聽原始的按下和釋放指針事件。在按下是需要設(shè)置isPress為true，釋放的時候為false。且在釋放的時候是會存在一個從屏幕中間返回到屏幕邊緣的動畫，這個過程的邏輯為：釋放時，根據(jù)按鈕當(dāng)前位置，以屏幕寬度中線為準(zhǔn)線，位于屏幕左側(cè)的觸發(fā)從當(dāng)前位置返回左邊緣的動畫，且當(dāng)動畫結(jié)束時，按鈕從中心按鈕變化為左邊緣按鈕。右側(cè)同理。 示意圖如下：

image

具體代碼為：

Listener(
          //按下后設(shè)isPress為true，繪制選中陰影
         //按下事件
         onPointerDown: (details){
            setState(() {
              isPress = true;
            });
          },
          
          //按下后設(shè)isPress為false，不繪制陰影
          //放下后根據(jù)當(dāng)前x坐標(biāo)與1/2屏幕寬度比較，判斷屏幕在屏幕左側(cè)或右側(cè)，設(shè)置返回邊緣動畫
          //動畫結(jié)束后設(shè)置isLeft的值，根據(jù)值繪制左/右邊緣按鈕
          //釋放事件
          onPointerUp: (e) async{
            setState(() {
              isPress = false;
            });
            var pixelDetails = MediaQuery.of(context).size; //獲取屏幕信息
            if(e.position.dx <= pixelDetails.width / 2)
            {
              _controller = new AnimationController(vsync: this,duration: new Duration(milliseconds: 100)); //0.1s動畫
              _animation = new Tween(begin: e.position.dx,end: 0.0).animate(_controller)
                ..addListener(() {setState(() {
                  _left = _animation.value; //更新x坐標(biāo)
                });
                });
              await _controller.forward(); //等待動畫結(jié)束
              _controller.dispose();//釋放動畫資源
              setState(() {
                isLeft = true;  //按鈕在屏幕左側(cè)
              });
            }
            else
            {
              print(pixelDetails.width);
              _controller = new AnimationController(vsync: this,duration: new Duration(milliseconds: 100)); //0.1動畫
              _animation = new Tween(begin: e.position.dx,end: pixelDetails.width - 50).animate(_controller)  //返回右側(cè)坐標(biāo)需要減去自身寬度及50，因坐標(biāo)以圖形左上角為基點
                ..addListener(() {
                  setState(() {
                    _left = _animation.value; //動畫更新x坐標(biāo)
                  });
                });
              await _controller.forward(); //等待動畫結(jié)束
              _controller.dispose(); //釋放動畫資源
              setState(() {
                isLeft = false; //按鈕在屏幕左側(cè)
              });
            }

            setState(() {
              isEdge = true; //按鈕返回至邊緣
            });
          },

          child: GestureDetector(
            ....省略代碼
          ),//GestureDetector
        ),//Listener

完整代碼

FloatingButton完整代碼

import 'dart:ui' as ui;
import 'dart:async';
import 'package:flutter/material.dart';


class FloatingButton extends StatefulWidget {

  FloatingButton({
    @required this.imageProvider
  });
  final ImageProvider imageProvider;
  @override
  _FloatingButtonState createState() => _FloatingButtonState();

}

class _FloatingButtonState extends State<FloatingButton> with TickerProviderStateMixin{

  double _left = 0.0;  //按鈕在屏幕上的x坐標(biāo)
  double _top = 100.0;  //按鈕在屏幕上的y坐標(biāo)

  bool isLeft = true;    //按鈕是否在按鈕左側(cè)
  bool isEdge = true;    //按鈕是否處于邊緣
  bool isPress = false;   //按鈕是否被按下

  AnimationController _controller;
  Animation _animation; // 松開后按鈕返回屏幕邊緣的動畫

  @override
  Widget build(BuildContext context) {
    return Positioned(
        left: _left,
        top: _top,
        child: Listener(
          //按下后設(shè)isPress為true，繪制選中陰影
          onPointerDown: (details){
            setState(() {
              isPress = true;
            });
          },
          //按下后設(shè)isPress為false，不繪制陰影
          //放下后根據(jù)當(dāng)前x坐標(biāo)與1/2屏幕寬度比較，判斷屏幕在屏幕左側(cè)或右側(cè)，設(shè)置返回邊緣動畫
          //動畫結(jié)束后設(shè)置isLeft的值，根據(jù)值繪制左/右邊緣按鈕
          onPointerUp: (e) async{
            setState(() {
              isPress = false;
            });
            var pixelDetails = MediaQuery.of(context).size; //獲取屏幕信息
            if(e.position.dx <= pixelDetails.width / 2)
            {
              _controller = new AnimationController(vsync: this,duration: new Duration(milliseconds: 100)); //0.1s動畫
              _animation = new Tween(begin: e.position.dx,end: 0.0).animate(_controller)
                ..addListener(() {setState(() {
                  _left = _animation.value; //更新x坐標(biāo)
                });
                });
              await _controller.forward(); //等待動畫結(jié)束
              _controller.dispose();//釋放動畫資源
              setState(() {
                isLeft = true;  //按鈕在屏幕左側(cè)
              });
            }
            else
            {
              _controller = new AnimationController(vsync: this,duration: new Duration(milliseconds: 100)); //0.1動畫
              _animation = new Tween(begin: e.position.dx,end: pixelDetails.width - 50).animate(_controller)  //返回右側(cè)坐標(biāo)需要減去自身寬度及50，因坐標(biāo)以圖形左上角為基點
                ..addListener(() {
                  setState(() {
                    _left = _animation.value; //動畫更新x坐標(biāo)
                  });
                });
              await _controller.forward(); //等待動畫結(jié)束
              _controller.dispose(); //釋放動畫資源
              setState(() {
                isLeft = false; //按鈕在屏幕左側(cè)
              });
            }

            setState(() {
              isEdge = true; //按鈕返回至邊緣
            });
          },
          child: GestureDetector(
            //拖拽更新
            onPanUpdate: (details){
              var pixelDetails = MediaQuery.of(context).size; //獲取屏幕信息
              //拖拽后更新按鈕信息，是否處于邊緣
              if(_left + details.delta.dx > 0 && _left + details.delta.dx < pixelDetails.width - 50){
                setState(() {
                  isEdge = false;
                });
              }else{
                setState(() {
                  isEdge = true;
                });
              }
              //拖拽更新坐標(biāo)
              setState(() {
                _left += details.delta.dx;
                _top += details.delta.dy;
              });
            },
            child: FutureBuilder(
              future:  loadImageByProvider(widget.imageProvider),
              builder: (context,snapshot) => CustomPaint(
                size: Size(50.0,50.0),
                painter: FloatingButtonPainter(isLeft: isLeft, isEdge: isEdge, isPress: isPress, buttonImage: snapshot.data),
              ),
            ),
          ),
        ),
      );
  }

  //通過ImageProvider獲取ui.image
  Future<ui.Image> loadImageByProvider(
      ImageProvider provider, {
        ImageConfiguration config = ImageConfiguration.empty,
      }) async {
    Completer<ui.Image> completer = Completer<ui.Image>(); //完成的回調(diào)
    ImageStreamListener listener;
    ImageStream stream = provider.resolve(config); //獲取圖片流
    listener = ImageStreamListener((ImageInfo frame, bool sync) {
      //監(jiān)聽
      final ui.Image image = frame.image;
      completer.complete(image); //完成
      stream.removeListener(listener); //移除監(jiān)聽
    });
    stream.addListener(listener); //添加監(jiān)聽
    return completer.future; //返回
  }
}

調(diào)用如下：

FloatingButton(imageProvider: AssetImage('assets/Images/vnote.png')

使用網(wǎng)絡(luò)圖片則替換相應(yīng)的ImageProvider。

main.dart代碼：

void main(){
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue
      ),
      home: new Scaffold(
        appBar: new AppBar(title: Text('Flutter Demo')),
        body: Stack(
          children: <Widget>[
            FloatingButton(imageProvider: AssetImage('assets/Images/vnote.png'),)
          ],
        )
      )
    );
  }
}

便可以實現(xiàn)最終效果：

實現(xiàn)效果

總結(jié)

對于自繪組件，我們先要把各種形態(tài)繪制出來，再思考各種形態(tài)之間存在的邏輯關(guān)系和事件處理。對于需要實現(xiàn)的功能使用已有的組件去實現(xiàn)會大大增加開發(fā)的效率。目前已經(jīng)實現(xiàn)了懸浮窗點擊前的懸浮按鈕效果，下篇文章開始著手點擊后遮蓋層效果和列表效果的實現(xiàn)，如下圖所示：

image

有興趣的可以繼續(xù)關(guān)注。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容