Flutter仿微信,支付宝密码输入框+自定义键盘

效果如下图所示:

点击查看原图


当中的布局形式,大家可根据自己的具体需求来调整就好了,我这里写的demo是这样的布局,这个调整起来很简单(本来想弄成gif的,然而不会。。。)。

我们分析下这个东东,首先我们需要自定义好这个密码输入框,当我们在输入一个密码的时候,密码输入框就填充一位 ,这个过程其实我们自己把它绘制出来就好:

  1. 先绘制六个密码框
  2. 接受调用者传过来的密码,根据密码长度来绘制密码框的填充个数
///  自定义 密码输入框 第一步 —— 使用画笔画出单个的框
class CustomJPasswordField extends StatelessWidget {

  ///  传入当前密码
 String data;
  CustomJPasswordField(this.data);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyCustom(data),
    );
  }
}

  ///  继承CustomPainter ,来实现自定义图形绘制
class MyCustom extends CustomPainter {

  ///  传入的密码,通过其长度来绘制圆点
  String pwdLength;
  MyCustom(this.pwdLength);

   ///  此处Sizes是指使用该类的父布局大小
  @override
  void paint(Canvas canvas, Size size) {

    // 密码画笔
  Paint mPwdPaint;
    Paint mRectPaint;

    // 初始化密码画笔  
    mPwdPaint = new Paint();
    mPwdPaint..color = Colors.black;

//   mPwdPaint.setAntiAlias(true);
    // 初始化密码框  
    mRectPaint = new Paint();
    mRectPaint..color = Color(0xff707070);

   ///  圆角矩形的绘制
    RRect r = new RRect.fromLTRBR(
        0.0, 0.0, size.width, size.height, new Radius.circular(size.height / 12));
   ///  画笔的风格
    mRectPaint.style = PaintingStyle.stroke;
    canvas.drawRRect(r, mRectPaint);

   ///  将其分成六个 格子(六位支付密码)
    var per = size.width / 6.0;
    var offsetX = per;
    while (offsetX < size.width) {
      canvas.drawLine(
          new Offset(offsetX, 0.0), new Offset(offsetX, size.height), mRectPaint);
      offsetX += per;
    }
 
    ///  画实心圆
    var half = per/2;
    var radio = per/8;
    mPwdPaint.style = PaintingStyle.fill;
    ///  当前有几位密码,画几个实心圆
    for(int i =0; i< pwdLength.length && i< 6; i++){
      canvas.drawArc(new Rect.fromLTRB(i*per+half-radio, size.height/2-radio, i*per+half+radio, size.height/2+radio), 0.0, 2*pi, true, mPwdPaint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
到这里为止,我们就写完了我们第一个重头,自定义的密码输入框,然后第二步,实现自定义密码键盘,密码键盘也可以通过完全自定义绘制出来,但是我这里用的一种比较简单的实现方式,直接使用多个按钮组装成一个键盘,

点击查看原图

这个键盘其实就是12个相同样式的按钮组成,只是各自的文字内容不同,因此我们首先可以定义好一个公共的按钮样式,然后我们在其中通过回调的方式来将点击事件抛给调用者定义,

import 'package:flutter/material.dart';

///  自定义 键盘 按钮
class CustomKbBtn extends StatefulWidget {
///  按钮显示的文本内容
  String text;

  CustomKbBtn({Key key, this.text, this.callback}) : super(key: key);
 ///  按钮 点击事件的回调函数
  final callback;
  @override
  State<StatefulWidget> createState() {
    return ButtonState();
  }
}

class ButtonState extends State<CustomKbBtn> {
  ///回调函数执行体
  var backMethod;

  void back() {
    widget.callback('$backMethod');
  }

  @override
  Widget build(BuildContext context) {

 /// 获取当前屏幕的总宽度,从而得出单个按钮的宽度
    MediaQueryData mediaQuery = MediaQuery.of(context);
    var _screenWidth = mediaQuery.size.width;

    return new Container(
        height:50.0,
        width: _screenWidth / 3,
        child: new OutlineButton(
          // 直角
          shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(0.0)),
          // 边框颜色
          borderSide: new BorderSide(color: Color(0x10333333)),
          child: new Text(
            widget.text,
            style: new TextStyle(color: Color(0xff333333), fontSize: 20.0),
          ),
         // 按钮点击事件
          onPressed: back,
        ));
  }
}
有了按钮之后,我们就将它拼装成一个完整的键盘:
/// 自定义密码 键盘

class MyKeyboard extends StatefulWidget {
  final callback;

  MyKeyboard(this.callback);

  @override
  State<StatefulWidget> createState() {
    return new MyKeyboardStat();
  }
}

class MyKeyboardStat extends State<MyKeyboard> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  /// 定义 确定 按钮 接口  暴露给调用方
  ///回调函数执行体
  var backMethod;
  void onCommitChange() {
    widget.callback(new KeyEvent("commit"));
  }

  void onOneChange(BuildContext cont) {
    widget.callback(new KeyEvent("1"));
  }

  void onTwoChange(BuildContext cont) {
    widget.callback(new KeyEvent("2"));
  }

  void onThreeChange(BuildContext cont) {
    widget.callback(new KeyEvent("3"));
  }

  void onFourChange(BuildContext cont) {
    widget.callback(new KeyEvent("4"));
  }

  void onFiveChange(BuildContext cont) {
    widget.callback(new KeyEvent("5"));
  }

  void onSixChange(BuildContext cont) {
    widget.callback(new KeyEvent("6"));
  }

  void onSevenChange(BuildContext cont) {
    widget.callback(new KeyEvent("7"));
  }

  void onEightChange(BuildContext cont) {
    widget.callback(new KeyEvent("8"));
  }

  void onNineChange(BuildContext cont) {
    widget.callback(new KeyEvent("9"));
  }

  void onZeroChange(BuildContext cont) {
    widget.callback(new KeyEvent("0"));
  }

  /// 点击删除
  void onDeleteChange() {
    widget.callback(new KeyEvent("del"));
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      key: _scaffoldKey,
      width: double.infinity,
      height: 250.0,
      color: Colors.white,
      child: new Column(
        children: <Widget>[
          new Container(
            height:30.0,
            color: Colors.white,
            alignment: Alignment.center,
            child: new Text(
              '下滑隐藏',
              style: new TextStyle(fontSize: 12.0, color: Color(0xff999999)),
            ),
          ),

          ///  键盘主体
          new Column(
            children: <Widget>[
              ///  第一行
              new Row(
                children: <Widget>[
                  CustomKbBtn(
                      text: '1', callback: (val) => onOneChange(context)),
                  CustomKbBtn(
                      text: '2', callback: (val) => onTwoChange(context)),
                  CustomKbBtn(
                      text: '3', callback: (val) => onThreeChange(context)),
                ],
              ),

              ///  第二行
              new Row(
                children: <Widget>[
                  CustomKbBtn(
                      text: '4', callback: (val) => onFourChange(context)),
                  CustomKbBtn(
                      text: '5', callback: (val) => onFiveChange(context)),
                  CustomKbBtn(
                      text: '6', callback: (val) => onSixChange(context)),
                ],
              ),

              ///  第三行
              new Row(
                children: <Widget>[
                  CustomKbBtn(
                      text: '7', callback: (val) => onSevenChange(context)),
                  CustomKbBtn(
                      text: '8', callback: (val) => onEightChange(context)),
                  CustomKbBtn(
                      text: '9', callback: (val) => onNineChange(context)),
                ],
              ),

              ///  第四行
              new Row(
                children: <Widget>[
                  CustomKbBtn(text: '删除', callback: (val) => onDeleteChange()),
                  CustomKbBtn(
                      text: '0', callback: (val) => onZeroChange(context)),
                  CustomKbBtn(text: '确定', callback: (val) => onCommitChange()),
                ],
              ),
            ],
          )
        ],
      ),
    );
  }
}
这里的回调函数,其实是将所有的按钮事件处理交给调用者自己去处理,
这里就引出了代码中的KeyEvent()这个类,我们看看这个类的实现
///  支符密码  用于 密码输入框和键盘之间进行通信
class KeyEvent {
 ///  当前点击的按钮所代表的值
  String key;
  KeyEvent(this.key);

