flutter获取验证码输入框组件

最新推荐文章于 2025-04-23 15:13:43 发布

原创最新推荐文章于 2025-04-23 15:13:43 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#dart #widget #前端

flutter 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个基于Flutter的验证码输入框组件，该组件来源于作者之前关于自定义样式输入框的工作。文章提供了代码示例，并附有组件的预览展示。

代码

import 'package:flutter/material.dart';

class ValidataInputBoxWidget extends StatefulWidget {
  ValidataInputBoxWidget({Key key, this.onChange, this.icon,this.getValidata}) : super(key: key);

  final IconData icon; //输入框icon materialIcon
  final onChange; //输入框change事件
  final getValidata;//点击获取验证码按钮事件

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

class ValidataInputBoxWidgetBuilder extends State<ValidataInputBoxWidget> {
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0),
      margin: EdgeInsets.only(bottom: 30.0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100.0),//圆角
          border: Border.all(//边框
              width: 1.0,
              style: BorderStyle.solid,
              color: Color.fromRGBO(0, 0, 0, 0.1))),
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: TextField(
            //输入框
              onChanged: widget.onChange,
              decoration: InputDecoration(
                  border: InputBorder.none,
                  icon: widget.icon != null ? Icon(widget.icon) : null),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
            //获取验证码按钮
              decoration: BoxDecoration(
                  color: Color(0xff0099ff),
                  borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(80.0),
                      topRight: Radius.circular(80.0))),
              child: FlatButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(80.0),
                        topRight: Radius.circular(80.0))),
                child: Text('获取验证码',style: TextStyle(color:Colors.white),),
                onPressed: widget.getValidata,
              ),
            ),
          )
        ],
      ),
    );
  }
}