Flutter布局锦囊---圆框的表单字段

设计给的效果如下：

拿到设计后，先把整体拆分成几个部分：

“黑色圆角边框”，因为文本字段（TextField）组件的没有符合需求的样式，所以要自己做一个边框。
“文本输入框”，去掉文本字段（TextField）组件默认样式的文本输入框。

然后就可以开始进行编码了。

第1步：绘制组件树

第2步：实现“黑色圆角边框”

通过容器（Container）组件的边界（border）属性做出一个矩形的边框，再通过边界半径（borderRadius）属性做出圆角效果，然后，一个圆角边框就出来了。

import 'package:flutter/material.dart';/// 自定义的圆框表单字段组件。
class RoundFormField extends StatefulWidget {/// 字段内的提示文字。final String hintText;/// 文本字段的控制器。final TextEditingController textEditingController;/// 文本字段修改时的回调函数。final Function checkCallback;RoundFormField({this.hintText,this.textEditingController,this.checkCallback,});@override_RoundFormFieldState createState() => _RoundFormFieldState();
}/// 与自定义的圆框表单字段组件关联的状态子类。
class _RoundFormFieldState extends State<RoundFormField> {@overrideWidget build(BuildContext context) {return Container(decoration: BoxDecoration(// 边界（`border`）属性，要在背景颜色、渐变或图像上方绘制的边框。border: Border.all(width: 3.0,color: Color(0xFF4A4A4A),),// 边界半径（`borderRadius`）属性，对此容器框的角进行舍入。borderRadius: const BorderRadius.all(// 半径（`Radius`）类，圆形或椭圆形的半径。// 边界半径.圆（`Radius.circular`）构造函数，构造一个圆形半径。const Radius.circular(2.0)),),// TODO: 第3步：实现“文本输入框”);}
}

第3步：实现“文本输入框”

在Flutter中，输入文本只能用文本字段（TextField）组件，但是你需要把它的默认装饰和边框都去掉，再设置一下下字体大小、颜色就好了。

      // TODO: 第3步：实现“文本输入框”child: TextField(// 控制器属性，控制正在编辑的文本。controller: widget.textEditingController,// 光标颜色属性，绘制光标时使用的颜色。cursorColor: const Color(0xFFFF6B47),// 光标宽度属性，光标的厚度，默认是2.0。cursorWidth: 1.0,// 样式属性，用于正在编辑的文本的样式。style: TextStyle(color: Color(0xFF4A4A4A),fontSize: 16.0,),// 装饰（`decoration`）属性，在文本字段周围显示的装饰。decoration: InputDecoration(// 边框属性，装饰的容器周围绘制的形状。border: InputBorder.none,// 填充颜色属性，填充装饰容器的颜色。fillColor: const Color(0xFFF5F5F5),// 是密集属性，输入子项是否是密集形式的一部分（即使用较少的垂直空间）。isDense: true,// 填充属性，如果为`true`，则装饰的容器将填充fillColor颜色。filled: true,// 提示样式属性，用于提示文本（`hintText`）的样式。hintStyle: TextStyle(color: Color(0xFF9B9B9B),fontSize: 16.0,),// 提示文本属性，提示字段接受哪种输入的文本。hintText: widget.hintText,),// 在改变属性，当正在编辑的文本发生更改时调用。onChanged: (value) {// 每次修改字段文本时都会调用一次。widget.checkCallback(value);},),

第4步：还原效果

Flutter布局锦囊---圆框的表单字段相关推荐

Flutter布局锦囊---蜡笔画的表单
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "手机号输入框",使用自定义的登录表单字段组件实现的输入框. "验证码输入框",使用自定义的登录表单验 ...
Flutter布局锦囊---绑定手机页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "顶部导航栏",标题+取消按钮+跳过按钮的应用栏. "手机号输入框",用于获取手机号码的圆角边框输入字 ...
Flutter布局锦囊---手机号登录页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "运营位",使用自定义的旋转木马滑块组件实现可以滚动的运营位. "登录表单",使用自定义的登录表单组件 ...
input失去焦点验证格式_vue2多文本框的表单校验(3)-失去焦点触发校验
vue2多文本框的表单校验(3)-失去焦点触发校验第一步,在子组件中 blur 事件中派发 blur @blur="blur2($event.target.value)" @i ...
Flutter布局锦囊---完善信息页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "用户昵称输入",获取用户输入的昵称信息. "用户头像选取",获取用户选取作为头像的图片. " ...
原生js赋值html,原生js文本框赋值点击文字给text文本框赋值表单提交
特效描述:文本框赋值文本框赋值表单表单提交. 代码结构 1. HTML代码菜单导航时间日期焦点图 tab标签 jquery特效在线客服官网 js代码 var x=["菜单导航& ...
html表单弹窗提示框,【前端】弹出框提交表单
[前端]弹出框提交表单发布时间:2018-11-03 22:30, 浏览次数:826 目录 * 功能描述 * 效果截图 * 代码 * html代码 * 触发弹出窗口的按钮 * js代码 * 弹出框的 ...
泛微动态获取表单字段ID
泛微8.0动态获取表单字段ID 说明前端代码前端调用代码前端jslabel.js文件方法后端代码后端getjsLabel.jsp文件查询字段基础数据SQL 说明这个功能是基于泛微8.0平 ...
axios发送请求，后端报错：所需的防伪表单字段“__RequestVerificationToken”不存在
后端使用.net mvc开发,前端使用axios发送post请求遇到错误:所需的防伪表单字段"__RequestVerificationToken"不存在. 看到此提示我们知道原因 ...