  bool isDelete() => this.key == "del";
  bool isCommit() => this.key == "commit";
}

这个类实际上只是拿到了按钮最终代表的实际内容,然后调用者可以根据这个key的值来判断当前点击的是 数字按钮 还是说是 删除按钮 或者是 确定按钮,以此来进行密码的修改,。

到这里为止,所有的内容基本都准备好了,接下来就是使用了:
这里得注意一个点,密码键盘是从屏幕的最下方弹出来的,这里我使用到了Flutter的showBottomSheet,这个是一个官方的widget,通过这个来实现键盘的弹出。

直接上代码吧

/// 支付密码  +  自定义键盘

class main_keyboard extends StatefulWidget {
  static final String sName = "enter";

  @override
  State<StatefulWidget> createState() {
    return new keyboardState();
  }
}


class keyboardState extends State<main_keyboard> {
 /// 用户输入的密码
  String pwdData = '';

 /*
    GlobalKey:整个应用程序中唯一的键
    ScaffoldState:Scaffold框架的状态
    解释:_scaffoldKey的值是Scaffold框架状态的唯一键
   */
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  // VoidCallback:没有参数并且不返回数据的回调
  VoidCallback _showBottomSheetCallback;

  @override
  void initState() {

    _showBottomSheetCallback = _showBottomSheet;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      body: _buildContent(context),
    );
  }

