Flutter 一个电话样式小控件

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

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

• Flutter 从入门 到精通系列文章在这里

本文章的效果

//定义 电话小控件
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 来获取最新的学习资料