Flutter 一个电话样式小控件

蔚落 2023-10-07 16:27 12阅读 0赞

> 在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

*  [Flutter 从入门 到精通系列文章在这里][Flutter _]
 *  [当然也必需是要有源码的 在这里了][Link 1]
 *  [github 有点慢][github]

本文章的效果

![在这里插入图片描述][20210601145912489.gif_pic_center]

//定义 电话小控件
    class PhoneWidget extends StatefulWidget {
        
      //点击事件回调
      final Function(String phone) clickAction;
    
      //显示使用的小电话
      final String phone;
    
      const PhoneWidget({
        Key key, this.clickAction, this.phone}) : super(key: key);
    
      @override
      State<StatefulWidget> createState() {
        
        return _PhoneWidgetState();
      }
    }

class _PhoneWidgetState extends State<PhoneWidget> {
        
      //按下标识
      bool _isDown = false;
    
      @override
      Widget build(BuildContext context) {
        
        //手势识别
        return GestureDetector(
          //手指按下
          onTapDown: (TapDownDetails details) {
        
            setState(() {
        
              _isDown = true;
            });
          },
          //手指抬起
          onTapUp: (TapUpDetails details) {
        
            setState(() {
        
              _isDown = false;
            });
          },
          //手指移出事件范围
          onTapCancel: () {
        
            setState(() {
        
              _isDown = false;
            });
          },
          //手指抬起
          onTap: () {
        
            //点击事件
            if (widget.clickAction != null) {
        
              widget.clickAction(widget.phone);
            }
          },
          child: buildContainer(),
        );
      }
      ... ...
    }

Container buildContainer() {
        
        return Container(
          //外部边框
          decoration: BoxDecoration(
              //四个角的圆角
              borderRadius: BorderRadius.all(Radius.circular(4)),
              //边框样式
              border: Border.all(color: Colors.blue, width: 1)),
          child: Row(
            //包裹
            mainAxisSize: MainAxisSize.min,
            children: [
              //前端的小电话
              Container(
                //内边距
                padding: EdgeInsets.all(5),
                child: Icon(
                  Icons.phone,
                  size: _isDown ? 20 : 18,
                  color: Colors.white,
                ),
                //背景
                decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(3),
                      bottomLeft: Radius.circular(3),
                    )),
              ),
              SizedBox(
                width: 10,
              ),
              Text(
                "${widget.phone}",
                style: TextStyle(
                  fontWeight: _isDown ? FontWeight.w700 : FontWeight.w500,
                  color: Colors.blue,
                ),
              ),
              SizedBox(
                width: 10,
              ),
            ],
          ),
        );
      }

完毕

不局限于思维，不局限语言限制，才是编程的最高境界。

以小编的性格，肯定是要录制一套视频的，随后会上传

有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料

[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github]: https://github.com/zhaolongs
[20210601145912489.gif_pic_center]: https://img-blog.csdnimg.cn/20210601145912489.gif#pic_center