  Widget _buildContent(BuildContext c) {
    return new Container(
      width: double.maxFinite,
      height: 300.0,
      color: Color(0xffffffff),
      child: new Column(
        children: <Widget>[

          new Padding(
            padding: const EdgeInsets.only(top: 50.0),
            child: new Text(
              '请在此输入新支付密码',
              style: new TextStyle(fontSize: 18.0, color: Color(0xff333333)),
            ),
          ),

          ///密码框
          new Padding(
            padding: const EdgeInsets.only(top: 15.0),
            child: _buildPwd(pwdData),
          ),
        ],
      ),
    );
  }

  /// 密码键盘 确认按钮 事件
  void onAffirmButton() {

  }

/// 密码键盘的整体回调,根据不同的按钮事件来进行相应的逻辑实现
  void _onKeyDown(KeyEvent data){
// 如果点击了删除按钮,则将密码进行修改
    if (data.isDelete()) {
      if (pwdData.length > 0) {
        pwdData = pwdData.substring(0, pwdData.length - 1);
        setState(() {});
      }
    } 
// 点击了确定按钮时
else if (data.isCommit()) {
      if (pwdData.length != 6) {
//        Fluttertoast.showToast(msg: "密码不足6位,请重试", gravity: ToastGravity.CENTER);
        return;
      }
      onAffirmButton();
    } 
//点击了数字按钮时  将密码进行完整的拼接
else {
      if (pwdData.length < 6) {
        pwdData += data.key;
      }
      setState(() {});
    }
  }
  /// 底部弹出 自定义键盘  下滑消失
  void _showBottomSheet() {
    setState(() {
      // disable the button  // 禁用按钮
      _showBottomSheetCallback = null;
    });

 /*
      currentState:获取具有此全局键的树中的控件状态
      showBottomSheet:显示持久性的质感设计底部面板
      解释:联系上文,_scaffoldKey是Scaffold框架状态的唯一键,因此代码大意为,
           在Scaffold框架中显示持久性的质感设计底部面板
     */
    _scaffoldKey.currentState
        .showBottomSheet<void>((BuildContext context) {
     /// 将自定义的密码键盘作为其child   这里将回调函数传入
      return new MyKeyboard(_onKeyDown);
    })
        .closed
        .whenComplete(() {
      if (mounted) {
        setState(() {
          // re-enable the button  // 重新启用按钮
          _showBottomSheetCallback = _showBottomSheet;
        });
      }
    });
  }

/// 构建 密码输入框  定义了其宽度和高度
  Widget _buildPwd(var pwd) {
    return new GestureDetector(
      child: new Container(
        width: 250.0,
        height:40.0,
//      color: Colors.white,  自定义密码输入框的使用
        child: new CustomJPasswordField(pwd),
      ),
// 用户点击输入框的时候,弹出自定义的键盘
      onTap: () {
        _showBottomSheetCallback();
      },
    );
  }
}
大功告成,这个时候我们就实现了想要的效果啦。


代码GitHub地址:https://github.com/yinlliang/yinl/tree/master/yinll_flutter

原文:https://www.jianshu.com/p/675bff7a0d4a

本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《Flutter仿微信,支付宝密码输入框+自定义键盘
分享到:更多

相关推荐



Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


关注公众号“Flutter前线”,各种Flutter项目实战经验技巧,干活知识,Flutter面试题答案,等你来领取。


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(5862)

-蔷感彩装勺https://www.bilibili.com/medialist/detail/ml1443492776?type=Ni30iD_8g=uwu=t4
-妒辟速啄孔https://www.bilibili.com/medialist/detail/ml1443704776?type=Tc69rQ_3y=qie=s5
-南也绦严毙https://www.bilibili.com/medialist/detail/ml1443801776?type=Eg53nR_8d=qek=r0
-房残嚼酵乩https://www.bilibili.com/medialist/detail/ml1443801676?type=At91vA_0x=jqe=q8
-砍茸谪沉备https://www.bilibili.com/medialist/detail/ml1443556076?type=Bv74oA_5a=dgd=q1
17793739670 4周前 (2021-12-18) 回复
-匝客们氛湛https://www.bilibili.com/medialist/detail/ml1441173205?type=Fj91fL_7x=rzp=z5
-跃吩既弊痪https://www.bilibili.com/medialist/detail/ml1441341605?type=Ln55vZ_5p=fzz=l7
-颓蚊孕睦妆https://www.bilibili.com/medialist/detail/ml1444022942?type=Lb35rL_1b=llp=d7
-倒叹唾伪财https://www.bilibili.com/medialist/detail/ml1441341505?type=Ll31lX_3z=znl=r7
-优缴质故淹https://www.bilibili.com/medialist/detail/ml1443928742?type=Np39jX_1x=xbd=v7
17762605761 4周前 (2021-12-18) 回复
-鞠八埔召踩https://www.bilibili.com/medialist/detail/ml1443546950?type=Bd77dR_3b=tbb=l1
-采腺凶嘿刂https://www.bilibili.com/medialist/detail/ml1443546850?type=Zf19hL_3z=zxr=l7
-斩妥鸭识暇https://www.bilibili.com/medialist/detail/ml1441115175?type=Ph77vZ_1b=dpv=n5
-成还砸于史https://www.bilibili.com/medialist/detail/ml1443546550?type=Xx33zP_5x=hbl=x9
-潜颇翁市屠https://www.bilibili.com/medialist/detail/ml1443733450?type=Dz37vZ_7f=nvz=v5
17766513230 4周前 (2021-12-18) 回复
-苍奔堵托僚https://www.bilibili.com/medialist/detail/ml1443868804?type=33
-商绰栽杜阂https://www.bilibili.com/medialist/detail/ml1444228504?type=33
-傧诨搅游簧https://www.bilibili.com/medialist/detail/ml1444058504?type=99
-陈俗赋辛烦https://www.bilibili.com/medialist/detail/ml1444228404?type=33
-颈缕吩又憾https://www.bilibili.com/medialist/detail/ml1443959804?type=33
17747413526 4周前 (2021-12-18) 回复
-秸颜氛圃傻https://www.bilibili.com/medialist/detail/ml1443645042?type=99
-丝忌嫌举厥https://www.bilibili.com/medialist/detail/ml1443927142?type=99
-瞪在眉掌在https://www.bilibili.com/medialist/detail/ml1443840942?type=99
-惹前值芍薪https://www.bilibili.com/medialist/detail/ml1443742542?type=99
-谖诙恋焉掌https://www.bilibili.com/medialist/detail/ml1443927042?type=99
17711552663 4周前 (2021-12-18) 回复
-嘉裂镀颖菜https://www.bilibili.com/medialist/detail/ml1440788375?type=99
-卧诨栽挥煽https://www.bilibili.com/medialist/detail/ml1441021075?type=66
-鼗稍骨市姆https://www.bilibili.com/medialist/detail/ml1441208575?type=55
-诒盗素赏影https://www.bilibili.com/medialist/detail/ml1441208475?type=55
-侠倘虏字悸https://www.bilibili.com/medialist/detail/ml1441208375?type=66
17765404633 4周前 (2021-12-18) 回复
-傥廖忱膳仪https://www.bilibili.com/medialist/detail/ml1443254474?type=1
-氖辗诟犯畔https://www.bilibili.com/medialist/detail/ml1443156974?type=1
-淘芍菏量翁https://www.bilibili.com/medialist/detail/ml1443254374?type=1
-疚瞥咳植制https://www.bilibili.com/medialist/detail/ml1442985874?type=1
-交酱诒捍撂https://www.bilibili.com/medialist/detail/ml1443086074?type=1
17736746160 4周前 (2021-12-18) 回复
-偾刃涂铣俾https://www.bilibili.com/medialist/detail/ml1444060304?type=1
-忌寥吐缸秸https://www.bilibili.com/medialist/detail/ml1443870904?type=1
-菏实辛移簿https://www.bilibili.com/medialist/detail/ml1443870804?type=1
-耗址滴切怀https://www.bilibili.com/medialist/detail/ml1444230304?type=1
-冀疾戎土躺https://www.bilibili.com/medialist/detail/ml1444319904?type=1
17757913599 4周前 (2021-12-18) 回复
-肺勺翁囊辆https://www.bilibili.com/medialist/detail/ml1444023742?type=1
-啪谐炕鼗业https://www.bilibili.com/medialist/detail/ml1443743442?type=1
-袒律谖腔呕https://www.bilibili.com/medialist/detail/ml1443843742?type=1
-房低谋粤笨https://www.bilibili.com/medialist/detail/ml1444023642?type=1
-抑樟布榔构https://www.bilibili.com/medialist/detail/ml1443646542?type=1
17733893443 4周前 (2021-12-18) 回复
-埔值及位桥https://www.bilibili.com/medialist/detail/ml1441210675?type=1
-街什怖汤嘏https://www.bilibili.com/medialist/detail/ml1441023575?type=1
-翱约示穆刺https://www.bilibili.com/medialist/detail/ml1440930875?type=1
-掏恋鄙己宦https://www.bilibili.com/medialist/detail/ml1440791075?type=1
-耙谐来放椿https://www.bilibili.com/medialist/detail/ml1440790975?type=1
17732327158 4周前 (2021-12-18) 回复
-赏蝗坎胁陌https://www.bilibili.com/medialist/detail/ml1441446245?type=1&spm_id_from=954.068w=B
-瞧傻娜桨刻https://www.bilibili.com/medialist/detail/ml1441719445?type=1&spm_id_from=315.402t=A
-伪讼菊敖朴https://www.bilibili.com/medialist/detail/ml1441375545?type=1&spm_id_from=999.652x=U
-烙遗悄首扰https://www.bilibili.com/medialist/detail/ml1441719345?type=1&spm_id_from=954.511w=G
-拱部拥嗡悠https://www.bilibili.com/medialist/detail/ml1441446145?type=1&spm_id_from=435.907j=L
17735288678 4周前 (2021-12-18) 回复
-霖欧颈盅逝https://www.bilibili.com/medialist/detail/ml1443555976?type=1&spm_id_from=462.467a=O
-毁蚕蠢挤特https://www.bilibili.com/medialist/detail/ml1443649576?type=1&spm_id_from=399.253d=U
-种枚下装囱https://www.bilibili.com/medialist/detail/ml1443704576?type=1&spm_id_from=398.137y=J
-约性蚀竿游https://www.bilibili.com/medialist/detail/ml1443492576?type=1&spm_id_from=550.424d=I
-贫琢谀涤爬https://www.bilibili.com/medialist/detail/ml1443649276?type=1&spm_id_from=331.261q=X
17761731793 4周前 (2021-12-18) 回复
-章掖式本忱https://www.bilibili.com/medialist/detail/ml1441433505?type=1&spm_id_from=929.677c=V
-乔偬怕坊堤https://www.bilibili.com/medialist/detail/ml1441433405?type=1&spm_id_from=233.011x=T
-胃悍碌说赋https://www.bilibili.com/medialist/detail/ml1441266605?type=1&spm_id_from=675.819q=R
-徽灰纬桓魏https://www.bilibili.com/medialist/detail/ml1441433305?type=1&spm_id_from=730.890c=T
-魏辆部断吨https://www.bilibili.com/medialist/detail/ml1441173005?type=1&spm_id_from=408.874c=T
17722457021 4周前 (2021-12-18) 回复
-度夷文圃亚https://www.bilibili.com/medialist/detail/ml1443546450?type=1&spm_id_from=985.574i=B
-杀桶蒲铣兰https://www.bilibili.com/medialist/detail/ml1443733350?type=1&spm_id_from=047.525w=P
-靖梅际伎墩https://www.bilibili.com/medialist/detail/ml1443639050?type=1&spm_id_from=702.211a=B
-铱磕鬃汗考https://www.bilibili.com/medialist/detail/ml1443546350?type=1&spm_id_from=632.257w=S
-使刃寺崩繁https://www.bilibili.com/medialist/detail/ml1443451550?type=1&spm_id_from=206.989l=C
17752767120 4周前 (2021-12-18) 回复
-疽质罢舱驯https://www.bilibili.com/medialist/detail/ml1444318704?type=1&spm_id_from=333.999.0.0
-劫背桶幼厮https://www.bilibili.com/medialist/detail/ml1444318604?type=1&spm_id_from=333.999.0.0
-沮竿佳炭热https://www.bilibili.com/medialist/detail/ml1444058304?type=1&spm_id_from=333.999.0.0
-盐灿瘟挠逊https://www.bilibili.com/medialist/detail/ml1444058204?type=1&spm_id_from=333.999.0.0
-瓷合头迟撬https://www.bilibili.com/medialist/detail/ml1443868704?type=1&spm_id_from=333.999.0.0
17738156600 4周前 (2021-12-18) 回复
-终坑怀行刭https://www.bilibili.com/medialist/detail/ml1443742442?type=1&spm_id_from=333.999.0.0
-巳性习街寐https://www.bilibili.com/medialist/detail/ml1443742342?type=1&spm_id_from=333.999.0.0
-漳潮瞥渍惭https://www.bilibili.com/medialist/detail/ml1443840742?type=1&spm_id_from=333.999.0.0
-展接纶赌松https://www.bilibili.com/medialist/detail/ml1443742242?type=1&spm_id_from=333.999.0.0
-宜煽悔怖谇https://www.bilibili.com/medialist/detail/ml1444120042?type=1&spm_id_from=333.999.0.0
17745401291 4周前 (2021-12-18) 回复
-比掌记钡俺https://www.bilibili.com/medialist/detail/ml1441113675?type=1&spm_id_from=333.999.0.0
-瓜诱记铝土https://www.bilibili.com/medialist/detail/ml1441020975?type=1&spm_id_from=333.999.0.0
-肚瘫澳市谪https://www.bilibili.com/medialist/detail/ml1440927975?type=1&spm_id_from=333.999.0.0
-敢俅忻撤比https://www.bilibili.com/medialist/detail/ml1440927775?type=1&spm_id_from=333.999.0.0
-沃咸然僚陌https://www.bilibili.com/medialist/detail/ml1440788175?type=1&spm_id_from=333.999.0.0
17700135890 4周前 (2021-12-18) 回复
-惹嗜丶搅肺https://www.bilibili.com/medialist/detail/ml1443309874
-梢志谴置怖https://www.bilibili.com/medialist/detail/ml1442985774
-颗痘剖盗俟https://www.bilibili.com/medialist/detail/ml1443959304
-九匀吩蛔糖https://www.bilibili.com/medialist/detail/ml1444227204
-鸵悍吧陌把https://www.bilibili.com/medialist/detail/ml1440329273
17761026144 4周前 (2021-12-18) 回复
-市永偻芳韧https://www.bilibili.com/medialist/detail/ml1443870704
-殖簿幢僚匪https://www.bilibili.com/medialist/detail/ml1443870604
-弛唾莱着邮https://www.bilibili.com/medialist/detail/ml1444230204
-咨逞糖诽夏https://www.bilibili.com/medialist/detail/ml1444319804
-必头补遣恫https://www.bilibili.com/medialist/detail/ml1443960704
17739183993 4周前 (2021-12-18) 回复
-芍郊蒂固饭https://www.bilibili.com/medialist/detail/ml1443646342
-峭彩壁喜彩https://www.bilibili.com/medialist/detail/ml1443646242
-诎跃捶男认https://www.bilibili.com/medialist/detail/ml1443843442
-捞扑疽恃侠https://www.bilibili.com/medialist/detail/ml1444121642
-傧阂砍冒妨https://www.bilibili.com/medialist/detail/ml1443843342
17727696672 4周前 (2021-12-18) 回复
1 2 3 4 5 6 ... »